「なんか、ホームページのデザインが思ったようにならない…」
「もっと見た目を整えたい…」
「カスタマイズの方法が、良く分からない…」
ブログやホームページの「中身」は重要です。
しかし、「見た目」も同じくらい大切だと考えています。
パッと見て、古めかしいデザインだったり、ごちゃごちゃしている印象を受けると、
「中身までたどり着けない」こともあるからです。
※AIも過度に入り込み過ぎないように、自分なりの柵を作りましょう
そもそも、CSSとは何か？
CSSとは、「Webページの見た目を整えるプログラミング言語」です。
※正式名称は「Cascading Style Sheets」
言葉自体を深く理解しなくても大丈夫ですが、
- HTML ⇒ 建物の骨組み・間取り
- CSS ⇒ 内装・外装・インテリア
みたいなイメージだけ持っておくと良いかなと。
同じ間取りでも、
- シンプルな家
- 高級感のある家
- ごちゃっとした家
になるかはCSS次第です。
一方で、
- HTML（内容）が悪いのに、
- CSS（見た目）だけで整えようとする
と本末転倒です。
見た目は内容があってこそ活きてきます、
そのため、内容は、自分自身で考え、他との違いを出していきましょう。
この違いが「個性＝強み」になっていきます。
内容と見た目、どちらもAIに頼ると、自分自身の個性がなくなりがちです。
AIは多数派の意見を集約して出してくるようなものだからです。
いずれも、まずは自分自身で方向性は考えましょう。
「AIは内容や見た目を整えるために並走してもらう」くらいの感覚がちょうど良いと思うのです。
具体的な記載方法
具体的な方法を、
①記載場所
②使い時
③コードの作り方
に分けて解説します。
①CSSを記載する場所
WordPressの場合、
ダッシュボード⇒外観⇒カスタマイズ
を選びます。
カスタマイザーの画面が出てきたら、「追加CSS」を押すと、コードの記載画面が出てきます。
ここにコードを書いていきます。
②CSSの使い時
私がCSSの使い時と考えるのは、
Webページに違和感が湧いたとき
です。
無心でページ眺めている時が多いですが、ふと
- ここが分かりづらいな…
- つながりが悪い…
- 見づらい…
と感じた時に、思ったことをメモします。
そして、後日CSSを編集して見た目を整えています。
③CSSのコードの作り方
まず、「自分自身で修正後イメージを持つ」ということが大切です。
AIに聞けば、それっぽい回答をいくらでも出してくれますので、自分自身でイメージを固めておかないと鵜吞みにしてしまうことがあるからです。
自分でイメージを持つからこそ、AIを使ったときに違和感を感じることができますので、ここは注意したい点です。
そのうえで、AIにCSSの作成を依頼していきます。
必ず行うのは、複数のAIに聞いてみるということ。
AIは適当にコードを示してくることがあるので、セカンドオピニオン的に使っています。
使用しているAIは、
- GenSpark
- Chat GPT
- Gemini
- Claude
あたりを使っています。
コードの管理方法を含め、以前YouTubeでも話をしていますので、もしよろしければ。
CSSを活用したい理由
冒頭に書いたとおり、CSSを使えば思った以上にできることは多いです。
慣れてくると、CSSなしではWebページの運営はできないかもしれません。
たとえば、このブログのCSSをすべて消すとこんな感じです。
（一例ですが）
細かいところまで設定しているな…と感じるかもしれませんが、
魂は細部に宿る
と考え、コツコツと更新していきましょう。
では、また次回。
編集後記
◇日記
昨日は早朝にブログ執筆、YouTube収録を。
個別コンサルティングも。
日中はオフ。家族で買い物や公園に。
子どもの体調が若干悪そうでしたので、悪化しないことを祈っています。
◇ブログネタ経緯
CSS書いている時のメモやYouTubeと関連付けたいと思い。
◇1日1新
Geminiで音声抽出アプリづくり
