JSTTwitterFacebookGoogle+はてなブックマークPocketFeedlyWEBデザインCSSネタ&備忘録シリーズ。レタッチソフトを使わずCSSで非破壊で画像を丸抜きする方法を紹介します。dice(@dice_dDtea)です。今回のブログリニューアルでやったことを忘れないようにやり方を記しておこうかと思います。今回はPhotoshopなどでレタッチして画像を丸く切り抜くんじゃなくCSSだけで完結してしまう方法です。この方法だと、「気が変わった!丸から四角に戻そう!」「やっぱかど丸かな?」って時にイチイチ画像を弄るところまで戻らずに済むってとこですね。この丸抜きは執筆者の前にあるアバターアイコンでやってます。<img>タグで配置します。src="umah.jpg">これだけでは指定しようがないんでクラス名を定義します。サムネイル名なんで「thumb」としましょうか。src="umah.jpg">準備はできました。CSSで丸抜きをします。丸抜きができますborder-radiusを使います。50px;}かど丸の半径を指定幅の半分以上(大きい分は問題なく円になります)指定すれば円になります。125px;}円です。250px;}円ですね。大きさも変わらないようです。125px;}楕円になったけど・・・。「/(スラッシュ)」区切りは「水平方向」と「垂直方向」と分けた半径指定です。詳しくはborder-radius-CSS3リファレンスborder-radiusプロパティは、ボックスの4つのコーナーの角丸をまとめて指定する際に使用します。それぞれの角丸コーナーは4分の1楕円になりますが、楕円の形状は、下図のように水平方向と垂直方向の2つの半径の組み合わせで決定されます。まとめかど丸って言っても四隅全て丸になるような数値入力すれば正円にできるわけです。タブインデントを一段減らす3つの方法。空要素の最後にスラッシュ必要か?コメントFacebookコメント※コメントしたけど表示されてない方へパーマリンクを変えてしまったおかげで表示されなくなってしまいました。コメントいただいたのにスイマセンm(__)mパーマリンク変更しても何とか表示できる方法を現在模索中です。不安なんでAdobeに問合せてみた!No.3パソコンWUXGAノススメ。【複式簿記de青色申告】No.6SOHOそんなモニターとの距離で大丈夫か?眼的に望ましいモニターとの距離を考えるNo.7Windows【第3回】確認じゃ!プロダクトキー。Windows10のプロダクトキーを調べようNo.8パソコン光はの単位はHzではなくnm。バイクをレッドバロンへ下取りに出してみた結果・・・。さらばドラッグスター、19年間ありがとう。JSTバイクのさび落としについて考える。JSTdice、バイク買い替えるってよ。Reserved.ページ先頭へ。