アフィリエイト広告を利用しています

広告

posted by fanblog

2020年01月28日

【CSS】記事に見出しを入れよう

学習(HTML_CSS)アイキャッチ.png


是非続きから読んでいただきたい。

【履歴】
  • 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;
ほか余白など〜
}

〜結果〜
表示文言
見出し完成。

次はページ内リンクを設定してみようと思う。

今回の記事はここまで。
ではまた次回。


タグ: CSS 見出し
【このカテゴリーの最新記事】
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/9588961
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
お知らせ
ご意見ご要望ありましたらコメントかX( @KoyomiSakurano )へお願い致します。
戦闘関係の記事以外なら出来る範囲で作成します。
ブログの筆者
櫻野 暦(さくらの こよみ)さんの画像
櫻野 暦(さくらの こよみ)
こよみのTwitter
カテゴリーアーカイブ
2024年6月人気記事TOP5
検索
最新記事
タグクラウド
ファン
×

この広告は30日以上新しい記事の更新がないブログに表示されております。

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: