今回は、CSS3を使って画像を角丸にしたり円形にしたり影を入れる基本的な方法について解説します。スポンサードリンクCSS3で画像の形状を変えてみよう今回のCSS3の実践で使う画像は以下の猫画像です。これを、CSS3で色々いじってみます。画像を丸くする画像を丸くする場合は、CSS3のborder-radiusを使います。値によって、角を丸くしたり全体を円形にすることも出来ます。画像の角を丸くするまずは、画像の角を丸く切り取った形にする方法から。border-radiusを使って角の丸さを指定します。~正方形画像の場合~次は、正方形画像を丸く切り取った円形にする方法です。border-radiusの値を50%にするだけで出来ます。~長方形画像の場合~ただ、上記のborder-radius:50%は、長方形画像に指定すると楕円形になってしまいます。以下の画像は、幅180px・高さ150pxの画像ですが、楕円形になっていますよね。表示サンプルキレイな円にしたい場合は、画像を配置するボックスを正方形の丸型にして、その後ろに背景画像を表示させるように設定します。no-repeat;}表示サンプル画像を傾けてみよう画像を傾ける場合は、transformを使います。rotate(5deg);}表示サンプルtransform:rotateはボックスを回転させるプロパティです。上記の場合は「5deg」ですが、値は大きくしたり小さくしたりできます。ちなみに、正の値の場合は時計回り、負の値の場合は反時計回りに回転します。画像に影を入れてみよう次は画像に影を入れる方法です。影を入れる場合はbox-shadowを使います。画像の右下に影を入れてみましょう。指定方法は以下のようになります。ぼかす大きさ」「広がる大きさ」の順にpx指定し、最後にRGBカラーと透明度を指定します。0.6);}表示サンプルbox-shadowの指定がちょっと難しそうですが、概要は以下の通りです。水平方向...正の値なら右に影、負の値なら左に影ができる垂直方向...正の値なら下に影、負の値なら上に影ができるぼかす大きさ...数値が大きいほどぼかしが大きくなる。逆に小さいほど影はシャープになる。広がる大きさ...正の値なら影が全方向に大きくなり、負の値なら小さくなる。RGB...上記例「0,0,0」のように3桁のカラーコードで指定します。透明度...上記例「0.6」のように0~1の範囲で指定します。続いて、「画像がめくれたような感じ」を出す影の入れ方です。これは、さきほど画像を傾けた時に使ったtransformを上手に使うことで実現できます。rotate(5deg);}表示サンプルコードの説明ですが、まずは画像を配置するボックス「curl」にafter擬似要素で擬似的なボックスをつくります。curlにrelative、curl:afterにabsoluteを指定して、after擬似要素側のrightとbottomで調整します。その後、after擬似要素の幅と高さを適当な大きさに決めます。そこにbox-shadowで影を付けて、z-indexで写真の後ろに入れ込んで、最後にtransform:rotateで傾けています。イメージとしては以下のような具合です。逆側にも影を入れてみよう上記のめくれた感じを反対側にも入れてみましょう。after擬似要素とbefore擬似要素を使うことで、両サイドに影を付けることができます。rotate(5deg);}表示サンプルどうでしたか?border-radius、box-shadowは覚えてしまえば使える機会はかなりあると思います。transformも機会があれば是非使っていきましょう。記事では、とにかく即戦力で使えるサンプルだけを紹介しました。olリストに1などの丸数字を使う方法olリストで表示させる番号を「1.」とか「2.」ではなく、「1」とか「2」などの丸数字へCSSで強引に変更する方法について。画像の中央寄せやdivの中央寄せって、サイトを作る上で欠かせないんですが、たまに天地(縦軸)でも中央に寄せなきゃいけない場合ってあります。そんな時に使える小技をご紹介。投稿で自動で付くPタグを付けないようにする方法WordPressのデフォルト機能の1つに改行個所を自動でPタグに変換してくれる機能がありますが、これって使う人によっては不要だったりします。今回のこのPタグの自動挿入を停止させる方法をご紹介します。コーディング郵便番号から住所を自動入力してくれるフォームを作成してみた「郵便番号から住所を自動で入力できるようにしたい」。問い合わせフォームの製作時にそんな要望が挙がることもあります。2カラムレイアウト時に片方を固定・可変にする組み方2カラムのレイアウトで、サイドカラム幅は固定、メインカラムはウィンドウ幅に応じて伸縮するリキッドな感じの配置にしたい時のコーディング方法です。画像ページの先頭へ某企業のウェブ担当を経て2012年に独立。現在は東京・神奈川を中心にウェブ企画/デザイン/コーディングなどウェブ製作業務に従事してます。