WEBデザインテクニック|KLUTCHE

【CSS】hrをCSSでオシャレにスタイリングする方法

仕切り線を入れたいけど無粋な線は嫌なものです。
CSSでちょこっと飾り付けをしてデザインのアクセントを付けてみます。
hr要素はセマンティックなサイト構築の観点からも有用ですので、オシャレさせて送り込んであげましょう。

続きを読む

【CSS】大きさの指定が無い要素を真ん中に配置する

よくテーブルを使用してなんとなくできた気になりますが、レイアウトの為にテーブルを使っているようではセマンティッカーの名折れ。
CSSを利用して天地真ん中に配置するテクニックです。
続きを読む

【CSS】このページ・・・なんだか奥行きがあるぞ!と思わせるbox-shadow

CSS3のbox-shadowを利用してサイト上部に影を作り、ブラウザのUIよりページが奥にあるかのように見せるテクニックです。
続きを読む

【CSS】やだ・・・オシャレ・・・と思わせるbox-shadow

css3 の box-shadow と transform を使ってボックス要素に立体的なエフェクトを加えるテクニックです。

続きを読む

【CSS】エリアに入りきれないテキストを「・・・」で省略する方法

新着投稿などの本文の文頭のみを表示して続きを「・・・」で省略したい時、CSS3 の text-overflow を使うと簡単に表現できます。

続きを読む