ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。
ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。
仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。
本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。
特に
- プログラミング経験はあるもののウェブフロントエンドの経験が浅い方
- 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方
にお勧めです。
プロローグ
CSSの書き方は一通りではありません。
好きな書き方を自由に選ぶことができます。
これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。
この場において最適な書き方がどれか、CSSを書く側に判断を委ねているのです。
つまり、深い洞察力と思考力を持った者が、さらに重厚な知識を備えなければ、ひどいものを大量生産できてしまいます。
ひどいものかどうかは、それを見ただけでは当人に判断できません。
どうしたらより良くなるのかも、もちろん簡単にはわかりません。
世界は自分の洞察力と思考力の範囲でしか知覚できないからです。
世界を広げるには、視野を広げることです。
新しい考え方や知識が、ものを見る目を養うのです。
しかし、CSSの仕様を記憶したところで世界は広がりません。
「CSSが何であるか」という知識は「CSSをどう使うか」には直結しないからです。
私自身も、私の能力の範囲内でしか世の中を見ることができないため、ひどいものを生産している可能性はあります。
しかし、自分が生産したものがひどいものであったことに気づくという経験を何十回も繰り返してきました。
まだまだ最高ではありませんが、その過程で得られたものにもそれなりに価値はあるはずです。
ここに書くことは必ずしも最高の方法ではないですし、半年後に私自身が否定するかもしれません。
「そういう考え方もあるかぁ でも実際どうなんだろう」と、思索の起点に使っていただけると幸いです。
優秀な誰かしらがそうやってご自身で進化するためのきっかけくらいにはなるのではと思い、ここにまとめます。
ここまで読んで「概念的な話ばっかりだな」と思った方も多いと思います。
でも、具体的なテクニックはすぐに陳腐化するし、状況によって最高にも最低にもなります。
そして具体的なテクニックばかり追い求めても、自ら世の中に新しい価値をつくりだすことはできません。
一方でひとたび概念的な本質が分かれば、具体的なテクニックなんていくらでもそこから導出・発明できるものです。
対象とする領域
さて、一口にCSSと言っても、実はその対象領域は大きく2つに分けることができます。
-
ウェブページ:
主に情報を伝えるための1枚のページで、いわゆるLP（ランディングページ）などが含まれます -
ウェブアプリケーション:
ウェブ技術を利用したアプリケーションで、管理画面やSNSなど、ユーザーの操作に応じて複雑な状態をあつかうものです
ウェブページの場合は、毎回つくり捨てることも可能です。保守や拡張の必要性がそこまで高くありません。
一方でウェブアプリケーションは、将来的な拡張まで視野に入れて作成する必要があり、高い頻度で改修できることが求められます。
このように、ウェブページとウェブアプリケーションでは、求められる要件が大きく異なります。
ゆえにどちらを対象にするのかによって、CSSの使いかたも大きく異なってくるのです。
どちらを対象にするのかを明言しないような記事や本は「CSSの使いかた」という点ではあまり参考にならないと考えて良いでしょう。
本記事ではウェブアプリケーションを主な対象とします。
対象とするブラウザー
世の中にはサポートが終わったIE10などを「のっぴきならない事情」で使い続ける企業がいます。
それが理由で古いブラウザーをサポートするウェブアプリケーションも存在するようです。
しかし、そういった企業向けのウェブアプリケーションは、先に述べた「ウェブアプリケーション」の定義とは性質が異なります。
文字を左寄せから中央寄せにするために改修費として数百万円もらえる世界であり、保守性があまり重要にならないからです。
もしも、お金も払わないうえに古いブラウザーのサポートを求めてこられることがあったら、全力で逃げましょう。
どうせそいつらは何かあったときに全責任をあなたに押し付けてきます。
ということで、この記事では現在サポートされている主要なブラウザーを対象とします。
現代的な使いかたの基礎
まずはCSSの使いかたに関する基礎の部分を述べます。
これらはウェブページにおいても共通する部分がほとんどです。
あくまでも基本なので、本記事を読み進めるとこの基本に従わないところが次々にでてきます。
「こんな当然のこと知っとるわい😠」という方はさくぅっと流し読みしてレスポンシブな表示を支える技術に進んでください。
さて、実はこの記事を書いているのはバーチャルヤギチューバーのさくらちゃんだよぉぉおおおお！
ぶめぇええええええ🐐
さくらちゃんはかしこいので、いきなり正体を明かすと「なんやこれ意味わからん」と離脱しちゃう人もいると思って、ホモ・サピエンスの知的レベルに合わせた書き出しにしたんだよぉ🐐
でもここからはところどころ本来のさくらちゃんが顔を出しちゃうよぉ🐐
いきなりの終焉
さて、世の中には自分では何一つ成し遂げられないのに、他者の足を引っ張るクソみてぇな害悪がたくさん存在します。職場からも家族からも疎んぜられて、居場所がなく、しかしそんな惨めな自分に向き合う勇気がなく、殴っても殴りかえしてこない相手を探している人たちです。
その対象は政治だったり、ワクチンだったり、SNSや恋愛リアリティショーですでに炎上している人たちにだったりします。そして注目を浴びている技術記事もその対象になります。
この記事には最初から最後まで徹頭徹尾「具体的なテクニックなんかよりももっと重要なものがある」っつってるのに、クソみたいに重箱の隅をつついて、あるいは全くの誤読をして思い込みで「こんな技術力がないバカの記事なんか読む必要ねぇよ」なんて誹謗中傷を繰り返すうんこクソ人間が涌きました。それらの悪臭は大多数の好意的な声をかき消すに十分でした。
特にはてなブックマークはコメントしたらしっぱなしで誰かからの反論がついて通知されるような仕組みもありません。殴られる覚悟もない限界ジジイのみなさんによるクソみてぇな誹謗中傷であふれています。
ということで、3万字以上の分量で2千5百いいね超えの非常に有用で学びも深く価値があるこの記事の公開もとりやめることにしました。これは元の記事の冒頭と最後だけをコピーして投稿し直したものです。
あ〜あ。お前のせいです。お前らは存在するだけで家族や職場に害悪を撒き散らしてるのに、さらにネットを通して技術の発展やたくさんの技術者の成長を阻害してしまいました。お前が生きてるだけでお前の周りは丸損です。お前ら少数の声がでかいバカのせいで、OSS精神によって発展を遂げてきたソフトウェア開発の世界はこれから衰退していきます。
ほら、さっそくこの再作成した記事にも、安全なところから他者を見下して自己肯定感を得ようとするはてなブックマークのウンコメントがつきました。
そういうとこだぞ。
自分はさも悟ったような顔をして「よくやるわ」ですって。残念ながらお前は賢いんじゃあなくて、日和見主義で波風立てずに何の挑戦もしない生きている意味がない人間だっていうだけです。何の信念も理念もなく目先の損得だけで流されるように生きていて、こんなやつはいなくなっても人類にとって何の損失にもなりません。それどころか情熱を持ってなにかに取り組もうとする人間の出鼻をくじき、人類の発展を阻害し、結果として人類を緩やかな衰退に導く魔の眷属です。
そこそこ好評価なのに消した理由もすでに書いてるだろ。まともに日本語も読めないくせにタメ口で偉そうに批判するこういうクズがたくさんいるのがはてなブックマークです。職場でも家族からもめっちゃ煙たがられてるぞ。自分の愚かさに気づけないほどに愚かな人間の失敗作どもがいつまでもすがりついているのがはてなブックマークです。
この記事はとても価値のあるものですから、読みたい方には有償で内容のバックアップをお配りします。「成長したいっす！」なんて口だけじゃなく、身銭を切る覚悟がある方はTwitter（現X)かなんかで連絡してお金を払ってください。
レスポンシブな表示を支える技術
状態に応じたスタイルを実現する技術
マルチブラウザー対応のための技術
アニメーションを実現する技術
開発者ツール
コードの変換処理
SCSS
垂直分割から水平分割の時代へ
今後のCSS
水平分割の時代が到来し、これまで培われたCSSに関するテクニックの多くが、古いものとなってしまいました。
その中で、インラインスタイルの見直しや、そこから派生したCSS in JS、Scoped CSS、CSS Modulesの登場など、混迷を極めています。
また、ElmのようにHTMLを関数として扱う言語によって、さらに新しい局面も見えてきました。
例えばelm-uiというライブラリは、HTMLとCSSの代替となる関数群を組み合わせることで画面を構築します。
さくらちゃん自身も、画面構築の新しい未来を切り開くために、elm-neat-layoutというライブラリを開発中です。
Elmにも興味がある方は、ぜひElmはどんな人にオススメできないかなどの記事もご覧ください。
むすび
ここで紹介した内容はとてもシンプルで素直で味気なく感じたかもしれません。
しかし、ごてごてしていて複雑でいかにもすごそうなものは、実際には大したことがないのです。
そういうごてごてしたものから何度もアクをとって透き通った染み渡るようなスープこそが、結局もっとも優れているのです。
この記事を読み終わった読者の皆さんは、現代のウェブアプリケーション開発におけるCSSの話題についていくための基礎的な知識が身についているはずです。
「必要になるまで学びすぎないこと」「具体的な手段ではなく、なぜそうなったのかを重視すること」などを忘れずに、
さらに知見を広げてご活躍いただければ幸いです。
ぶめぇ