HTML/CSSの話いろいろ

HTMLやCSSなどWebデザインやマークアップのTipsいろいろです。

2015/12/15

【レスポンシブ対応】CSSだけでDIVの上下を入れ替える

上下に並んだボックス要素の順番を入れ替えるCSSです。レスポンシブにも対応しているので、デバイスごとにコンテンツの優先順位を変えたいときにも有効です。

2015/10/05

指定領域に収めたいテキストを適当な長さに切って表示するCSSです。text-overflow: ellipsis; の仕様と使用例。1行または複数行にわたる場合で書式が変わります。長い英単語（URLなど）の折り返しにもどうぞ。

2015/09/03

定義リスト DL DT DD をCSSで装飾するサンプル例の紹介。レスポンシブでも崩れない指定を目指しました。基本属性を活かして無駄な指定をしないのがポイント。

2015/08/19

CSSの遅延読み込みをjQueryで実装する方法。レンダリングブロックを起こすWebフォントなどを非同期で読み込めます。下地に使うrel=prefetch属性とrel=subresource属性の違いについても書きました。

2015/08/14

SVGファイルをHTMLに埋め込むときにつまずきがちな塗りの色指定についての解説。ベクターフォーマットの特性上、従来のcolor属性による指定では正しくマッチングしないのが原因です。

2014/07/10

画像を使わずにCSSだけで作るフォルダ風の装飾です。幅が可変なのでレスポンシブでも使えます。

2014/07/09

UL, OL, DLを使い分けるときのポイントと、CSSで装飾するときのコツについてまとめました。WordPressでリスト出力をDL対応するときはフィルタで変換します。

2014/04/15

W3Cのドラフトによると、HTMLに直接指定するインラインCSSで疑似要素が使えるんだそうです。ちょっとびっくりしたので一連の流れを調べて簡単にまとめてみました。