そのうちなんとかなるだろう♪ | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
なんとかそのうち、このコードを使うと、こんなこと出来ますよ!みたいな一覧表を作ろうとは思ってはいるんですが、多分そんな事無理に決まってる頭の悪いワンタンです(涙目)。

さようなら・・あれ!?


試しにチョビっとだけ書いてみますた。


CSS編集用デザイン」でのお話です。

こんな感じで、ヘッダー画像の角を丸くして、上下の余白(隙間)を付ける方法を書いてみます。


ヘッダー画像の余白と隙間


1.ヘッダー画像の上に隙間(余白)を付けるコード


以下のコードの数字でヘッダー画像上部の隙間の広さを調整できます。
(※0にすると隙間は、なくなります。)

/*ヘッダー上の余白;03:12*/
.skinFrame{
padding-top: 50px;
}


2.ヘッダー画像の角を丸くするコード


以下のコードの数字を大きくすると、丸みが大きくなります。
(※0にすると、丸みはつかず、直角になります。)


/*ヘッダーの角を丸く・03:12*/
.skinHeaderArea{
border-radius:10px;
}



3.ヘッダー画像下の隙間(余白)を付けるコード


(※赤字の数字を大きくすると、余白が大きくなります。)

/*ヘッダー下の余白、03:12*/
.skinHeaderArea{
margin-bottom:50px;
}



■上のような、こんなコードを使うと、こんな事できますよ~をまとめた一覧表をつくってみたいとは思うのですが、多分無理ですね・・(汗)。


最後まで、お読み頂きありがとうございます←誰かさんの真似です^^;


いませんよねぇ~~。もし、いらしたら感謝です ○┓ペコリ

もう一回 ペコリ m(_ _ )m

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス