Category : HTML&CSS

【CSS】今さらだけどcssのセレクタの親子関係の確認まとめ

今さらだけど、CSS3で追加されたセレクタも合わせてCSSのセレクタの親子関係をまとめてみようと思います。 ここでは、便宜上、クラス名を親、子、孫といった...

【CSS】正方形の画像を円形にトリミングする

最近、googleのマテリアルデザインのおかげで何かと目にするになった円形トリミングを画像に適用するということについてです。以前、トリミングの話を書いたときは、...

【CSS】はみ出した文字をぼかして消していく方法のメモ

もしかしたら、気づいた人がいるかもしれませんが、indexページのタイトルの表示の仕方を変えました。 タイトルの部分の文字の改行をやめて、ボックス...

【CSS】CSSのグラデーションを使ってメタリック感を出すメモ

CSSのグラデーションをうまく使うと、メタリック感のある背景色を作ることができます。 今回は忘れないうちにそんなメモ。 金色メタリック [crayon...

【CSS】CSSを使って写真をトリミングするメモ

絶賛成長中のうちのガジュマルさんの写真をもとに、CSSを使って画像のトリミングをします。この画像はwidth="300" height="252"のサイズです。...

【CSS】CSSでテーブルの奇数行・偶数行の背景に色をつけるメモ

CSS3になって便利なことといえば、擬似要素のnth-childでしょう。 それまでは、javascriptでやるしかなかったテーブルの奇数行や偶数行の背...

【CSS】CSSだけでメールアイコンを作ってみたメモ

CSS3になっていろいろできるようになったので、CSSだけでメールアイコンを作ってみました。 上のメールアイコンがそれ。 見れない人向けの画像版は下...