読者です 読者をやめる 読者になる 読者になる

【STEP5】角を丸くする方法

今日学んだこと

今回は角を丸くする方法を学んだ。

ヘッダーや記事、フッターだけでなく画像の角を丸くするときなどいろいろと応用ができそうである。

今回も引き続き、以下のテキストを進めていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

 角を丸くする方法

以下のようにスタイルシートに書き込むと、ボックスの隅っこを直角ではなく、柔らかい曲線にすることができる。

border-radius: 数値px

数値は大きければ、大きいほど曲線の弧の描き方が急なものになる。ちなみに4つの角の曲線の数値を変えることもできる。

そのときは順に左上、右上、右下、左下と数値を設定できる。

border-radius: 左下px  右上px  右下px  左下px 

という具合である。

はてなブログカスタマイズでの応用

角を丸くするという方法は、はてなブログのカスタマイズデザインにも使える。例えば、私は記事のキャッチ画像の表示を以下のように設定している。

 <!--アイキャッチ画像大きさ-->
<style type="text/css">
.list-entry-article .thumb-image {
width: 110px;
height: 105px;
border-radius: 10px;
}
</style>
<!--アイキャッチ画像大きさ-->

このコードを【デザイン】➡【スマートフォン】➡【ヘッダ】➡【タイトル下】の中に書き込んでいる。

そのため少し、キャッチ画像の角が丸くなっている。また画像を目立たせるため、大きさも幅(width)と高さ(height)で少し大きくなるように調整している。

はてなブログカスタマイズのことはよくわかってはいないが、/*と同じように、<!---->で挟んだ記述はhtmlとしても普通の文字としても認識されないようになるらしい。メモ代わりによく使っている。

またはてなブログをカスタマイズするときは、<style type="text/css">と</style>でカスタマイズ内容をはさまなければならないと理解している。

未だに.(カンマ)がどのような機能をもって使われているのかはわからないが、htmlを学びながら、少しでもスムーズにカスタマイズできるようになれば、幸いだ。

まとめ

角を丸くする方法は「border-radius: 数値」と覚えておく。四つ角を指定するときは、左上、右上、右下、左下の順になる。ちなみにradiusは半径という意味。

これまで習った実線で記事を囲む方法「border: 線の種類 数値 色の値」と影のつけ方「box-shadow: 横ずれ値 縦ずれ値 ぼかし度 色の値」と合わせれば、基本的なカスタマイズはできるかもしれない。

どんどんと次へ進んでいこう。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック