CSSからの個人サイトのレイアウト事情

CSSってなに?

“CSS(Cascading Style Sheets)とは、Webサイトのサイズや色、レイアウトなどを設定するためのプログラミング言語です。CSSは「シーエスエス」や「スタイルシート」などと呼ばれており、背景の色の変更や画像の設置、文字のフォントや色などの幅広いデザインを定義する際に使用されます。”

引用元: CSSとは?/U-CAN

個人サイトを25年(!!)ぐらい運用していて、HTML規格の進化に伴い勉強せざるを得なくなったCSS。…といっても最近は半分くらい楽しんでおりますが。

で、CSSといえばレスポンシブ。

“レスポンシブとは、PC、タブレット、スマートフォンなど、異なる画面サイズに合わせてWebサイトの表示を調整する手法です。主にレスポンシブWebデザインとして知られ、CSSやメディアクエリを活用して、画面幅に応じてレイアウトや要素の配置を柔軟に変化・対応させることで、ユーザーは異なるデバイスでも快適にWebサイトを閲覧することができます。”

引用元: レスポンシブとはどういう意味ですか?/CROSSWISH

10年くらい前に以前の就労継続でサイト作りの作業を担当していた時にレスポンシブを初めて扱うことになりましたが、最初はかなり苦労しました。スマートフォンでは反映されない!?とか。それでも、そのおかげで個人サイトも見事レスポンシブに移行することができたわけです。怪我の功名。

自分のサイト作成の「ヘキ」

個人用途・就労継続の作業共に含めると、数年程度ブランクがありつつも割と継続してサイト作成をしていることなるため、リファレンスさえあればある程度のサイトを作成できるくらいには成長いたしました。

ただ、自分自身の弱点としてイラスト以外のデザイン用画像の作成をあまりしないこと。長年の癖で軽量化を心がけていたらこうなってしまったわけで。未だに自作素材を作ったことがありません…。個人でやる分には画像は少な目にしたいですが、もし仕事にするとしたらそうはいかないわけで。
それと個人でやる分には正しい記法にこだわってないため、正しい記法についても学んだ方がいいかな…と時々思ったりします。(同系列の事業所に通所していた時に、動画で学習した内容はすっかり忘却の彼方…)

CSSやサイトデザインの思い出

CSSといえば、昔まだレスポンシブの仕様がない頃にCSSのデザインや記法が秀逸だったサイトを集めたリンク集が存在しましたが、そこで可愛い絵描きさんのサイトを知りました。その方の絵柄が好きになってしばらく追っていましたが、同人誌は成人向けだったため買えず、その手の創作を読める年齢OR嗜好になる頃にはその方はもうイラストを描かなくなり発信活動自体もSNSに移行していたという感じです(´・ω・`) おそらく、先ほどのサイト管理人さんがきっかけでCSS沼にハマったかと思われます。CSSだけで要素の角丸化ができなかった頃にブロック要素を画像とCSSで角丸にしていた方でした…すごかった。

ところで自分がまだレイアウト自体をCSSで組んでなかった頃(テーブルレイアウト時代)はどういうデザインをしていただろうか…とInternet Archiveにある大昔のサイトを見てみましたが(画像)、レイアウトより明らかな誤字の方が気になってたまりませんでした(あまりにもひどいためぼかしてます…)当時からろくな教養がないとはいえ、それはないだろうと。

閑話休題となりましたが、テーブルレイアウトの方が直感的であることは確かなんですよね。多分個人サイト全盛期にタグ打ちしていた方ならお分かりになるかと思われます(´・ω・`) 最近はおそらく一から打ち込むより、テンプレートを専用のサイトからお借りになることが多いですね。むしろノーコードツールを使う方が多いかも。
(※創作系のサイト特化だと「フォレストページ+」や「ナノ」が部分的に該当するかな)

CSSを取得しておく

ノーコードツールで思い出しましたが、CSS自体はノーコードツールやブログツールでも利用できる所が多いです。大体CSS専用の記入欄があるため、そこに記入してデザインを構築していく方が多いんじゃないかと思ってます。

GoogleChromeなどWebブラウザには「検証」という機能から、表示しているCSSの内容を疑似的・一時的に変えることができる機能があります。それを活用し、利用しているブログなどをカスタマイズすることもありかもしれないです。

  • 5
  • 0
  • 0

bio

普段は別名義の個人サイトで二次創作やっているような、いにしえのオタクです。ここは一次創作と雑記置き場です。

作者のページを見る

寄付について

「novalue」は、‟一人ひとりが自分らしく働ける社会”の実現を目指す、
就労継続支援B型事業所manabyCREATORSが運営するWebメディアです。

当メディアの運営は、活動に賛同してくださる寄付者様の協賛によって成り立っており、
広告記事の掲載先をお探しの企業様や寄付者様を随時、募集しております。

寄付についてのご案内