Webコーディングで悩むこと。

この記事を書いた人:

自己紹介

はじめまして、くじらで働いていますトラカッパです。
基本無趣味なのですが、Webコーディングは趣味?として、それなりに長い間勉強しています。

一応、下記が私のポートフォリオです。
http://sawakei.sakura.ne.jp/portfolio/
コーディングをしていますと、いろいろ悩んだり、思う事があるのですが、最近よく感じている事について書かせていただきます。

CSS難しい…

CSSはWebサイトの見た目を制御する「スタイルシート言語」と呼ばれるものです。このCSS、多くの人が習得できるように、敷居を下げて設計されたという話を聞いた事があります。

確かに、文字の色を変えるだけなら、1行コードを書くだけです。

<!--html-->
<p>このテキストを赤くする</p>

/* css */
p{
  color:red;
}

ところが、CSSをたくさん書いていくと、ここのテキスト赤くしたいのに、変わらない…どうしてなんだとっていう事に出くわします。

<!-- html -->
<div class="wrap">
  <p class="color-text">このテキストを赤くする</p>
</div>

/* css */
p{
  color:red;
}

上記の例はわかりづらいのですが、CSSが簡単かつ難しいのは「詳細度」の概念だと思います。

詳細度とは

詳細度(MDN)のページですが、うーん俺にとって説明が難しいです。
点数として考えて、点数が多いものが適用されると考えてみます(点数で考えるのは厳密には間違い)

idは一つ使うと100点、classは10点、pなどのタグは1点と計算してみます。
#wrap p 100+1 = 101点 → 点数が多いのでこちらが適用
.color-text 10 = 10点
(ただし、classを11個つなげれば110点になるからid一つの100点より高くなるので適用されるという考えは間違い)

CSSの難しさに対抗するためには

CSSはこの詳細度の概念や、適用される範囲(スコープ)がグローバルな所が、ある意味敷居を低くし、反面難易度をあげていると思います。

そういった難しさに対して「CSS設計」という考え方をで対処します。
(「BEM」「FLOCSS]「PRECSS」など)

と言ってもいきなりこの考え方は敷居が高いかもしれません。

classにスタイルを指定する事を意識すれば、かなりCSSは扱いやすくなるのかなと思っています。

ちなみに私はいまだにCSSが良くわかりません…

この記事のタグ :
torakappa

torakappaが投稿する記事の一覧です。

お問い合わせ

☎︎03-6274-8977

受付時間 9:00~18:00 (土日祝祭日は除く)

よくあるご質問

ご用件(必須)
施設見学業務依頼のご相談ご質問その他
お名前(必須)
お名前(ふりがな)(必須)
メールアドレス(必須)
メッセージ本文
プライバシーポリシー(必須)
プライバシーポリシーについて

*広告・その他一方的な関係のないメールにつきましては、そのまま消費者センターへ通知させていただきます。