CSS編集によるブログデザインのアレンジ

PCで閲覧している皆様はお気づきでしょうが、

少し前に

ブログデザイン

を変更しました。



これは既存のデザインから選んだわけではなく、

私自身で

CSS(Cascading Style Sheets)

を編集してアレンジしました。

(先日購入した本を参考に編集しました(過去記事))



今回はその1部を掲載したいと思います。

/* skinArticle 記事エリア */
.skinArticle{
/* 注　ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #ff7fbf;
border-radius:20px 50px;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}

border

とありますが、

これは枠線の設定をするためのプロパティです。

プロパティ値は左から順に

線の太さ、線種、色

となっています。



その下に

border-radius

とありますが、

これはボーダーの角を丸めるためのプロパティです。

プロパティ値の数と適用箇所の関係を表1に示します。

表1 値の数と適用箇所

値の数	適用箇所
1	全ての角
2	左上・右下 右上・左下
3	左上 右上・左下 右下
4	左上 右上 右下 左下

以上の2つのプロパティにより、

記事の枠線が細いピンクの実線となり、

角が丸まります。

あと見ていただければわかると思いますが、

左上・右下と右上・左下の丸みの度合いが違います。



このブログは

プログラミングをメインとしたものではないので、

細かい説明は省略させていただきますが、

ブログのデザインを細かくカスタマイズしたい方は、

CSSの編集にチャレンジしてみてはいかがでしょうか

(質問等はコメントにてよろしくお願いします。)

【送料無料】HTML5＆CSS3辞典 価格：2,520円（税込、送料別）

↓ブログ・ランキング参加中↓

↑気が向いたらクリックを↑

　　

keywords:
ブログ Blog デザイン Design CSS Cascading Style Sheets 3

ウェブ Web プログラミング Programming