スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSを使用してボックスの角を丸める方法

DIVなどの領域でバックグラウンドに色のみを設定した場合などで
角を丸めたい場合があります。
バックグラウンドを画像で設定している場合は、画像の加工が必要になるため手間がかかりますね。
画像を貼ってある場合、画像は丸まりませんが、単純に色をつけてあるだけならCSSで設定できます。

新しいCSSの規格である「CSS3」では、

この角を丸めるための「border-radius」というプロパティが用意されていますので、
数値を修正するだけで、角丸の半径を変更できます。
しかも、ただ角をまるめているだけなので、線種などを変更しても問題ありません。

数値の単位はピクセルで設定します。私の場合は、あまり大きな丸めにしたくな為
10pxくらいで丸めています。
以下の様に記述すると四方の角が10px分丸められます。

border-radius: 10px;

それぞれの角をそれぞれの数値丸めたい場合は、以下のようにひとつずつ設定していきます。
border-top-left-radius: 10px; /* 左上 */
border-top-right-radius: 10px; /* 右上 */
border-bottom-left-radius: 10px; /* 左下 */
border-bottom-right-radius: 10px; /* 右下 */

思い通りの丸めにならなかったら、数値をもう少し上げてみても良いかと思います。
試してみてくださいね。





スポンサーサイト

CSSのpositionを使用し位置を自由(下揃え右揃え等)に設定する

CSSでの表示配置を調整する際に使用する
「psotion」についてまとめてみました。

■positionは4つ
position:absolute; 絶対配置
position:relative; 相対配置
position:static; 通常配置(指定しない場合はこれ)
position:fixed; 固定配置(IE7以降で対応)

絶対配置とか相対配置とか意味がわからないという方もおわれるでしょう。
まずは図を見てください。

20140216.jpg


この図形はすべてdiv要素で作成しています。
ソースはこちら
<div id="base_yellow">
  <div id="orange"></div>
  <div id="pink"></div>
  <div id="blue"></div>
</div>


ベースとなるのが黄色の四角です。
いわゆる親の図形です。
この四角形のどの位置に配置させていくのかを設定していきます。
親の四角にはposition:relative;を指定します。

黄色い四角(div)のなかに図形を置くと通常は左上に配置されると思います。


絶対配置とは
元々ある場所に関係なく、ここ!と指定した場所に配置する。

相対配置とは
元々ある場所から指定した分だけ上下左右に移動(ずらす)させた位置に配置する。


簡単に言うとこんな感じでしょうか。

上下左右の設定
top  → 上辺から下にずらす数値
bottom →下辺から上にずらす数値
left →左辺から右にずらす数値
right →右辺から左にずらす数値


まずはオレンジの四角。
CSSの記述はこちら
#orange {
position: absolute;
right: 10px;
bottom: 10px;
background-color: #F60;
height: 20px;
width: 20px;
}

positionをabsoluteに設定し、右から10px、下から10pxの位置に配置します。
この時、通常置かれた場合の位置は考慮されません。

続いてピンクの四角。
CSSの記述はこちら
#pink {
background-color: #F6F;
position: relative;
top: 10px;
right: 5px;
height: 20px;
width: 20px;
}


positionをrelativeで設定し、通常置かれた位置から計算し
上から10px、右から5px移動させた位置に配置されています。
右から左に移動している為、黄色い図形を飛び出しているのがわかります。

最後にの四角。
CSSの記述はこちら
#blue {
background-color: #63F;
position: relative;
left: 10px;
height: 20px;
width: 20px;
}

positionをrelativeに設定し、すでに上にpinkが置かれている為
通常の位置はpinkの分だけ下にきている状態から
左に10px以上した位置に配置されています。
pinkは上から下に10px移動している為、少しかぶっている状態になります。






サイト内で複数のリンク色パターンを作る(CSS)

本日はリンクの色について
通常時、訪問済み、マウスオーバー時、クリック時と色を変えられますが、
メニューとナビではリンク色を変えたい場合。
つまり複数のパターンのリンク色を設定したい場合のCSS記述方法を紹介します。

通常CSSファイルに以下のような記述をするとします。

a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }

これだと、すべてのリンク色に反映されてしまいます。
例えば
通常のリンク色を設定した上で、<div id="navi">の中に貼られているリンク色だけは個別で設定したい場合は、
以下の様にCSSを記述します。

a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }

#navi a:link { color:#CCC; }
#navi a:visited { color:#CCC; }
#navi a:hover { color:yellow; }
#navi a:active { color:red; }

ポイントは、a: の前に #div名を付ける事により、下4行はdiv指定でリンク色を設定できるという事です。




リンクの色を変える(全体・一箇所)

リンクを設定する際に気になるのが、リンクの色です。

デフォルトは青色で
訪問済みサイトの場合は紫色ですね。
サイトによっては見づらくなりますので、CSSで色を変更してみましょう。

リンクの色は訪問済み以外にも
マウスオーバー時やクリック時など4パターンに分類できます。
a要素にこのプロパティを設定する事でリンクの色を変更できます。

通常時
a:link { color: #0000ff; }

訪問済み
a:visited { color: #000080; }

マウスオーバー時
a:hover { color: #ff0000; }

クリック時
a:active { color: #ff8000; }

サイト全体をこのリンク色で統一する場合は良いのですが、
一箇所だけ別の色にしたい場合は
HTMLのコードに直接指定してあげれば良いと思います。

<a href="http://www.xxx/" target="_blank"><font color="#FFF571">YAHOO!</font></a>
上記の場合、マウスオーバー時やクリック時に色は変わりません。

[リンクの色を変える(全体・一箇所)]の続きを読む


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。