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

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

<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;}東京と...

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

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

<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 ...

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

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

<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: ...

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

コメ0 東京ウェブ制作ブロマガ 142ヶ月前

<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....

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

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<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-r...

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

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：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...

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

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：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{ba...

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

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：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:lig...

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

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：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;bo...

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

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

検証ブラウザ：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 s...

CSSでdiv毎に背景色とフォントサイズを適用する方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

HTML側で下記のようにクラスを指定しておきます。<div class="tokyo">東京</div><div class="kanagawa">神奈川</div><div class="osaka">大阪</div><div class="nagoya">名古屋</div>スタイルシート側で、クラス毎にフォントサイズと背景色を適用できます。div.tokyo{font-size: 20px;background-color:red;}div.kanagaw...

星屑のひとつの気分はこんな感じ？ 広大な銀河を探訪できる「100,000 Stars」

コメ0 コタク・ジャパン・ブロマガ 146ヶ月前

先日、Googleがソーラーシステムにそっくりなスターマップ、その名も「100,000 Stars」を公開しました。同システムは、WebGL、CSS 3D、そしてWeb Audioなどの技術を使ったWebサイトで、クリックすれば星や太陽のクローズアップを楽しむことも可能だそうです。詳細は以下

ゆるキャラ街ネタはニュースメディアの王となるか？

コメ0 未来地図レポート 146ヶ月前

　神戸で10月上旬、「みん経ナイト2012 in 神戸」というイベントがあった。私もゲストとして参加したのだけど、これが関西ノリで非常におもしろい話満載だったので紹介してみたい。　「みん経」というのは「みんなの経済新聞」のことだ。2000年に最初にスタートした「シブヤ経済新聞」をはじめ、日本各地に広がっている...

業務で使えるオープンソース（39）「Flash代替」

コメ0 MOONGIFTニコニコ出張所 148ヶ月前

Android4.0以降ではFlashプレイヤーが提供されなくなることを受けて、Flashの代わりになる技術への注目が集まっています。そこで今回はHTML5/CSS3を中心にFlash代替ソフトウェア/サービスとそのメリット、デメリットについて紹介します。