- ベストアンサー
円形の配置にするコーディングについて
- 円形の配置について質問です。うまくいかず詰まっています。ボタンをアニメーションgifにし、さらにロールオーバーボタンにする予定です。
- 初心者に毛が生えた程度なので、position: absoluteがよく分かっていません。現在のやり方が間違っているのかどうか教えてください。
- 他におすすめのやり方があれば教えてください。形は決まってしまっていますが、何とか作りたいです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
とっても簡単ですが、そのまえに発想方法が根本から間違っています。 HTMLは、あくまで文書構造を記述するものでどのようにプレゼンテーション(表現)するかとは切り離さないとだめです。 ＞大きくdivで囲って(赤い四角)それをそれをposition:relativeに。 ＞さらに１つ１つのボタン(青い四角)をdivで囲って各ボタンをposition: absoluteで ＞位置を設定。 自体が間違いです。それをするから先に進めないし、将来デザインを変えようにもHTMLから書き直さなきゃならない。 仕様書には 『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』 と様々なところで指摘されている。そもそもHTMLは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より 前置きが長くなりましたが、それが、もしナビゲーションリストでしたら、 <div class="nav" id="siteMap"> <ul> <li><a href="/">Top</a></li> <li><a href="/news">NEWS</a></li> <li><a href="/info">Info</a></li> <li><a href="/product">Product</a></li> <li><a href="/service">Service</a></li> <li><a href="/support">Support</a></li> <li><a href="/profile">Profile</a></li> <li><a href="/contact">Contact</a></li> </ul> </div> というマークアップになるはずです。もちろん一つ一つにサブメニューがあっても構いません。 <li><a href="/product">Product</a> <ul> <li><a href="/product/hardware">Hardware</a></li> <li><a href="/product/software">Software</a></li> </ul> </li> とね・・・。 それを横に並べようが、縦に並べようが、プルダウンメニューにしようが、円形や三角形に並べようが、縦や横のスライドメニューにしようが、あるいは、中心に画像を表示させようが、アニメーションGIFを使おうが・・それはスタイルシートの問題です。 ★大事なことは、HTMLには文書構造だけを記述するということ。この、もっとも大事な基本ができていないようです。 下記にサンプルのHTMLをあげておきます。このナビゲーション項目を円形に並べる方法を考えてみてください。随分と楽になるはずです。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) で検証済みです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav" id="siteMap"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/news">NEWS</a></li> ＿＿＿＿<li><a href="/info">Info</a></li> ＿＿＿＿<li><a href="/product">Product</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/product/hardware">Hardware</a></li> ＿＿＿＿＿＿<li><a href="/product/software">Software</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/service">Service</a></li> ＿＿＿＿<li><a href="/support">Support</a></li> ＿＿＿＿<li><a href="/profile">Profile</a></li> ＿＿＿＿<li><a href="/contact">Contact</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-18</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-18 09:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2015 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
リンクに背景画像を指定する場合は、 a[href="/service"]{background:url(./images/background/service.gif);} と要素セレクタで指定するので良いです。 そうすることで、HTMLまたはスタイルシートで順番や位置を変更しても書き直す必要がありません。
お礼
ORUKA1951様回答ありがとうございます！ CSSのサンプルコードも書いて頂きとても参考になりました。 まさに背景画像を配置したかったので、こちらの回答もとても助かりました。 そして、とても時間がかかってしまいましたが… ORUKA1951様のコードをまねしながら何とか円のレイアウトができました！（:_;） 本当に本当にありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
時間がちょっとだけ取れたので、CSS2.1の範囲内で簡単なサンプルを書いてみました。子セレクタはあえて使っていません。そのほうが少しだけ文字数が減る。 スタイルシートもわかりやすいと思います。なぜなら、文書構造にしたがって書いてあるからです。そのためにはHTMLがきちんと書かれている必要があります。 ★スマートホンでもそのまま利用できるリキッドスタイルです。 ★印刷には別のスタイルが適用されます。印刷プレビューで確認。 ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) で検証済みです。 <style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} body{width:100%;height:100%;} div.header div.nav{width:80%;height:80%;min-width:640px;border:gray solid 1px;left:10%;top:10%;position:absolute;text-align:center;} div.header div.nav ul,div.header div.nav ul li{display:block;list-style-type:none;margin:0;padding:0;} div.header div.nav ul li{width:15%;position:absolute;line-height:3em;} div.header div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;border:outset 3px gray;} div.header div.nav ul li a:visited{background-color:rgb(180,180,0);} div.header div.nav ul li a:link{background-color:yellow;} div.header div.nav ul li a:hover,div.header div.nav ul li a:focus{background-color:fuchsia;} div.header div.nav ul li a:active{background-color:red;color:green;border-style:inset;} div.header div.nav ul li{left:44%;top:2%;} div.header div.nav ul li+li{left:70%;top:14%;} div.header div.nav ul li+li+li{left:82%;top:42%;} div.header div.nav ul li+li+li+li{left:70%;top:70%;} div.header div.nav ul li+li+li+li+li{left:42%;top:82%;} div.header div.nav ul li+li+li+li+li+li{left:14%;top:70%;} div.header div.nav ul li+li+li+li+li+li+li{left:2%;top:42%;} div.header div.nav ul li+li+li+li+li+li+li+li{left:14%;top:14%;} div.header div.nav ul li ul{display:none;position:relative;} div.header div.nav ul li ul li{width:100%;line-height:1.2em;left:0;position:static;} div.header div.nav ul li:hover ul{display:block;} div.section{position:absolute;top:90%;left:0;width:60%;} div.footer{position:absolute;top:90%;width:40%;right:0;} --> </style> <style type="text/css" media="print"> <!-- div.header div.nav ul li a{color:black;text-decoration:none;} div.header div.nav ul li a:after{ content:"\A → http://hoge.com"attr(href); white-space:pre; } --> </style> ★最後に、コーディングのもっとも肝心要なことは、文書構造とプレゼンテーションを分離することです。そうすることで、 ・端末ごとにページを作成する必要はなくなります。 ・デザインを変えたくなってもスタイルシートだけ書き換えれば済みます。 しかも、わかりやすいスタイルシートになるのでいちいちHTMLを開く必要もなくなります。ましてや書き直す必要もありません。 class名は、『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。デザインのためではありません。私が使用しているclass名は、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」名を使っています。それは、HTML4.01の時代の『文書に構造を付加するため』を理解している人が少なかったから新しい要素になったのです。 したがって、私のサンプルは<div class="header">→<header>，<div class="nav">→<nav>とするだけで、そのままHTML5になります。 あなたが挑戦してきたHTMLやCSSと比較して、そのシンプルさが、ご理解いただけるとよいのですが・・
お礼
ORUKA1951様 すごく丁寧に回答して頂き本当に本当にありがとうございます。 書いてもらっているHTMLを元に、CSSを調べながら円になるレイアウトを試していたら お礼が遅くなってしまいました。すみません。 アドバイス頂いた内容を読めば読む程、自分の知識が間違っている＆足りないことが よく分かりました… まだ自分で書いたCSSだとうまくいっていないですが、取り急ぎお礼を書き込みさせて頂きます！ いつかORUKA1951様みたいに、スラスラHTMLを書けるようになりたいです。(>_<)