webサイト作成記 No. 1
初版：2025-10-13
はじめに
この「ふぇなれんの掘っ建て小屋」はweb作成素人であるふぇなれんが「とほほのＷＷＷ入門」などなどを参考にしてサクラエディタで打って作っています。
「webサイト作成記」はその中での覚え書き、備忘録のようなものになっていく予定です。
初回の今回は、作るにあたっての基本方針や裏設定への変更、小話を綴っていこうと思います。
基本方針
-
構造が分かりやすい可読性の高いソースコードを打つ
保守管理がし易いのは勿論のこと、見ていて心躍りますからね！
と言っても、完全にタグごとに改行していないのはご愛嬌ということで（間延びして行数が大変なことになり、かえって分かりにくくなる）。
-
軽量なwebサイトにする
軽いとすぐ開けて快適ですし、データ通信量の削減にもなります。
ただ、あんまりシンプルにすると物足りないので装飾は少々施しています。最軽量は断念します！
-
HTML/CSSのみを使う
JavaScriptやPHPを使っていくとどんどん記述量が増えてふぇなれん自身が管理しきれなくなりそうで……
使ったら動的になって見栄えや一部の使い勝手が良くはなるのでしょうが、「シンプルに・軽く」が目標なので導入は考えていません（個人的にとある言語の書き方がしっくりこないっていうのは内緒）。
-
WordPressといった作成ソフトを用いない
ただの趣味です。趣味でプログラミングをするくらいなので、元来一から打って作るのは苦というより楽しいんです！
付け加えるとすれば、WordPress等を用いて作ると余分な記述が大量にあったり構造が汚くなったりしてしまうので、これを避ける狙いがあります。
WordPressなしだとレンタルサーバーをより安く借りられる（ふぇなれんが契約しているさくらのレンタルサーバのライトなら月額121円から）ので一石二鳥、三鳥です。
裏設定への変更
パソコンだけなのですが、ちょっとCSSの設定をイジることが出来まして（知っていたらごめんなさい）。それで事前に用意した設定、「裏設定」に自由に変えてもらおうという魂胆です。大丈夫！難しくないです！
ブラウザの「開発者ツールで調査する」「検証」を使います。やるのはこれだけ！挟んでいる /* と */ のペアを消すだけ！全部で５ステップだけ！
ブログの「note」に出来るだけ寄せた配色とフォントに変更出来ます。
手順
- webページのどこでも良いので右クリック
- 多分一番下に「開発者ツールで調査する」か「検証」が出てくるのでこれを左クリック
- 左側の領域の上部にある ▶<head> の ▶ を左クリック
- 展開されて出てきた ▶<style> の ▶ を左クリック
-
下のように展開されるはずなのでダブルクリックするなりして編集可能にし、/* と */ のペアを消してEnterを押す
/* note風の配色 */
/*←これと
html {background-color: #fff;}
body {
background-color: #fff;
color: #08131a;
}
*/←これを消すとnote風の配色になります
/* note風のフォント */
/*←これと
body {font-family: "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, Meiryo, sans-serif;}
*/←これを消すとnote風のフォントになります
小話
「ふぇなれんの掘っ建て小屋」はライトモードとダークモードの２種類を基本として実装しています。ライトモードの配色はふぇなれんの地元である瀬戸内海の海の色を基に設定しているので、こだわった部分ではあるのです。
しかし如何せん、背景と文字のコントラスト比が下がって視認性が低下してしまって（一応コントラスト比は最低目安の4.5以上となるように設定しています）。
ボタンでnote風の配色と切り替えるのは実装に骨が折れ、今は妥協して切り替え機能は実装していません（JavaScriptを使わないと簡単には出来なさそう）。
また、フォントについても気に入っているのを色々使おうと思っていたのですが、標準搭載されていないのが多くて……
Google Fontsからwebフォントを引っ張ってきて表示させるという方法もあるのですが、ダウンロードをその都度せねばならないがためにデータ通信量がかさみ、表示速度が遅くなるという欠点は上の基本方針には相容れないな、と（最近はよく使われているそうですが）。
フォントは渋々、恐らくどの機器にも搭載されているであろう無難なものに設定しました。可読性の向上のために和文フォントの第一は「BIZ UD明朝」としています。
CSSのソースコード部分には「MyricaM M」というインストールしないと使えないものを敢えて第一に設定しています。これは視認性が良くて特に気に入っているものなので、ぜひインストールして表示してもらいたいです！
言い訳が混じっちゃいました……