円形の配置にするコーディングについて
- 円形の配置について質問です。うまくいかず詰まっています。ボタンをアニメーションgifにし、さらにロールオーバーボタンにする予定です。
- 初心者に毛が生えた程度なので、position: absoluteがよく分かっていません。現在のやり方が間違っているのかどうか教えてください。
- 他におすすめのやり方があれば教えてください。形は決まってしまっていますが、何とか作りたいです。
- ベストアンサー
円形の配置にするコーディングについて
sample.gifのような形をつくりたいのですが うまくいかず詰まっています。 1つ１つの青い四角はボタンです。 ※アニメーションgifで さらにロールオーバーボタンにする予定です；_； 大きくdivで囲って(赤い四角) それをそれをposition:relativeに。 さらに１つ１つのボタン(青い四角)をdivで囲って 各ボタンをposition: absoluteで 位置を設定。 というやり方は間違っていますか？ １つの親ボックスの中に複数のabsoluteがあると ダメなのでしょうか？ まだまだ初心者に毛が生えた程度なので position: absoluteをよく分かっておらず ネットで調べて見よう見まねでやっています。 もしこっちのやり方の方が良いよ。というような やり方があれば、よければそちらも教えてください。 こんな形にしたのを後悔しているのですが 決まってしまったので、何とか作りたいのですが… よろしくお願いします。
- karup
- お礼率96% (233/241)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （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と比較して、そのシンプルさが、ご理解いただけるとよいのですが・・
関連するQ&A
- テーブルを使わずにコーディングをしたい
添付の画像のようなページを テーブルを使わずdivだけで作成することは 可能でしょうか？ 青のしかく、黄色のしかくなどは 一枚の画像として背景で指定して プルダウンのタブをそれぞれの四角の 下に配置したいのですが 場所もバラバラなので困っています。 position：absolute； などを使っても、 サイトのCSSが複雑で どこかでposition：relative；を使っているようで 位置がブラウザによって変わってしまったり 全画面表示の時の位置と 縮小した画面の時では場所が全然違います。 何か方法をご存知の方いらっしゃいましたら 教えていただけないでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
- コンテンツの配置について
Yahoo!のようにコンテンツ全体を中央によせ、さらに、 それぞれのボックスの表示位置を縦横で指定したいのですが 以下のようなソースではうまくいきません。 対処方法をご教示下さい。 よろしくお願いします。 <STYLE TYPE="text/css"> <!-- #main{ position:relative; top:10px; text-align:center; width:100%; } #contentsA{ text-align:center; width:800px; } #contentsB{ position:relative; hight:200px; } --> </STYLE> <TITLE></TITLE> </HEAD> <BODY> <DIV id="main"> <DIV id="contentsA"> <DIV id="contentsB"> <IMG src="image3.gif" border="0" width="50" height="50"> <IMG src="image2.gif" border="0" width="50" height="50"> <IMG src="image1.gif" border="0" width="50" height="50"> </DIV> </DIV> </DIV> </BODY>
- ベストアンサー
- HTML
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- positionプロパティの設定について
下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------
- ベストアンサー
- HTML
- positionについて
positionについて教えてください box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか？ また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか? #box { position: relative; } #box2 { position: relative; top :50px; left: 100px; width: 100px ; height: 100px ; background-color: #F90; }
- ベストアンサー
- CSS
- HTMLの画像の位置の指定
HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、ＣＳＳやジャバスクリプトで使用している、 position:absolute; 絶対配置 position:relative; 相対配置 position:static; 通常配置（指定しない場合はこれ） position:fixed; 上のようなポジションタグを使う事は可能ですか？ できれば、そのサンプルのようなものを書いてもらえると 助かります。
- ベストアンサー
- HTML
- cssでコーディング レイアウト重なってしまう
たすけてください かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで 重なり作業ができません。positionの設定がいけないのはわかっています。。。 上から順にheader→nav→a→ｂ（c1,c2）→footerです。 jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、 navがうごくようになったら他の<div>がきゅっとうえによってしましました。 他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。 空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。 以下にソース書きます。 お願いいたします。 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var dy=$(this).scrollTop(); console.log(dy); $("#nav").css("top",150+dy/8); }); }); </script> <body> <div id="wrap"> <div id="header" class="box"></div> <div id="nav" class="box"></div> <div id="a"></div> <div id="b" class="box"> <div class="c_box" id="c1"></div> <div class="c_box" id="c2"></div> </div> <div id="footer"></div> </div> </body> <style type="text/css"> .box { margin:0 auto; width:1260px; position:fixed;} #wrap { weidth:1260px;} #header { height:145px; background:#fcc; } #nav { height:69px; background:#ccc; top:150px; } #a { width:1285px; height:522px; background:#ccf; } #b { height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;} .c_box { width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; } #c1 { position:absolute; left:24px; top:308px; } #c2 { position:absolute; left:465px; top:308px; } #footer { height:100px; background:#fac; } </style>
- ベストアンサー
- CSS
- CSSのボックスの配置他について
<head> <title>Webサイト</title> <style type="text/css"> <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FFEAEF; position: absolute; top: 50px; left: 100px; } { top: 50px; left: 150px; background-color: #FFEAEF } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } --> </style> </head> <body> <div id="example"> <div id="example1"><h1>ボックス1</h1></div> <div id="boxL">ボックス左</div> <div id="boxR">ボックス右</div> </div> </body> </html> とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか？あと、<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- マウスをクリックで画像・・・
マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、 以下の通りにUPすると「エラー」が出てしまいます。 どこが悪いのか解らないので よろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>
- 締切済み
- JavaScript
お礼
ORUKA1951様 すごく丁寧に回答して頂き本当に本当にありがとうございます。 書いてもらっているHTMLを元に、CSSを調べながら円になるレイアウトを試していたら お礼が遅くなってしまいました。すみません。 アドバイス頂いた内容を読めば読む程、自分の知識が間違っている＆足りないことが よく分かりました… まだ自分で書いたCSSだとうまくいっていないですが、取り急ぎお礼を書き込みさせて頂きます！ いつかORUKA1951様みたいに、スラスラHTMLを書けるようになりたいです。(>_<)