画像関連

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

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

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