2020年01月28日
【CSS】記事に見出しを入れよう

今回は記事を読みやすくするために見出しを取り入れてみる事にした。
是非続きから読んでいただきたい。
【履歴】
- 2020年1月28日(作成)
~ページ内リンクと見出しのイメージ~
- 見出し01へ(ページ内リンク)
- 見出し02へ(ページ内リンク)
- 見出し03へ(ページ内リンク)
見出し01
ごにょごにょ~見出し02
ごにょにょ~見出し03
ごごごにょにょ~という感じだ。ページ内リンクが無いサイトもあるが長文の場合やはりあった方が便利だ。
私の今までの記事も見返してみると項目の見出しやページ内リンクがあった方が見やすいように思う。
なのでまずは見出しを取り入れてみる事にした。
私はファンブログの記事作成ページで記事を作成している。
こだわらなければHTMLやCSSの知識が無くてもリストや見出し、画像の挿入も簡単に出来るものだ。
見出しの場合は見出しとして表示したい文言を入力し、用意された見出しのスタイルから選ぶだけで下記のようにソースコードが記述される。
<div style="~;">表示文言</div>
今回は記述されたソースコードに手を加え、表示文言の左だけでなく下にもラインを入れる。今後よく使うのでdivに見出し用classを設定し、style~の部分を外部CSSに追記する。
~記事HTML~
<div class="class名">表示文言</div>
~外部CSS~
.class名{
border(線):種類、色;
border-width(線の太さ):上px 右px 下px 左px;
ほか余白など~
}
~結果~
表示文言
見出し完成。次はページ内リンクを設定してみようと思う。
今回の記事はここまで。
ではまた次回。

【このカテゴリーの最新記事】
-
no image
-
no image
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/9588961
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック