電子書籍の厳選無料作品が豊富！

円形の配置にするコーディングについて

解決済

  • 質問者：karup
  • 質問日時：
  • 回答数：3件

sample.gifのような形をつくりたいのですが
うまくいかず詰まっています。
1つ１つの青い四角はボタンです。
※アニメーションgifで
さらにロールオーバーボタンにする予定です；_；

大きくdivで囲って(赤い四角)
それをそれをposition:relativeに。
さらに１つ１つのボタン(青い四角)をdivで囲って
各ボタンをposition: absoluteで
位置を設定。
というやり方は間違っていますか？
１つの親ボックスの中に複数のabsoluteがあると
ダメなのでしょうか？

まだまだ初心者に毛が生えた程度なので
position: absoluteをよく分かっておらず
ネットで調べて見よう見まねでやっています。

もしこっちのやり方の方が良いよ。というような
やり方があれば、よければそちらも教えてください。

こんな形にしたのを後悔しているのですが
決まってしまったので、何とか作りたいのですが…
よろしくお願いします。

「円形の配置にするコーディングについて」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

とっても簡単ですが、そのまえに発想方法が根本から間違っています。


HTMLは、あくまで文書構造を記述するものでどのようにプレゼンテーション(表現)するかとは切り離さないとだめです。
＞大きくdivで囲って(赤い四角)それをそれをposition:relativeに。
＞さらに１つ１つのボタン(青い四角)をdivで囲って各ボタンをposition: absoluteで
＞位置を設定。
　自体が間違いです。それをするから先に進めないし、将来デザインを変えようにもHTMLから書き直さなきゃならない。
　仕様書には
『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　と様々なところで指摘されている。そもそもHTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　前置きが長くなりましたが、それが、もしナビゲーションリストでしたら、
<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>&copy; ORUKA1951 2012 - 2015 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951様
すごく丁寧に回答して頂き本当に本当にありがとうございます。
書いてもらっているHTMLを元に、CSSを調べながら円になるレイアウトを試していたら
お礼が遅くなってしまいました。すみません。

アドバイス頂いた内容を読めば読む程、自分の知識が間違っている＆足りないことが
よく分かりました…
まだ自分で書いたCSSだとうまくいっていないですが、取り急ぎお礼を書き込みさせて頂きます！
いつかORUKA1951様みたいに、スラスラHTMLを書けるようになりたいです。(>_<)

通報する
お礼日時：2012/08/22 12:02

No.3

  • 回答者： ORUKA1951
  • 回答日時：

リンクに背景画像を指定する場合は、


a[href="/service"]{background:url(./images/background/service.gif);}
と要素セレクタで指定するので良いです。
　そうすることで、HTMLまたはスタイルシートで順番や位置を変更しても書き直す必要がありません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951様回答ありがとうございます！
CSSのサンプルコードも書いて頂きとても参考になりました。
まさに背景画像を配置したかったので、こちらの回答もとても助かりました。

そして、とても時間がかかってしまいましたが…
ORUKA1951様のコードをまねしながら何とか円のレイアウトができました！（:_;）
本当に本当にありがとうございました！

通報する
お礼日時：2012/08/27 17:02

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　時間がちょっとだけ取れたので、CSS2.1の範囲内で簡単なサンプルを書いてみました。

子セレクタはあえて使っていません。そのほうが少しだけ文字数が減る。
　スタイルシートもわかりやすいと思います。なぜなら、文書構造にしたがって書いてあるからです。そのためにはHTMLがきちんと書かれている必要があります。
★スマートホンでもそのまま利用できるリキッドスタイルです。
★印刷には別のスタイルが適用されます。印刷プレビューで確認。
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　で検証済みです。

<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-html4 … )』ためのものです。デザインのためではありません。私が使用しているclass名は、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」名を使っています。それは、HTML4.01の時代の『文書に構造を付加するため』を理解している人が少なかったから新しい要素になったのです。
　したがって、私のサンプルは<div class="header">→<header>，<div class="nav">→<nav>とするだけで、そのままHTML5になります。
　あなたが挑戦してきたHTMLやCSSと比較して、そのシンプルさが、ご理解いただけるとよいのですが・・
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報