WEBページのお知らせ欄（新着情報）を作る方法を解説！
WEBページのお知らせ欄（新着情報）を作る方法を解説します。WEBページに個別でお知らせ欄を作ることができたら、ユーザー側からとても見やすいWEBページとなります。ここでは主にHTMLを用いて実装を行い、またその際に用いるHTMLタグについても解説します。
WEBページのお知らせ欄（新着情報）を作りたい
HTMLでWEBページのお知らせ欄（新着情報）を作り、ユーザーに伝えたいときがあります。
その際にどうしたらいいのか以降の項目で順番に解説していきます。
WEBページのお知らせ欄（新着情報）を作る方法
WEBページのお知らせ欄（新着情報）を作る方法について、まずHTMLの解説から順番に見ていきましょう。
WEBページのお知らせの詳しい内容についてはリンクで飛んでもらうように設定し、お知らせ欄は簡潔にします。
dl、dt、ddタグについて
今回のように簡潔な説明や定義をする場合にdl、dt、ddタグを用います。手順としては下記になります。
dlタグでまず囲みリストとなるものをdt、ddタグにそれぞれ書きます。dtタグには<dd>タグで説明される用語や文章を入れます。ddタグには<dt>タグを説明する言葉や文章が入ります。
displayをflexとする必要があります。ではサンプルコードを用いて、実際の挙動を見てみましょう。
このようにお知らせ欄ができていることが分かります。
dl、dt、ddタグの便利な点
先ほどのサンプルコードで見ていただいたように、dl、dt、ddタグはそれぞれタグごとに分かれているため、WEBページをデザインする際にわざわざクラスを設定することなく、CSSでの記入が可能となります。
またddタグ内の説明文は画面幅いっぱいで自動的に折り返してくれるので、わざわざHTMLやCSSでの設定をする必要がありません。
iframeタグを用いた場合
もう一つの方法としてHTMLタグであるiframeタグを使う方法があります。
iframeを用いると記述が多くなると、自動的にスクロールする形となるためWEBページのスペースをあまり取らないという利点があります。
しかしiframeを使うには注意点があります。その注意点について説明します。
iframeを用いるときの注意点
まずiframeを用いる際、iframeの中の内容部分を書いたコードのファイルとiframeを用いるファイルを別にしなくてはいけません。これについてはサンプルコードを見ていただくとよく分かります。
そしてiframeのsrc属性にiframeの内容を書いたファイル名を記述します。
以上が注意点となります。
サンプルコードと実際の挙動
それではサンプルコードを用いて実際の挙動を見ていきましょう。
このようにiframeを用いるファイルとその内容を記述したファイルを分けて書き、iframeのsrcに内容を記述したファイル名を入力することで、お知らせ欄を作ることができます。
まとめ
いかがでしたでしょうか？
お知らせ欄を作り、そこに新着情報などをまとめておくととても見やすく、ユーザビリティの高いWEBページを作成することができます。
ぜひ試してみてください。
