個人サイトの見出しをCSSで整える

個人サイトの見出しをデザインする際に気を付けるべきポイント…何があるでしょう…。
まず見出しは読みやすさを第一に考え、フォントサイズは大きめに設定します。
例えば、h1タグはページのメインタイトルに使用し、h2タグはセクションのタイトル、h3タグはサブセクションのタイトルに使うことで、視覚的な階層構造を作り出すのが基本です。
でも、私は特に拘ってない。
h1だけは位置を決めてるくらいです。
シンプルで読みやすいフォントを選ぶことも大切ですよね。
色のコントラストも重要
背景色とテキストの色のコントラストを強くし、見出しが背景に埋もれないようにすると良いかも。
例えば、白い背景に黒い文字などが分かりやすいです。

サイト全体で見出しのスタイルを統一するのは気を付けてます。
これは大切だと思う。
すべてのh1タグは同じフォントサイズ、同じ色で統一するなど、一貫性を持たせると良いでしょう。
見出しの周りに十分な余白を設けて、他のコンテンツと見出しを区別することも重要です。
ただ、当Webサイトでは、敢えて見出しの下側の余白は狭くしています。
ページが見やすければいいんだよね。
加えて、必要に応じて見出しの横に小さなアイコンや画像を追加すると、視覚的に引き立つ効果があります。
とりあえずシンプルに始めて、徐々に自分のスタイルを見つけていくとラクですよ？

このページに関する注意事項

当Webサイト作成者は、例示を目的としてマークアップ及びプログラミング例を提供しており、明示または黙示にかかわらず、いかなる責任も負わないものとします。
このページは、説明されているマークアップ及びプログラミング言語、手順を作成およびデバッグするために使用される各種ツールに読者が精通していることを前提にしています。
このページは、特定の機能を説明するのに役立つ可能性がありますが、当Webサイト作成者がこれらの例を変更した上で、特定の要件を満たすために追加の機能を提供したり、システムを構築したりすることはできません。
加えて、この例の手順に従う場合は、読者の各種ファイルを事前にバックアップすることを推奨いたします。

見出しやテキストの設定

h1だけではなくh2なども設定していますが、中身のコードは全て同じなので省略しています。
<span>も便利に使えるタグですよ。

基本的な見出しのCSS


h1 {
  display: block;
  width: fit-content;
  background: linear-gradient(to right, #ADD8E6, #FFFFFF);
  padding: 10px;
  border-radius: 15px;
}

span.small-orange-text {
  font-size: 0.9em;
  color: #cc3300;
}

display: block;
ブロック要素として表示させます。
ブロック要素は幅全体を占め、次の要素は新しい行から始まります。
こうすることで見出しのカラーなども設定しやすいんですよね。

width: fitcontent;
見出しの幅を自動的に調整します。
内容の幅に合わせて最適なサイズにしておかないと、画像が横に伸びてしまいます。
でもデザインによっては横へ流れたほうが良いこともあるんですよね。

background: lineargradient(to right, #99CCFF, #FFFFFF);
見出しの背景カラーです。
Googleサイトでは透過画像を背景として表示させていますが、ここではCSSでカラーを描いてます。
背景に左から右に向かって色が変わるグラデーションとなっており、左側が薄い青色で、右側へ行くにつれて白色になります。

padding: 10px;
見出しタグの内側に10ピクセルの余白を追加しています。
テキストの内容が周囲の境界から少し離しておくことで、見栄えがするんですよね。
余白の取り方は奥が深いと思います。

borderradius: 15px;
見出しタグの角を15ピクセルの半径で丸くしています。
角が尖っていると、ベター…としていてあんまりかっこよくない。
滑らかにしておいたほうが見やすい表示になります。

fontsize: 0.9em;
テキストのサイズを通常の90%に設定しています。
emは相対単位であり、親要素のフォントサイズに対する割合を示しています。
私はよく相対単位を使うんですよね。
ピクセルで数字を決めないようにしてる。
スマホの画面サイズもいろいろありますから。

color: #cc3300;
テキストの色をオレンジ色（#cc3300）に設定しています。
この「#cc3300」はWebセーフカラーの一つです。

h1やh3など見出しの装飾方法

見出しのデザインを統一することは、Webサイトのデザインにおいて大切な部分かと思います。

一貫性の確保: 統一された見出しデザインは、サイト全体の一貫性を保ち、ユーザーにプロフェッショナルな印象を与えます。
ユーザーエクスペリエンスの向上: 統一された見出しは、ユーザーが情報を素早く見つけやすくし、サイトのナビゲーションをスムーズにします。
ブランド認知の強化: 一貫したデザインは、ブランドのアイデンティティを強化し、ユーザーにブランドを覚えてもらいやすくします。
視覚的な階層構造の明確化: 見出しのデザインを統一することで、コンテンツの階層構造が明確になり、情報の重要度や関連性が一目でわかるようになります。
アクセシビリティの向上: 統一された見出しデザインは、スクリーンリーダーを使用するユーザーや視覚障害のあるユーザーにとっても、サイトの構造を理解しやすくします。

見出しのタグは <h1> <h2> <h3> <h4> <h5> <h6> です。
これは単にフォントを大きくしたり、太くしているだけではないんですよね。
スクリーンリーダーのお話もしましたが、機能として、それは見出しタグである必要があります。
例えば <section> タグなんかは、見出しタグとセットで使いますよね。
このサイトにもいずれ、順次導入していくことになるでしょう。

統一感を持たせた見出しを作るCSS


/* Heading settings ●start● */
h1.background-waveimage-heading {
    background-image: url('../image/hone.png'); /* 背景画像を設定 */
    background-size: contain; /* 画像サイズをコンテナに合わせる */
    background-repeat: no-repeat; /* 画像の繰り返しを無効にする */
    background-position: left; /* 画像を左側に配置 */
    padding: 20px; /* 内側の余白を設定 */
    font-size: 1.7em; /* フォントサイズを設定 */
}

h1.background-waveimage-heading span {
    opacity: 0.7; /* 透明度を設定 */
}

h2 {
    display: block; /* ブロック要素として表示 */
    width: fit-content; /* コンテンツに合わせた幅を設定 */
    background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0)); /* 背景にグラデーションを設定 */
    padding: 10px; /* 内側の余白を設定 */
    border-radius: 15px; /* 角を丸くする */
    margin-top: 30px; /* 上部の余白を設定 */
    margin-bottom: 5px; /* 下部の余白を設定 */
}

h2.sitemap_heading {
    display: block; /* ブロック要素として表示 */
    width: fit-content; /* コンテンツに合わせた幅を設定 */
    background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0)); /* 背景にグラデーションを設定 */
    padding: 10px; /* 内側の余白を設定 */
    border-radius: 15px; /* 角を丸くする */
    margin-top: 10px; /* 上部の余白を設定 */
    margin-bottom: 5px; /* 下部の余白を設定 */
}

h3 {
  display: block; /* ブロック要素として表示 */
  width: fit-content; /* コンテンツに合わせた幅を設定 */
  background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0)); /* 背景にグラデーションを設定 */
  padding: 10px; /* 内側の余白を設定 */
  border-radius: 15px; /* 角を丸くする */
  margin-top: 30px; /* 上部の余白を設定 */
  margin-bottom: 5px; /* 下部の余白を設定 */
  position: relative; /* 相対位置を設定 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ボックスシャドウを設定 */
}

h3::after {
  content: ''; /* 擬似要素の内容を空に設定 */
  position: absolute; /* 絶対位置を設定 */
  bottom: -5px; /* 下部からの位置を設定 */
  left: 0; /* 左からの位置を設定 */
  width: 100%; /* 幅を100%に設定 */
  height: 3px; /* 高さを3pxに設定 */
  background: linear-gradient(to right, rgba(255, 0, 51, 0.5), rgba(255, 255, 255, 0.5)); /* 背景にグラデーションを設定 */
  transform: scaleX(0); /* X軸方向のスケールを0に設定 */
  transform-origin: bottom right; /* 変形の基点を右下に設定 */
  transition: transform 0.5s ease-out; /* 変形のトランジションを設定 */
}

h3.visible::after {
  transform: scaleX(1); /* X軸方向のスケールを1に設定 */
  transform-origin: bottom left; /* 変形の基点を左下に設定 */
}

.STAh3 {
  margin-top: 0; /* 上部の余白を0に設定 */
}

h4 {
  display: block; /* ブロック要素として表示 */
  width: fit-content; /* コンテンツに合わせた幅を設定 */
  background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0)); /* 背景にグラデーションを設定 */
  padding: 10px; /* 内側の余白を設定 */
  border-radius: 15px; /* 角を丸くする */
  margin-top: 30px; /* 上部の余白を設定 */
  margin-bottom: 0; /* 下部の余白を0に設定 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ボックスシャドウを設定 */
}

h5 {
  font-size: 110%; /* フォントサイズを110%に設定 */
  margin-top: 25px; /* 上部の余白を設定 */
  margin-bottom: 0; /* 下部の余白を0に設定 */
  padding-bottom: 0; /* 下部のパディングを0に設定 */
  line-height: 1.2; /* 行の高さを設定 */
  color: rgba(0, 0, 0, 0.7); /* 文字色を設定 */
}
/* Heading settings ●end● */

HTMLを変えずデザインをカスタマイズするafter疑似要素

個人サイトでよく使うCSSにある、before疑似要素と似たような感じですよ。
CSSの ::after疑似要素は、指定した要素の直後にコンテンツを挿入するために使用されます。
beforeと同じく、HTMLを変更せずにスタイルを追加したい場合に便利です。

ただ、ここではアニメーションの一助をしているんですよね。
そのアニメーションをトリガーするためには、JavaScriptが必要です。
とりあえずここでは::after疑似要素の説明のみに留め、別途JavaScriptと併せてアニメーションの説明を書きましょう。

after疑似要素のCSS例


.element::after {
  content: "追加するテキスト";
  display: block; /* または inline, inline-block など */
  /* その他のスタイル */
}

主なプロパティ

content: 挿入するコンテンツを指定します。テキスト、画像、カウンターなどを挿入できます。
display: 挿入するコンテンツの表示方法を指定します。block、inline、inline-block などが使えます。
position: absolute や relative を使って、挿入するコンテンツの位置を調整できます。
その他のスタイル: 色、フォント、マージン、パディングなど、通常のCSSプロパティを適用できます。

うーん、抽象的な文章ばかりでは…
ちょっと、例を書いてみましょう！
次のコードは、特定の要素の後にアイコンを追加する例です。

アイコンを追加するhtmlとCSSの例


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>After Pseudo-element Example</title>
    <style>
        .icon::after {
            content: "🔍";
            display: inline;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <p class="icon">検索</p>
</body>
</html>

環境に合わせてお試しいただけると感覚として掴めるかも？
この例では、<p class="icon"> 要素の後に虫眼鏡アイコンが追加されています。

サイトマップ

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。