東京ウェブ制作ブロマガ

2013年2月の記事 13件

CSSでz-indexを用いて２つのdivの重なり順を変える

<div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> div{ width: 200px; border: 1px solid #F00; } div.tokyo{ background-color:lightpink; position: absolute; top: 0px; left: 0px; z-index: 2; } div.kanagawa{ background-color:lightskyblue; position: absolute; top: 10px; left: 5px; z-index: 1; } 東京と神奈川が重なっているが、東京が神奈川の上に来ている。これは z-index の指定によるものである。z-indexの値が大きいほうが、重なり順が上になる。よって、神奈川を東京の上に来さ

2013/02/28(木) 15:00

CSSでposition:absoluteを用いてdiv毎に絶対位置を指定する

<div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> div{ width: 200px; border: 1px solid #F00; } div.tokyo{ position: absolute; top: 0px; left: 0px; } div.kanagawa{ position: absolute; top: 0px; left: 0px; } 東京と神奈川、いずれも top と left を 0 にしているので、２つのdivが重なって見える。top や left の値を変更すると、位置をずらすことができる。サンプルソースhttps://tokyo-webs.jp/sample_source/130228b/東京ウェブ制作

2013/02/28(木) 14:22

CSSでリンクをブロックボックスに変更して枠線をつける

<a class="button padType01 fontSizeType01" href="#">これはリンクです。</a>a.button{ display: block; /* インラインボックスをブロックボックスに変更する */ text-decoration: none; /* リンクの下線を消す */ border:1px solid #FFFFFF; width:400px; } a.button:hover{ border:1px solid #0000FF; } .padType01{ padding: 10px 10px 10px 10px; } .fontSizeType01{ font-size: 30pt; }リンク（a href）に３つのクラスを適用している。ブロックボックス化することで、枠線を表示させることができる。サンプルソースhttps://tokyo

2013/02/28(木) 11:03

CSSでfloatを用いて左寄せの段組をする方法

<div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> <div class="osaka">大阪</div> <div class="nagoya">名古屋</div> <div class="saitama">埼玉</div> <div class="nagano">長野</div> <div class="fukuoka">福岡</div> div.tokyo{ background-color:lightpink; border: 4px solid #0000FF; width:600px; } div.kanagawa{ background-color:lightskyblue; border: 4px solid #FF0000; width:300px; float:left; } div.osaka{ b

2013/02/27(水) 16:48

CSSでdivのボーダー（枠線）を角丸にする方法（四隅一括設定）

<div class="nippon"> <div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> <div class="osaka">大阪</div> <div class="nagoya">名古屋</div> </div> div.tokyo{ background-color:lightpink; border: 1px solid #0000FF; width:200px; padding: 10px 10px 10px 10px; margin: 30px 0px 10px 25px; -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ } div.kanagawa{ background-color:lightskyblue; border: 1px s

2013/02/17(日) 21:43

CSSでdivのマージン（枠外の余白）を指定する方法

検証ブラウザ：Google Chrome <div class="nippon"> <div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> <div class="osaka">大阪</div> <div class="nagoya">名古屋</div> </div> div.tokyo{ background-color:lightpink; border: 4px solid #0000FF; width:200px; padding: 10px 10px 10px 10px; margin: 30px 0px 10px 8px; } div.kanagawa{ background-color:lightskyblue; border: 4px solid #FF0000; width:200px; padding: 0

2013/02/17(日) 20:21

CSSでdivのパディング（枠内の余白）を指定する方法

検証ブラウザ：Google Chrome<div class="nippon"> <div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> <div class="osaka">大阪</div> <div class="nagoya">名古屋</div> </div> div.tokyo{ background-color:lightpink; border: 4px solid #0000FF; width:200px; padding: 10px 10px 10px 10px; } div.kanagawa{ background-color:lightskyblue; border: 4px solid #FF0000; width:200px; padding: 0px 0px 0px 30px; } div.osaka

2013/02/17(日) 19:39

CSSでdiv毎に高さを指定する方法

検証ブラウザ：Google Chrome <div class="nippon"> <div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> <div class="osaka">大阪</div> <div class="nagoya">名古屋</div> </div> div.tokyo{ background-color:lightpink; border: 4px solid #0000FF; width:200px; height:50px } div.kanagawa{ background-color:lightskyblue; border: 4px solid #FF0000; width:200px; height:80px } div.osaka{ background-color:green; border

2013/02/17(日) 18:25

CSSでdiv毎に横幅を指定する方法

検証ブラウザ：Google Chrome <div class="nippon"> <div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> <div class="osaka">大阪</div> <div class="nagoya">名古屋</div> </div> div.tokyo{ background-color:lightpink; border: 4px solid #0000FF; width:50px; } div.kanagawa{ background-color:lightskyblue; border: 4px solid #FF0000; width:100px; } div.osaka{ background-color:green; border: 4px solid #000000; widt

2013/02/17(日) 18:09

CSSでdiv毎にボーダー（枠線）を指定する方法

検証ブラウザ：Google Chrome <div class="nippon"> <div class="tokyo">東京</div> <div class="kanagawa">神奈川</div> <div class="osaka">大阪</div> <div class="nagoya">名古屋</div> </div> div.tokyo{ background-color:lightpink; border: 4px solid #0000FF; } div.kanagawa{ background-color:lightskyblue; border: 4px solid #FF0000; } div.osaka{ background-color:green; border: 4px solid #000000; } div.nagoya{ background-colo

2013/02/17(日) 17:50

前へ 1/2 次へ