ここまでの記事はこちら
まずはHTMLを用意していきましょう。
Bootstrap を使ってレイアウトと画像を表示するLightbox を作っていきます。
動画
解説
フォルダとファイルの用意
まずはこのプロジェクト用のフォルダを作成しましょう。
名前は何でも良いですが、ここでは ImageTest という名前で作成しました。
フォルダを作成したら、フォルダ内に list.php という名前でファイルを作成します。
またレイアウト確認のために、画像ファイルをひとつ用意してください。ここでは「cat.jpg」という画像をフォルダに置いています。
HTML を作成する
list.php に以下のコードを書いてください。（詳しい手順は動画をご確認ください。）
HTML に書いているクラス名は全て Bootstrap で用意されているものを使用しています。
ここでは簡単に Bootstrap と Font Awesome の使い方を紹介します。
Bootstrap の使い方
Bootstrap のトップページを表示したら「Get Started」を押します。
CSSは<head>タグ内に、JavaScript は</body> の直前に、それぞれコピー&ペーストします。
先ほど書いたコードでは 6・70・71行目の部分です。
popper.min.js はツールチップに使われるファイルで、今回は不要なので削除しました。
今回はモーダルと画像スライダーに JavaScript が使用されているため、 CSS と JavaScript の両方を読み込みました。
ボタンやテキストの色など、一部の Bootstrap デザインを利用したいだけの場合は CSS だけ読み込めば問題ありません。
必要のない JavaScript を読み込んでしまうとページの表示速度に影響するので、使用方法にあわせて読み込むファイルを選んでください。
Bootstrap の使い方は簡単です。
例えば、33 行目の「保存」ボタンのクラスを取得する場合は、検索ボックスまたはメニューから「Button」を探します。
Button ページを表示すると Example（例）がたくさん表示されるので、コードをコピー&ペーストするだけです。
参考リンク
Media list: リンク
Modal (Vertically centered) : リンク
Carousel (With indicators) : リンク
Font Awesome の使い方
Font Awesome のトップページを表示したら「Start Using Free」を押します。
CSSを<head>タグ内にコピー&ペーストします。
先ほど書いたコードでは 7行目の部分です。
メニューの検索ボックス、または「Icons」から検索して、使いたいアイコンを選択します。
使用するアイコンを選択したら、HTMLをコピーして貼り付けるだけです。
無料アイコンだけでも1500種類以上から選ぶことができるので、ご自身のサイトに合うアイコンを探してみてください🙂
このような画面になったでしょうか？
画像をクリックすると、画像が大きく表示されるかどうかも確認してみてください。
＊画像をクリックすると、画面が暗くなって画像が表示されない場合
35 行目に style="~"の部分を追加してください。
次に行うこと
これで HTML は完成です！
次回は MySQL データベースの準備をしていきます。
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
1. TechAcademy（テックアカデミー）
オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。
2. CodeCamp（コードキャンプ）
一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。
タグをコピー＆ペーストして、ファイルを
サーバーに上げましたが、小さい画像は表示されますが
大きい画像は表示されません
タグ間違ってませんか？
yoshiaki35さん
確認しましたが、タグは全て正しいものになっています。
・ブラウザのキャッシュ削除
・JavaScriptが読み込まれているか
の２点を確認してみてください。
画像をクリックした時に、画像が表示されず画面が暗くなってしまう場合は、39行目にstyle="~"の部分を追加してみてください。
<div class="modal carousel slide" id="lightbox" tabindex="-1" role="dialog" data-ride="carousel" style="position: fixed;">
お役に立てば幸いです🙂