CSSに関する記事

サムネイルなどで使える丸い画像をわざわざ作成する手間を省く便利なコードを紹介します。 画像や要素を丸く表示させる border-radiusに100%で要素を丸く表示することができます。 それより小さい値を入...

以下の擬似クラスを利用するとテキストの一部にスタイルを適用させることができます。 今回は最初の文字、最初の行だけに適用する方法を紹介します。 :first-letter１文字目にだけスタイルを適用 :first-lin...

前回「最初の要素、最後の要素だけにスタイルを適用したい！」でご紹介した擬似クラスには 特定セレクタのn番目や、偶数番目、奇数番目を指定するようなものもあります。 :nth-child(引数)n番目の要素が指定セレクタならスタイルを適...

CSSには「擬似クラス」というセレクタがあり、これを使うことで 特定の条件の要素だけを指定してスタイルを適用させることができます。 この擬似クラスは、.class_nameや#class_idやpのように 普段使うセレクタの後ろにくっつ...

画像を使うとなると、要素の大きさにより一つ一つ作り直す必要がありますが CSSでエフェクトをつけることで面倒な画像作成の手間がなくなります。 今回は紙がめくれたようなエフェクトを画像を使わずにつける方法を紹介します。 HTML ...

グラデーション効果を出して少し凝ったロゴやテキストにしたいとき、 いちいち画像化させるのが面倒な方はこの方法がおすすめです。 HTML CSS 参考：http://webdesignerwall.com/tutorials/c...

小さめなボックスに長文のテキストやURLを入れると、折り返しされず ボックスからはみ出てしまうことがあります。 この対策にはwhite-spaceが使えます。 HTML CSS 長文のテストです長文のテストです長...

テキストリンクにカーソルを合わせると、色を変化させる効果を使ったページは よく見かけますが、これをCSSだけで色をやわらかく変化させる方法を紹介します。 文字の色をゆっくり変化させる HTML CSS ゆっくり変化するテスト...

画像を使わずちょっとおしゃれなエフェクトをつけてみようの会です。 今回は貼りつけた付箋紙のような効果をつける方法を紹介します。 box-shadowで影をつけ、transformでその影の角度を変えてみましょう。 box-shado...

角丸はborder-radiusプロパティを使うことで表現することができますが、 ブラウザ毎に指定の方法が違います。 そしてIEではそのままでは角丸が使えなかったりします。。 今回はFirefox、Safari、Chrome、IEで使...