- 2012-01-26 (Thu) 09:20
- Web
テレビを見ていたら、氷河期に入る周期になっているようです。
太陽の黒点の数が異様に少なく、太陽の活動がとても弱くなっているそうで、今まで過去のデータからみるととても異質であるという分析結果。
明日から氷河時代に入ってもおかしくないとか・・。夏がなくなるのかな・・・^^；
今日は、CSSでアコーディオンメニューを作ってみます。主となるhtml5コードは以下のようにします。
---------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>アコーディオンメニュー</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>ブラウザの種類</h1>
<div id="menu01">
<h2><a href="#menu01">インターネット エクスプローラ</a></h2>
<div class="content">
<p>Microsoft社が提供するWebブラウザ<br>OSであるWindowsに同梱されているために、世界的なシェア率は高いブラウザとなっている。しかし、W3C標準仕様のタグおよびCSS3への取り組みがまだ未達成である。</p>
</div>
</div>
<div id="menu02">
<h2><a href="#menu02">クローム</a></h2>
<div class="content">
<p>Google社が開発したWebブラウザ<br>正式名称は「Google Chrome」であり、最新の普及率が最も高いブラウザであり、HTML5仕様がかなりサポートされている。</p>
</div>
</div>
<div id="menu03">
<h2><a href="#menu03">サファリ</a></h2>
<div class="content">
<p>Apples社が開発提供しているWebブラウザ<br>iPhone、iPad、iPod用の専用ブラウザとなり、スマートフォンでは高いシェア率となる。</p>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------
このコードをそのままChrome上でレンダリングすると以下のようになります。
今回はCSSを外部ファイルとしてリンクさせています。よって、これからのスタイルはstyle.cssファイルでの記述とします。
まず、基本スタイルを次のようにします。
@charset "UTF-8";
body, html, ul, li, div, h1, h2, p {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
padding: 10px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 100%;
}
以上のスタイルを適用すると以下のようになります。
詳細となる文字列を隠します。ここでは、説明書きの文字列をcontentクラスで囲んでいますので、セレクタはcontentとなります。
.content {
height: 0;
overflow: hidden;
}
結果は以下のようになります。
target擬似クラスを使ってリンクを辿ると高さ5emまでの文字が表示されるようにします。
:target .content {
height: 5em;
}
結果は以下のようになります。h2要素のリンクをクリックするとそれにリンクされているcontentクラスのボックスが表示されます。
今回は簡単なアコーディオンメニューとしました。JavaScriptであるJQueryプラグを利用したものもありますが、シンプルに飾りたい場合はCSSのみだけでも良いかもしれませんね。
- Newer: アコーディオンメニュー（2）
- Older: CSSでデザイン（4）
Comments:17
- multipler orgasmus 2014-09-02 (Tue) 19:39
-
Ronga wako muchato chero usina keke unzwe kuti ini nababa Sharo tinotaura nezvazvo here. Ufunge zvako muchato wakatinakudza uyu plus keke rakatinakira zvekuti tiri kutoda kunobikisa rimwe rakadaro rekungodyawo zvedu.
- clash of clans mod apk apk loot 2015-02-21 (Sat) 19:52
-
just turn on the game for once or twice a day and there is also a link on Onhax.net for when the server is on and off
- wlp 2015-06-29 (Mon) 18:12
-
http://www.guccihandbags.com.co/
http://www.gucci-outlet.in.net/
http://www.gucci--outlet.com.co/
http://www.guccishoes.net.co/
http://www.guccishoes.us.org/
http://www.hermesbags.com.co/
http://www.hermesbirkin.com.co/
http://www.hermesoutlet.net.co/
http://www.hollister.us.org/
http://www.hollisterclothing-store.in.net/
http://www.insanityworkout.net.co/
http://www.iphone-cases.us/
http://www.ralphlaurenpolo.in.net/
http://www.ray-ban-outlet.us.com/
http://www.raybans.us.org/
http://www.rayban-sunglasses.org.uk/
http://www.rayban-sunglasses.us.org/
http://www.raybansunglassesoutlet.net.co/
http://www.raybanwayfarer.in.net/
http://www.replicahandbags.com.co/
http://www.replicawatches.us.com/
http://www.retro- - Clash of Clans Cheats 2015-12-30 (Wed) 09:14
-
Get now free clash of clans gems with the newest working clash of clans gems exploit method. Just download the pdf form our site and you will be able to get unlimited free clash of clans gems.
- Clash of Clans Gems Exploit 2015-12-30 (Wed) 09:15
-
Get now free clash of clans gems with the newest working clash of clans gems exploit method. Just download the pdf form our site and you will be able to get unlimited free clash of clans gems.
- PROMOVARE GOOGLE 2016-10-28 (Fri) 14:13
-
Comparatie intre publicitatea prin anunturi Google AdWords si optimizarea site-ului pentru listarea naturala
- free live girls 2017-05-18 (Thu) 22:38
-
Useful info. Fortunate me I found your web site by chance, and I am shocked why this twist of fate didn't happened in advance! I bookmarked it.
- uvibejabep 2017-08-11 (Fri) 18:43
-
http://20mg-cheapesttadalafil.com/ - 20mg-cheapesttadalafil.com.ankor <a href="http://20mg-cheapesttadalafil.com/">20mg-cheapesttadalafil.com.ankor</a> http://20mg-cheapesttadalafil.com/
- eruyibuyi 2017-08-11 (Fri) 18:55
-
http://20mg-cheapesttadalafil.com/ - 20mg-cheapesttadalafil.com.ankor <a href="http://20mg-cheapesttadalafil.com/">20mg-cheapesttadalafil.com.ankor</a> http://20mg-cheapesttadalafil.com/
- erijakelomi 2017-08-11 (Fri) 19:27
-
http://20mg-cheapesttadalafil.com/ - 20mg-cheapesttadalafil.com.ankor <a href="http://20mg-cheapesttadalafil.com/">20mg-cheapesttadalafil.com.ankor</a> http://20mg-cheapesttadalafil.com/
- utunuheji 2017-08-11 (Fri) 19:54
-
http://20mg-cheapesttadalafil.com/ - 20mg-cheapesttadalafil.com.ankor <a href="http://20mg-cheapesttadalafil.com/">20mg-cheapesttadalafil.com.ankor</a> http://20mg-cheapesttadalafil.com/
- erojehqo 2017-08-12 (Sat) 15:18
-
http://20mg-cheapesttadalafil.com/ - 20mg-cheapesttadalafil.com.ankor <a href="http://20mg-cheapesttadalafil.com/">20mg-cheapesttadalafil.com.ankor</a> http://20mg-cheapesttadalafil.com/
- obibzesibil 2017-09-22 (Fri) 11:04
-
http://20mg-levitraforsale.com/ - 20mg-levitraforsale.com.ankor <a href="http://usbuy-ventolin.com/">usbuy-ventolin.com.ankor</a> http://generic-levitracheapest-price.com/
- odoladaxe 2017-09-22 (Fri) 11:17
-
http://20mg-levitraforsale.com/ - 20mg-levitraforsale.com.ankor <a href="http://usbuy-ventolin.com/">usbuy-ventolin.com.ankor</a> http://generic-levitracheapest-price.com/
- nolatudiol 2017-09-22 (Fri) 17:23
-
http://20mg-levitraforsale.com/ - 20mg-levitraforsale.com.ankor <a href="http://usbuy-ventolin.com/">usbuy-ventolin.com.ankor</a> http://generic-levitracheapest-price.com/
- obadorohige 2017-09-22 (Fri) 17:36
-
http://20mg-levitraforsale.com/ - 20mg-levitraforsale.com.ankor <a href="http://usbuy-ventolin.com/">usbuy-ventolin.com.ankor</a> http://generic-levitracheapest-price.com/
- sex images 2018-02-28 (Wed) 20:02
-
Valuable info. Fortunate me I discovered your site unintentionally, and I am surprised why this coincidence didn't happened in advance! I bookmarked it.
