WEB掻っ穿じり

WEBデベロッパー備忘録とチャリ


css

紙媒体ライクなテキストコンテンツのレイアウト実装をスタイルで実装してみる

Webブラウザ上のテキストコンテンツのレイアウトでは、横書きや四角いブロック要素で考えることが長い間一般的とされていると思います。
そこで紙媒体のようなテキスト要素のレイアウトを、現段階で実装可能な機能を紹介します。
ブラウザによって制限がある機能を幾つか取り上げますが、環境によっては現実...


カラムレイアウト(段組み)で便利なスタイル

BootstrapFoundation等のCSSフレームワークでスタイルまかせてWeb開発するのは確かに楽なんですが、オリジナルスタイルを作成する場合、今時はデバイスごとの横幅に関しては(決まりごともありますが)ちょっと意識して考えないといけない事柄だと思います。

スクリーンがいくらワ...


ちょっと使えるテキスト装飾 css小技

テキストコンテンツで、覚えておくと便利なスタイルを集めました、覚書。 掲載時から対応ブラウザに変更がある可能性があるので、使用時には随時確認が必要。

オーバーフロー制限

長いタイトルを一行に収めたい時など、自動で省略(…)をつける。

コンテナ要素からはみ出たコンテンツをtext-overflow...


使えるcss、sass、jQueryのセレクタ、おさらい・覚え書き

css、sass、jQueryのセレクタ、基礎の覚書。

CSSセレクタ

子要素だけに適用
          div > a { color:green; }
            
隣接している要素だけに適用
          div + a...

Firefoxだけtable内の画像スタイル max-widthが効かない現象

RWDサイト制作で、意外にもFirefoxだけスタイルが効かない現象の対策です。

tableタグ内のセル、tdタグを親要素とした画像(imgタグ)のリキッドデザイン、レスポンシブデザインで欠かせないスタイル要素、[max-width:100%]がFirefoxだけ無視されます。

そこで...