カスケーディング・スタイル・シートです
INDEX
省略して表記されるWeb用語は多いですよね。
CSSもそのそのひとつですが最初なので書いておきますね。
このサイトでもCSSは今後はこのままCSSと表記したいと思います。
CSS 【Cascading Style Sheets】 カスケーディング・スタイル・シート
CSSで何が出来るのでしょう？ ブラウザで見えるWebサイトのデザインをこのCSSが担って素敵に見せてくれるんですね。
HTML内に直接書き加えることも可能です。ただ、W3Cと略されるWWWコンソーシアムでは別のシートに書いてリンクさせることを推奨していますね。
是非、今から覚えるならしっかり推奨のスタイルで思えていきましょう。
HTMLもCSSもプログラム言語ではありません
プログラム言語は人がコンピュータに計算処理させるための言語です。でも、HTMLもCSSもブラウザに反映させるためのメタ言語で、コンピュータに処理させるものではないんです。
SGMLというマークアップ言語から派生したもの。
マークアップというのは
<h1>見出し</h1>
このように山括弧で要素を囲む書き方。他にXMLなどにも使われていますね。
WordPressもDrupalもPHPというサーバーサイド・スクリプト（サーバー上で稼働する言語）で構成されています。ブラウザ上に表示されるときはHTMLで出力されるように仕組まれているんです。だからHTMLと同じようにCSSでデザイン的なカスタマイズが可能ですよ。
もちろん利用しているテーマでも準備されているCSSがあります。また意識してないでしょうけど、利用しているブラウザでも基本的なCSSを設定しています。
これを独自に優先的に表示させる方法を覚ていくと面白いですよ。自分の思う通りに細かく隅々までカスタマイズしていくことが可能になります。
サーバーへのアップロードも必要ありません
HTMLもCSSも先に話したとおりブラウザで反映させるための言語です。サーバーにアップロードする必要はありません。JavaScriptと同様にクライアント（自分のパソコン）上で変更を確認していくことが可能です。
WordPressやDrupalなどのPHPのサイトの場合はどうしたら良いのか？
これはSSHでサーバーと接続しながらCSSを編集していけばOKなんです。
Webサイト全体をひとつのCSSファイルで操作することも出来ます。また、分割しで管理しやすくしたりと慣れてくるとCSSの構成を考えることも出来るようになるでしょう。
そういう場合には『Sass』や『LESS』を使うととても便利なんですよ。このあたりは中級になるかもしれませんが、覚えておいてくださいね。
SassとLESSはCSSのプリプロセッサ
- Sass
- SASS
- SCSS
- LESS
SassにはSASSとSCSSという2種類の書き方があります。SCSSのほうがCSSと構造が似てるのでここから入るのもいいかも。どちらにしても引数などが使えるので大規模なCSSには向いてます。
コンパイルしてブラウザにはCSSとして読み込ませる必要がありますが、テキストエディターでプラグインを追加するだけで出来ますから難しくないので大丈夫。
拘って細かくデザインは自分の好みにさせたいもの。
どんどん慣れていったら便利に使いこなすために使ってみるのもいいでしょう。
ここ『百聞』でもそのあたりのご紹介もしていきたいです。
でも、まだ最初の頃はCSSで楽しんでください。
出来ることが本当にたくさんありますからね。
CSSの編集に必要なもの
テキストエディター → VS Codeを推奨
ブラウザ → Chromeを推奨
テキストエディターはVS Code
2022年の現在ではもうこのVS Codeがイチオシです。
テキストエディターの話はMOMOも何度かつぶやきで話していますね。ほぼパソコンを稼働させている間一緒に過ごしているアプリ。
オープンソースのテキストエディタは他にもたくさんあります。だけど、プラグインなどの活発な開発はVS Codeの右に出るものはありません。
使い始めるなら断然これ！
熱くオススメしますよ！
インストール方法など別途記事に書いてます。そのほか便利なプラグインなどについても今後もご紹介していきますね。どうぞCSSに興味を持った方、是非使ってみてください。
Microsoft社が開発しているオープンソースなので無償でどなたでもご利用になれます。
ウラウザはGoogle Chrome
もちろん普段から使っているブラウザでCSSやHTMLをカスタマイズすれば良いんです。
ただ、世界的なブラウザのシェアを見ていくと圧倒的にGoogle Chromeだと解りますね。かってはブラウザによってCSSの反映が微妙に違ってました。その一番の問題児がMicrosoft社のインターネットエクスプローラーだったんです。
いよいよ6月16日にMicrosoft社はこのサポートを終わらせます。以降は順次マクロソフトEdgeが代わりに立ち上がることになるとか。
このEdgeになってようやく『DevTools』というChromeの『デベロッパーツール』と同じような便利なツールも搭載されました。もしかするとVS Codeと連携させて人気を回復してくるかもしれませんね。でも まぁ、当面はChromeで間違いは無いでしょう。
世界デスクトップでのブラウザのシェア
Source: StatCounter Global Stats – Browser Market Share
これに比べて日本はどうかというと…
日本国内デスクトップでのブラウザのシェア
Source: StatCounter Global Stats – Browser Market Share
まだまだMicrosoft社が頑張ってます。
おそらく、Windows PCを購入したまま標準で搭載されたEdgeのままなんですね。わざわざChromeをインストールするという手間をかけていないのかもしれません。
ただ、CSSでカスタマイズするときにChromeに搭載されている『デベロッパーツール』で確認しながら作業するのが大変便利なんです。
そして、シェアの広いぶん見え方の共有もできているので安心もありますね。
なので、この際CSSを学ぼうと思ってるならばChromeもインストールすることを強くオススメします！
モバイルブラウザのシェアも確認しておきましょう
ネットの記事が読まれる割合は今ではモバイルからが圧倒的。
デザインをカスタマイズするときにはこのモバイルでの見え方もしっかり確認していきましょう。
もちろんカスタマイズの作成はデスクトップのChromeでOKです。
シェア率を知って確認をする参考にしてください。
世界のモバイルでのブラウザのシェア
Source: StatCounter Global Stats – Browser Market Share
日本のモバイルでのブラウザのシェア
Source: StatCounter Global Stats – Browser Market Share
日本はiPhoneシェア率からそのままSafariが多いようです。
ちなみに私は自身のiPhoneもiPadもChromeで1つの設定を同期して使っています。
パスワードやお気に入りの管理など一元的にやれるのでとても便利ですよ。
いかがでしたか？ 準備が整ったら、次はいよいよデザインのカスタマイズを始めてみましょうか。
