画像関連

【PHP・MySQL】データベースに画像ファイルを保存・表示する方法 第1回「HTMLの作成」

ここまでの記事はこちら
 

まずはHTMLを用意していきましょう。
Bootstrap を使ってレイアウトと画像を表示するLightbox を作っていきます。

 


 

動画

【PHP・MySQL】画像を保存・表示する方法 – #2 HTMLを作成する (Bootstrap & FontAwesome)

 
 

解説

フォルダとファイルの用意

まずはこのプロジェクト用のフォルダを作成しましょう。

名前は何でも良いですが、ここでは 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="~"の部分を追加してください。

<div class="modal carousel slide" id="lightbox" tabindex="-1" role="dialog" data-ride="carousel" style="position: fixed;">

 
 

次に行うこと

これで HTML は完成です!
次回は MySQL データベースの準備をしていきます。

第2回「データベースの用意」に進む
 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

POSTED COMMENT

  1. アバター yoshiaki35 より:

    タグをコピー&ペーストして、ファイルを
    サーバーに上げましたが、小さい画像は表示されますが
    大きい画像は表示されません
    タグ間違ってませんか?

  2. Sara Sara より:

    yoshiaki35さん

    確認しましたが、タグは全て正しいものになっています。
    ・ブラウザのキャッシュ削除
    ・JavaScriptが読み込まれているか
    の2点を確認してみてください。

    画像をクリックした時に、画像が表示されず画面が暗くなってしまう場合は、39行目にstyle="~"の部分を追加してみてください。
    <div class="modal carousel slide" id="lightbox" tabindex="-1" role="dialog" data-ride="carousel" style="position: fixed;">

    お役に立てば幸いです🙂

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です