CSS設計について

初心者向けのよい技術本やサイトは世にたくさんあり、だいたいはコピペでいいのですが、
ある程度できるようになると、応用が利くコードの書き方や効率やメンテナンスのしやすいコードの書き方にシフトするようになります。
HTMLのマークアップも大事になってくるので、HTMLタグに直接スタイルをかけてしまうのは後々破綻して追加のCSSが増えてメンテナンスが大変になってきます。
そこで、CSS設計が大事になってくるのです。

CSSの組み方は人それぞれなので、私の場合は再利用しやすいようCSSを組んでいます。
なので、いろんなコーダーさんの組み方があり、よくないと思うコーダーさんもいるかと思いますがこんな組み方もあるんだ…という参考にしてください(＝ﾟωﾟ)ﾉ

現場で使っているリストアイコン

htmlとcssだけでできるリストアイコンのデザインです。
基本htmlは<ul> <ol> <li>タグです。外部のWebアイコンを使えば早いのですが、今回は使わない方向でコーディングします。

実際に現場でよく使いそうなアイコンで画像を使わないので、カラー変更もできるよう、いろいろなパターンのアイコンを作ってみました。アイコンのサイズを変更する場合の位置調整については各々調整を行ってください。

現場では箇条書きというタグでも、時には長い文章になる事もあるので文字数の増減も考慮して表示位置を固定します。

まずはデモ↓　（HTMLを理解している運用者にもおすすめ）

See the Pen いろいろなアイコン by michiyo yamada (@yamada3) on CodePen.

基本のHTML（ulの場合：CSSリセット済み）

<ul class="list">
  <li>テキストが入りますテキストが入りますテキストが入ります。<br>改行しました。</li>
  <li>テキストが入ります。</li>
  <li>テキストが入ります。</li>
</ul>

まずはul にclass=”list”を付けると、その中のliに丸リスト（list-style-typeプロパティ）を付けます。

オリジナルアイコンを追加 

<ul class="list list-icon">
  <li>テキストが入りますテキストが入りますテキストが入ります。<br>改行しました。</li>
  <li>テキストが入ります。</li>
  <li>テキストが入ります。</li>
</ul>

「class=”list list-icon”」これだけだとアイコンはなし状態なので、<li>にclassを付けると、 list-style-typeプロパティ ではない、オリジナルアイコンが装飾されます。

<ul class="list list-icon">
  <li class="item-square">四角アイコン</li>
  <li class="item-rhombus">ひし形アイコン</li>
  <li class="item-circle">丸アイコン</li>
</ul>

※CSSはデモを参考にしてください。

チェックリストの場合

<ul class="list list-check">
		<li>こちらはulにclass="list list-check"つけてliには何もつけない組み方</li>
		<li>チェックリストチェックリストチェックリストチェックリスト</li>
		<li>チェックリストチェックリストチェックリストチェックリスト</li>
	</ul>

※CSSはデモを参考にしてください。

こちらはulにclass=”list list-check”つけてliには何もつけない組み方になります。 class=”list list-check” で囲まれたli全てにチェックアイコンが付きます。
なぜこの組み方をするのか。
ブログを更新する人が記事など投稿する際、ulタグにスタイルをあてるだけでよく、liにいちいちclassを付けるのは面倒だし、li全部が同じアイコンでいい場合にはこの方が更新する人には書きやすいからです。

こんな感じで、更新する人のスキルがどのくらいなのかも考慮すると組み方もそれに合わせて変えていきます。

というわけで、自由自在にデザインができるようになるちょっとしたヒントになりましたか？
次は矢印アイコンを作りたいと思います。

CSS設計のおすすめ技術本

関連記事