第1回「画像を表示」PHPプログラムを使ったHTML5で画像の表示

今回は、画像の表示方法、アップロード方法・保管方法について触れていきます。

※この記事では、画像をHTML5で表示するだけでなく、PHPプログラミングを使ったアップロード方法も説明します。例えば「ツイッター」や「LINE」でも、自分のページ等に画像を設定できますよね。そういった機能です。

 

ですが、まず、画像を表示するHTML5から説明していきます。

今回の記事を書くにあたって参考にしたサイト

ほんっとはじめてのHTML5とCSS3

素晴らしいサイトですので、是非、見てみてください。

 

“img”タグ

HTML5で画像を表示する場合は”img”タグを使用します。

使用例

使用する属性	<img src="フォルダ/画像ファイルの名前" width="横幅" height="高さ" alt="代替えテキスト">

※代替えテキストというのは、画像の説明文です。今はあまり使われませんが、マウスを当てた時に表示される名前です。(あまり利用されません)ただ、音声ブラウザ等では、代替えテキストを読み上げる事があるので、必ず記述しましょう。

 

今回使う画像ファイル

この画像を右クリックして、「名前を付けて画像を保存」で保存してください。

 

画像を保存・管理するフォルダを作成

HTMLファイルやPHPファイル等と同じフォルダに、複数の画像ファイルを保管しておくと、ファイル数がいっぱいになります。「img」と名前を付けたフォルダを作成し、その中に画像を保存するようにしましょう。

imgフォルダの中

※画像ファイルには色々な拡張子がありますが、PHPプログラミングでは「jpg」「jpeg」「png」「gif」の画像ファイルを使用できます。

 

PHPファイルに”img”タグで画像を指定

下記ソースをコピーし、「index.php」と名前を付け保存してください。

<?php
//変数に文字列を代入
$text_1 = "雨ニモマケズ風ニモマケズ<span>雪ニモ夏ノ暑サニモマケヌ
丈夫ナカラダヲ</span>モチ慾ハナク決シテ瞋ラズ
イツモシヅカニワラッテヰル一日ニ玄米四合ト味噌ト少シノ野菜ヲタベ
アラユルコトヲジブンヲカンジョウニ入レズニ";
$text_2 = "ヨクミキキシワカリソシテワスレズ野原ノ松ノ林ノ
小サナ萓ブキノ小屋ニヰテ東ニ病気ノコドモアレバ
行ッテ看病シテヤリ西ニツカレタ母アレバ行ッテソノ稲ノ朿ヲ負ヒ
南ニ死ニサウナ人アレバ行ッテコハガラナクテモイヽトイヒ";
$text_3 = "(宮沢賢治 「雨ニモマケズ」)";
?>

<!-- HTML5の文書型宣言 -->
<!DOCTYPE html>
<!-- 「lang属性」でコードが何語か設定宣言 -->
<html lang="ja">
<head>

<!-- 文字エンコーディングの設定宣言 -->
<meta charset="UTF-8">

<!-- title宣言 -->
<title>空の画像を表示しよう</title>

<!-- スタイルシートCSS設定 -->
<style>
div{
/* 文字の色 */
color:#ff0000;
/* ブラウザで表示される幅 */
width:50%;
/* 上の余白の設定 */
margin-top:20px;
/* 下記2行でコンテンツを中央寄せにする */
margin-right:auto;
margin-left:auto;
}
span {
/* 文字の色 */
color:#009900;
}
h1 {
/* 文字の色 */
color:#660000;
/* 文字の大きさ */
font-size:30px;
}
</style>

</head>
<body>
<div>
<h1>PHPプログラミング</h1>
<!-- 画像を表示 -->
<img src="img/00842.JPG" width="300px" height="200px" alt="青空">
<p>
<?php echo $text_1; ?>
</p>
<p>
<?php echo $text_2; ?>
</p>
<?php echo $text_3; ?>
</div>
</body>
</html>

56行目に1行だけ追記しました。これで画像を表示することができます。

ブラウザで確認すると・・・

画像が表示されます。

 

全ての画像の大きさをPHPプログラムで指定する

「ツイッター」や「LINE」のプロフィール画像の大きさは、全員同じです。それは、どんなサイズの画像でも、プロフィールページで、画像サイズを同じサイズに指定しているからです。

<?php
     $img_size_width = "200px";
     $img_size_height = "200px";
?>
<img src="img/00842.JPG" 
width=<?php echo $img_size_width; ?> 
height=<?php echo $img_size_height; ?> 
alt="青空"><br>

上記のように”$img_size_width”や”$img_size_height”変数にピクセル数を代入して置くと、横幅や高さを一貫して設定・管理することが可能になります。

 

画像を丸く表示する

 CSSで画像のタグ(画像を包んでいるタグでもOK)を丸く指定します。

img{
    border-radius: 100px;
}

ブラウザで確認すると

 角が丸くなります。

次回以降にやりますが、もともと正方形の画像の角を丸くすれば、ツイッターのサムネ画像のように、まん丸に表示できます。

 

 

 次回は、imgタグをもっと詳しく使ってみます。

第2回「画像を表示」文章と画像の配置「imgタグ」

 

今回は以上です。お疲れさまでした。

 

,,

Comments

Leave a comment

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