HTML知識-文字背景の装飾、GIF動画挿入(X170)

★ターゲット:ウェブ制作を極めたい人

ホーホーホウ!どうも!アホウごんしです!今回は前回に引き続き、ウェブ制作の専門家をともに目指すべく、知識を授けたいと思います!

(1)リンクを設置する

ホームページの便利なとこといえば、リンクを設置して他のページの紹介や、同じページ内でもシュッと移動できるリンクを設置できるという点があります。

●<a href=”(URL名)“>〇</a>

これは簡単!〇の部分にリンクを設置したい文字や画像を入れ、URL名をリンク先開いてコピペすれば簡単に作成できちゃうぞ!

●<a href=”#〇”>(リンク元)</a>(~リンク元からリンク先まで~)<h2 id=”〇”>(リンク先)</h2>

これは同じページ内で、ページの上の方から下の方にジャンプさせたいときに使います。だって、ページが縦に長いと、スクロールするの大変じゃないですか?しかしリンク元を目次として設定すれば、リンク元の文字をクリックすれば一気に読みたいページまで飛ぶように設定することができるというわけだす。

〇の部分には適当な記号を入れますが、<a href=”〇”>と<h2 id=”〇”>に入れる文字は同じ記号を設定しないと意味がありません。123でもaaaでもなんでもいいです。複数の内部ページ内リンクを設定したい場合は、違う記号を使います。




(2)太字の文字の背景に色や画像を入れる

CSS(修飾する言語)の1つですな。タイトルを強調したいときは、文字をでっかくして太字にし、さらに色や画像を背景にすれば目立たせることができます!

●<b style=”background-color:〇”>(文字)</b>

上記コードですと太字の背景に色をつけることができます。〇の中に色を意味する#から始まる7文字の記号を入れます。

●<b style=”background-image:url(HTMLファイル名/画像名);”>(文字)</b>

上記コードですと太字の背景に画像を入れることができます。urlの後の()の中に、パソコンに保存されたHTMLファイル名/画像の名前を入れると挿入できます。画像は拡張子(jpgなど)は忘れないように!

(3)ページの背景に色や画像をつける

●<td style=”background-color:〇;”>(テーブル内コンテンツ)</td>

<td>とはテーブルのことで、ページの特定の枠を指します。この枠内の背景色として上記コードを書き込むことで、背景の色を指定することができまっす!…まあ、でも見やすいのは結局、白背景に黒文字か、黒背景に白文字かになるかと思いますが(笑)

●<td style=”background-image:url(HTMLファイル名/画像名);”>(テーブル内コンテンツ)</td>

そろそろ仕組みが分かってきましたか?書き方は太字の背景に画像を入れるやり方とほとんど同じですな!

(4)GIF動画を挿入する

●<img src=”(HTMLファイル名)/(GIFファイルの名前:〇.gif)”>

静的なサイトもいいですが、動画を入れたらページに動きが生まれ、華が出るでしょう。手軽にかつ、重くならないように動画を入れる方法として、GIF動画というものがございます。GIF動画とは、複数の画像素材を組み合わせて動画にしたものだす。

サイトのページのタグでは、画像と同じく<img src=””>で指定します。GIF動画はホームページビルダー付属のウェブアニメーターや、Adobe Premiere proなどで作成できますよ!

『これから学ぶHTML/CSS Kindle版』:斎藤新三、山田祥寛

電子書籍として読める、ウェブプログラミング入門書!ウェブプログラマーの視点で書かれた、ウェブシステムを理解するための本です。テーブル表示、リンクやコンテンツ埋め込み、CSS、レスポンシブレイアウトまで、詳しく書いてあるので初心者の方はぜひ!

コメントを残す

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