ひとまず水面下での話ですが、ようやく1ページだけ形になりました。
実際に手をつけ始めてから、これだけで1ヶ月かかったかも。
（その前の3ヶ月はひたすら調べ物をするお勉強期間でした）
スマホ用サンプル画像
PC用サンプル画像
ここらで今回のサイト改装のコンセプト、とかこだわりのようなものを記録しておこうと思います。
自分のための覚書でもあり。
1．モバイルファーストのレスポンシブデザイン
モバイル（スマホ）用のデザインをまず決めて、そこにPC用のデザインを足すイメージで作ってます。
初めは今あるPC用デザインを元にスマホデザインを引き算していこうと思ったのですが、この先はスマホの時代ですしね。
長くなるのでたたみます。
2．ハンバーガーメニューとトップページへのリンクをつけたい
3．JavaScriptは使わずCSSだけで
4．今のサイトデザインをできるだけ踏襲
5．floatは使わずflexboxで
前回も書いたのですが、めちゃくちゃ好みなサイトテンプレートを見つけたので（
FOOL LOVERS様の
こちらのページのｎ-111というテンプレート）飛びつきました。
我がサイトのサイドメニューのあひるちゃん看板をレスポンシブでそのまま使える！と思って。
しかし、（JavaScriptが自分の手におえないので）CSSだけでやりたいのと、モバイルファーストでどうしても書きたいのと、flexboxを使いたいのとで、まるまるお借りするのは断念しました。
しかし多くの部分で参考にさせていただいております。
CSSだけでハンバーガーメニューを作るにあたり、参考にしたサイト様は
こちらと
こちら。
モバイルデザインではハンバーガーメニューにしてた部分を、PCデザインでは普通に画面内に表示させるようにするのがなかなか苦労したのですが、これをflexboxを使ってピタッと表示できた時の感動は忘れませんｗ
メニュー部分を（ソース内で）メインのテキスト部分より下に持っていくのもこだわりの1つでした。
上に置いた方がレイアウト的に楽ではあるんですが、やはりどうしても下に置きたかった。SEO的な面でも。
さて、まだまだこだわりがあります。
6．適切なタグを使いたい
そもそも、最近のHTML事情（？）を調べてた時、
こちらのページに感化されたのです。
この15個のタグをきちんと使いたくて。
article（＆section）、header＆footer、nav、main、aside…。
こんなタグができてたのかと。
今まで全部divで囲ってたけど、これら全部使ってやろうじゃないかと。
で、全部盛り込みましたｗ
7．リストマークが便利になっている
以前はアイコン画像をリストマークに使うことなんでできなかったんですよ。
なので、backgroundに画像を置いて、paddingとかで調整して置くしかなかったんですよ。
それが、今やlist-style-imageで画像のURLも使えるし、list-style-typeのcontentで記号を置くこともできるようになってるんですよ。
それ以外にも、::beforeっていう疑似要素で、どんなテキストの前にも画像を挿入することが可能になってるんですよ！！
これが今回調べてて一番感動した件でした…。
というわけで、今回もめちゃめちゃ使用しております。
あ、でも今回はアイコン画像は減らして、できるだけ記号を使ってます。
その方が自由に色も変えられるし、手軽だし。
今はテキストとして処理される絵文字とか記号がたくさんあるし、HTML内でそのまま使えるんですよ。しかもシンプルでかわいいやつが。
たとえばこんなの。❖✜▷ꕤ⧉⨳።⁘✣❑
これも以前にはなかったな。（たぶん）
※Unicodeが使えるようになってからの仕様のようです。
8．marginとpaddingをむやみに使わない
以前は、デザインを確認しながらあーでもないこーでもないと適当に余白をいじって、無理やり自分の好みの配置にしてたので、marginとpaddingがしっちゃかめっちゃかで把握できてない状態でした。
そこで、レイアウト系のCSSだけ1箇所にまとめて、全体で把握できるようにしました。
このあたりは
こちらのページに少し感化されました。
私は、レイアウト用のクラスは作らなかったけど、レイアウト用の設定とその他の設定とで2箇所に分けて置いた、という感じです。
9．画像の種類
イマドキはgifとかはあんまり使わないみたいなんですよね。
せいぜいpng、あとはSVGとかwebpとか、これまた聞き慣れないものが主流になりつつあるようです。
とりあえずサイトで使う画像はSVGに統一しました。
使うにあたってわりと調べたんですが、イマイチ使いこなせてる感はありません。
普通の画像の使い方で使ってます^^;
----------
このようなこだわりを1つ1つクリアしながら、なんとか1ページ作り上げました。
CSSはほぼ書き上がったと言えるので、あとはページを1つ1つ作っていくだけです。
うちのサイト、ざっと150ページくらいありますが……
VScodeのスニペットという技を覚えたので、これを使ってコーディングしていきますよ。
このブログの改装をしたときはわかってないことだらけだったので、もう1度ブログのCSSもちゃんと書き直したい気分…。
あと、WEBフォント（Googleフォントなど）についても結構調べてたんだけど、結局重くなるかな？と思って今回は導入しませんでした。
実際にサイトが完成して、スマホで閲覧したときの気分で導入するかもしれません。
（GoogleフォントのMaterial Symbolsは少し利用しています）
もう一つ、調べたけど導入しなかったのがBEM。
クラス名をつける時の法則みたいなもんです。
初めは規則通りにつけようとしたんですが、すんごく長ったらしくなるんですよ、クラス名。
逆に見づらい、みたいな。
なので、その精神だけお借りしてｗ結局自己流の短いクラス名になりました。
あと、できるだけすべてのタグにクラス名をつける、っていうのも意識しました。
でもそうするとだんだんクラス名が枯渇してくるんですよね…。
そのあたりもちょっぴり苦労しました。
そういえばあひるちゃん看板ですが、この素材をお借りした素材サイト様もついに閉鎖されてしまいました。
いくつかの素材サイト様からアイコンなどの画像を借りっぱなしですが、今やほとんどのサイトが無くなってしまっていて、リンクすることもできず。
今は素材サイトというと、シンボルマーク的なものを扱うのが主流って感じですね。昔みたいなかわいい花アイコンとかあんまり見かけなくてちょっと寂しい…。
| ▲
[1回]