更新履歴とか、サイト情報とかを載せるページをつくっていきます。
載せる情報は、自分のサイトに合った内容にしてください。記述方法を知れば、いくらでも追記可能です。
お知らせページの準備
まず、index.htmlをコピー＆ペーストしてください。
index.htmlを右クリック
コピーを選択（左クリック）し
何もない白い所で右クリック、貼り付けを選択
index.htmlのコピーが出来たらOKです。
↑のhtmlファイルを右クリックして、名前を変更します。
news.htmlという名前にしてください。
ファイルが出来たら、news.htmlをテキストエディタ（サクラエディタ）で開いてください。
hakoの開始divから閉じdivまでを消しちゃいましょう。（下の画像の赤枠部分）
これで、news.htmlを記述する準備が整いました。
お知らせページを記述する
お手軽簡単なお知らせページをつくります。
お知らせの内容。例：更新履歴、とか。
お知らせの詳細。例：〇月×日サイト開設、とか。
の基本的な構造で作ります。
まず、お知らせの内容
<h2>お知らせ</h2>
<h3>当サイトについて</h3>
<p>アドレスは、https://〇〇〇.siteです。</p>
<p>管理人は、〇〇です。</p>
<h3>更新履歴</h3>
<p>2019年1月1日 サイト開設</p>
<p>2019年6月1日 サイトリニューアル</p>＜ｈ２＞～＜/ｈ２＞で包んだ部分が、見出しとなります。
＜ｈ３＞～＜/ｈ３＞で包んだ部分は、小見出しです。
で、お馴染み＜ｐ＞～＜/ｐ＞がお知らせ内容です。
これだけの記述でブラウザ確認すると…
味もそっけもないですが、一応伝えたいことを伝えられました。
お知らせページに色気は不要だと思うので、これで十分だと思います。
でも、ちょっと可読性に欠けるかなぁ…。頑張れるひとはCSSで装飾しちゃいましょう。
見出しを装飾して強調する
見出しはセンスがいるからなー。わたしセンスないので、ダサ見出しを作ります。
ハイセンス見出しを作りたいひとは、「CSS 見出し おしゃれ」でググったら良いの出てきます。
h2 {
background: #ffffd8;
border-left: double 10px #e7c478;
}
h3 {border-bottom: solid 3px #e7c478;}
はいー。ブラウザで見てみます。ダッサイですよ～。
はぁ……。もうセンスは仕方ない。
ｈ２の「お知らせ」の装飾から説明していきますね。
background: #ffffd8;＝背景色を指定しています。
border-left: double 10px #e7c478;＝10pxの２重ボーダーを左だけに書いて。と指定しています。
double＝２重線、10px＝線の幅、#e7c478＝線の色…といった指定方法です。好きな順番で書いても大丈夫です。（10px #e7c478 doubleでもOK）
次、ｈ３の「当サイトについて」と「更新履歴」の装飾です。
border-bottom: solid 3px #e7c478;＝１重ボーダーを下だけに書いて。と指定しています。
solid＝１重線（普通の線）、３px＝線の幅、#e7c478＝線の色…といった指定です。
ボーダーを付けるのは、基本同じ指定方法です。右ボーダーならborder-rightで指定します。全方向ならborderだけでOKです。
ボーダーは見出し装飾以外にも使うので、なんとなく記述ルールを覚えておいてください。
文字の位置を調整する
見出しのギチギチ感を解消します。
h2{padding:5px;}
h3{padding-left:5px;}ｈ２、ｈ３に、内部でのすき間をつくる。という指定です。
marginと似ていますが、marginは外側のすき間。paddingは内側のすき間。です。けども、いまは違いを覚えなくていいかなと思います。
どっちか入れてみて、効いた方が正しい方。
それでつくっていってると、なんとなく使い分けられるようになる。それがmarginとpaddingだと思っています。
ブラウザで見てみます。
ギチギチ感、やわらぎました。
こうなると、内容部分が左に寄りすぎて見えますね。下げましょう。
p {text-indent: 1em;}
字下げを、１em（全角の１文字分）してね。という指定です。
そこそこ見栄えが良くなりました。
超超初心者から初心者に昇格したら
更新履歴のように、日付と内容がセットで成り立っている場合、サイト界的にはｐタグ以外で記述した方がいいです。
初心者に昇格の際には、次のタグを使うことも検討してください。
<dl> <dt><time datetime="2019-01-01">2019年1月1日</time></dt> <dd>サイト開設</dd> </dl>
ｐを使うときと違う表示になってしまいますが、CSSを覚えていくと同じような表示に調整できるようになります。
この記述を使っていると、検索ロボットくんに好かれます。たぶん。
いまはちんぷんかんぷんでも全然大丈夫です。いずれ、簡単に扱えるようになります。
今回は説明は省略します。紹介まで。
お疲れさまでした。
コメント