画像関連

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

ここまでの記事はこちら
 

まずは HTML を用意していきましょう。

Bootstrap を使ってレイアウトと画像を表示する Lightbox を作っていきます。

 


 

解説

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

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

名前は何でも良いですが、ここでは ImageTest という名前で作成しました。

フォルダを作成したら、フォルダ内に list.php という名前でファイルを作成します。

またレイアウト確認のために、画像ファイルをひとつ用意してください。ここでは cat.jpg という画像をフォルダに置いています。

 
 
 

Bootstrap と FontAwesome の準備

Bootstrap

2021年9月現在の最新バージョンは 5.1 ですが、このプロジェクトでは 4.3 を使用しています。

Bootstrap バージョン 4.3 の公式ページ https://getbootstrap.com/docs/4.3/getting-started/introduction/ を表示します。

CSSは<head>タグ内に、JavaScript は</body> の直前に、それぞれコピー&ペーストします。


 

ツールチップに使われる popper.min.js はこのプロジェクトには必要ないので読み込まなくても問題ありません。

今回はモーダルと画像スライダーに JavaScript が必要なので CSS と JavaScript の両方を読み込みました。

ボタンやテキストの色など、一部の Bootstrap デザインを利用したいだけの場合は CSS だけ読み込んで使うこともできます。

必要のない JavaScript を読み込んでしまうとページの表示速度に影響するので、使用方法にあわせて読み込むファイルを選んでください。
 
 

FontAwesome

現在 FontAwesome 公式の CDN を使うにはメールアドレスの登録が必要になりました。https://cdnjs.com/libraries/font-awesome の CDN は登録不要で使うことができます。

Font Awesome のトップページを表示したら「Start Using Free」を押します。


 

CSSを<head>タグ内にコピー&ペーストします。


 
 
 

list.php がこのようになっていれば準備完了です。

 
 
 

HTML を作成する

list.php に10~68行目のコードを書いてください。

 
 

HTML に書いているクラス名は全て Bootstrap で用意されているものを使用しています。

ここで簡単に Bootstrap と Font Awesome の使い方を紹介します。
 

Bootstrap の使い方

Bootstrap の使い方は簡単です。

例えば33行目の「保存」ボタンのクラスを取得する場合は、検索ボックスまたはメニューから Button を探します。

Button ページを表示すると Example(例)が表示されるので、コードをコピー&ペーストするだけです。


 

参考リンク
Media list:リンク
Modal (Vertically centered):リンク
Carousel (With indicators):リンク
 
 
 

Font Awesome の使い方

メニューの検索ボックスまたは「Icons」からアイコンを検索します。


 

使用するアイコンをクリックしたら、HTML をコピーして貼り付けるだけです。

 

無料アイコンだけでも1500種類以上から選ぶことができるので、ご自身のサイトに合うアイコンを探してみてください。

 
 
 

ブラウザで確認する

このような画面になったでしょうか?

画像をクリックすると、画像が大きく表示されるかどうかも確認してみてください。

 
*画像をクリックすると、画面が暗くなって画像が表示されない場合

39行目に style="~"の部分を追加してください。

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

 
 
 

次に行うこと

これで HTML は完成です!

次回は MySQL データベースの準備をしていきます。

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

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest
2 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
yoshiaki35
yoshiaki35
2 years ago

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

2
0
この記事にコメントするx