画像関連

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

Sara


ここまでの記事はこちら

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

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

解説

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

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

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

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

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

Bootstrap と FontAwesome の準備

Bootstrap

2022年12月時点での最新バージョンは 5.2ですが、このプロジェクトでは 4.3 を使用しています。

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

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

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

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

ボタンやテキストの色など 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" /* 省略 */ style="position:fixed;">

次に行うこと

これで HTML は完成です!

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

Subscribe
Notify of
guest
2 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
yoshiaki35
yoshiaki35
4 years ago

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

ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

2
0
この記事にコメントするx
記事URLをコピーしました