自分のサイトを作る Part2

サイトの見栄えについて考える

ページを 2 つ 3 つ作成してみて，とりあえずの形式が見えてきた．
多分，自分のサイトのコンテンツは以下の要素だけで構成できる．

タイトルといくらかの見出し
見出しの中のいくらかの段落
コードブロック
画像

サイトの見栄えを良くしたいと思ってもどこから手を付けていいのかわからない状況だったが，第一歩としてはこれらの要素の並べ方を考えるのが良さそうだ．
各要素の表示方法に統一感を出せば，勝手にサイト全体にも統一感が出るはず．
（しかも，上に挙げた程度の要素しか使わないなら，マークダウン形式の見栄えのいい表示スタイルを探せばいい気がする）

というわけで今度は CSS の出番になる．自分のサイトを作るからのおさらいより．


大雑把に言えば，
- HTML：コンテンツの中身
- CSS：コンテンツの飾りつけ
をそれぞれ担当する言語のようだ．

前回同様，こちらの教科書を使って勉強していく．

CSS を書く

CSS の基本となる記法は以下のようなもの．


セレクタ { プロパティ : 値;}

セレクタは CSS のスタイルを適用する対象の指定で，上記はそのセレクタで選んだ対象の特定のプロパティ値を指定する記述だ．
例えば，


p { color : #FF0000; }

とすれば，p（段落）要素の color（文字色）を赤色に設定できる．

最初に挙げた，サイトのページを構成する各要素について， CSS で表示方法を記述していけばよさそうだ．
「マークダウン CSS」などでググってサンプルなどを覗き，ひとまず以下のような形に落ち着いた．


html body {
    font-family:'メイリオ', 'Meiryo', sans-serif;
    background-color: #F5EEDD;
    color: #000000;
    padding : 2.5%
}

h1 {
    text-align: center;
}

h1, h2, h3, h4 {
    text-decoration: underline;
    color: #077A7D;
}

本当に最低限の記述しかしていないと思う．
デフォルトで見出しの文字の大きさ設定はある程度やってくれるので，それはそのままにフォントと配色だけをいじったような形だ．
あとちょっと見出しに underline の強調を追加している．これだけでだいぶ見栄えが良くなった．
配色はこのサイトを使って決めた．

コードブロックはちょっと試行錯誤してみたが難しかった．
書き方に工夫が必要そうだが，教科書には載っていなさそう．
結局，stackoverflow で相談しているこの方のサンプルがうまく動いたので，細かい設定をしていそうな個所は削除してそのまま使わせてもらった．


pre {
    background-color: #D1D1D0;
    font-family: 'Monaco', monospace;
    padding: 0.1em;
}

code {
    font-family: 'Monaco', monospace;
    line-height: 100%;
    background-color: #D1D1D0;
    padding: 0.2em;
    letter-spacing: -0.05em;
}

pre code {
    border: none;
    background: none;
    line-height: 1em;
}

CSS を適用する

というわけで，現在（2025/05/25）のサイトの見え方は上記を適用した形になっている．

背景色・文字色・フォントを変えたくらいのものだが，それだけでも結構印象が変わるものだ．
凝り始めたらどこまでも終わらないような気もする．

現状はこれでだいぶ満足だが，HTML も CSS も，実際はもっと応用の効く言語なんだろうなと思う．
基本の記述だけで自分のサイトは出来上がってしまったが．

HTML/CSS の勉強自体はもう少し続けていきたい．
サイトの出来にだいぶ満足と書いたが，一方でよりよくすることもいくらでもできそうな気がする．
こっそり色々アップデートしていくかも．

2025/05/25

戻る