用途 divとかのボックスに半透明の背景画像を付けたい。 ただし中の要素まで半透明にされると困る。 レスポンシブ対応で、ボックスの縦横比が変わっても背景画像はボックス全体をカバーするように。 課題 背景画像を設定し、普通にopacityをかけると中の要素…

floatやclearプロパティ周りの話題が出るたびに、「flex使えばオッケーじゃん」というような声が散見されるので、「それは違う！」と強く訴えたい、というお話です。 そもそもflexはfloatの代替品ではない floatプロパティは、それを設定した要素を文字通り"…

以前komitsuboshi-cssというCSSフレームワークを作ったのですが、 コーディングで楽したい一心で機能付けすぎた 使ってみると付けた機能が地味に使いにくかった 結局グリッドシステムの方を中心に使っていた WordPress対応にしたのはいいが、ランディングペ…

タイルレイアウトをfloatで実現するにはタイルの高さをそろえるためにheightを固定するとかしなきゃいけない。 WordPressみたいに記事からタイトルとサムネイルを取り出して並べる場合はタイルの中身がはみ出すというトラブルによく遭遇する。何でそんな縦に…

プロが実践するモダン CSS の書き方入門テクニック20選まとめ - PhotoshopVIP 1. 縦方向のマージン幅 他のプロパティとは異なり、縦方向のマージン幅はうまく効きません。 「うまく効かない」ではなく「相殺される」「重複する」と訳すべきでしょうね。 横方…

ここ数日なんか流行っているので悪乗りしてしまおうという魂胆。 http://cpg.hatenablog.com/entry/2016/06/30/193755 http://d.hatena.ne.jp/shi3z/20160701/1467330446 主要でもないプログラミング言語200種を一行で解説 - Qiita http://daruyanagi.jp/ent…

BEMの利点と落とし穴 BEMは使用箇所が明確で、何に使っているのかがすぐ分かって、関連するほかのクラスもすぐに見つけられて、そのため保守性が高い。 見た目は確かに醜いけれど、それ以上に利点が大きい。使わない手はない。 とはいえ、それなりに経験を積…

これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス 上のリンク先で言われていることは大体みんなやってきたことなんじゃないかと思います。一人でやる案件なら別に意識するまでもなくやれるでしょうが、複数名でやると簡単…

概要 BootstrapやFoundationを参考にしながら（パクりながら、ともいう）CSSフレームワークを作りました。 詳細はKomitsuboshi-cssにまとめています。GitHubでも公開中。 ある程度デバッグもできたので公開しましたが、利用する際はベータ版くらいの感覚で使…

レスポンシブデザインの設計では、画像の元サイズより画面幅が大きいときは元サイズで、画像の元サイズより画面幅が小さい場合は画面幅まで縮小して表示する、という動作にすることがよくあります。CSSで書くとこんな風に。 img { width: auto; max-width: 1…

参照元（[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス） リンクなどを画像に置換する場合、普通は <p><a><img src="画像ファイル" alt"画像文章" /></a></p> で片が付くわけですが、WordPressなどで既存テーマをカスタマイズして使っている場合、どうしてもリンクが文字列で、画像…