うーん・・・

CSSの画像配置について質問です。

締切済

質問者：chenkos
質問日時：2015/03/12 09:56
回答数：2件

CSSで、パズルのような複雑に入り組んだボタンの配置を作りたいのですが、floatを使ってもなかなかできないのでなにかいい方法ありますか？
初心者なのでできるだけ簡略にお願いします

イメージ画像はこちらです。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2015/03/12 11:41

とても大事なことが書かれていない(^^)

それはナビゲーションですか？
[HTML4.01]
文書構造は、class名で指定しているはず・・
『DIV要素・・は、・・・class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ですから
<div class="nav">
　<ul>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
・・・・・・・・・・
　</ul>
</div>
[HTML5]では、他により適切な要素があるときはDIVは使えないので
『NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )』
<nav>
　<ul>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
・・・・・・・・・・
　</ul>
</nav>

きちんとこのようにマークアップされていると、お好きなようにどんな形でもデザインできますよ。
[例]
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://ichiya.com/WebService/Howto/sample/HTML/n … )
にて、(Chrome以外の)ブラウザで、[表示]メニューから［スタイル(シート)］に進み、「画像の上に配置」を選択してみてください。
　これはHTML4.01strictで作成されていて、かつHTMLには文書構造しか書かれていませんから、デザインは自由に変更できます。
　方法としては、それらのナビゲーションを含む親要素を(reltativeなど)strict以外で配置して、園内部にabsoluteで配置すれば良いです。サイズは%でリキッドにしても良いでしょう。

　決して難しいものではありませんよ。
<div class="header">
　<h1>・・・・</h1>
　<div class="nav">
　　<h2>製品</h2>
　　<ul>
　　　<li><a href="/products1">製品</a></li>
　　　<li><a href="/products2">製品</a></li>
　　　<li><a href="/products3">製品</a></li>
　　　<li><a href="/products4">製品</a></li>
　　　<li><a href="/products5">製品</a></li>
　　　<li><a href="/products6">製品</a></li>
　　　<li><a href="/products7">製品</a></li>
　　　<li><a href="/products8">製品</a></li>
　　　<li><a href="/products9">製品</a></li>
　　　<li><a href="/products10">製品</a></li>
　　</ul>
　</div>
</div>
なら、
div.header div.nav ul,div.header div.nav li{list-style-type:none;margin:0;padding:0;}
div.header div.nav ul li a{
width:23%;height:30%;/* 基本サイズ */
position:absolute;/* 絶対配置 */
display:block;
}
/* 基本位置 */
div.header div.nav ul li a{top:0%;}
/* 4項目以降の上からの位置 */
div.header div.nav ul li+li+li+li+li a{top:33%;}
/* 7項目以降の上からの位置 */
div.header div.nav ul li+li+li+li+li+li+li+li a{top:66%;}
/* 各リンク先の左からの位置指定 */
div.header div.nav ul li a[href="/products1"]{left:0%;}
div.header div.nav ul li a[href="/products2"]{left:25%;}
div.header div.nav ul li a[href="/products3"]{left:50%;}
div.header div.nav ul li a[href="/products4"]{left:75%;}
div.header div.nav ul li a[href="/products5"]{left:0%;}
div.header div.nav ul li a[href="/products6"]{left:25%;height:63%;}/* 特殊な縦長 */
div.header div.nav ul li a[href="/products7"]{left:50%;width:48%;}/* 特殊な横幅 */
div.header div.nav ul li a[href="/products8"]{left:0%;}
div.header div.nav ul li a[href="/products9"]{left:50%;}
div.header div.nav ul li a[href="/products10"]{left:75%;}

個別に指定していくほうが分かりやすいのでメンテナンス性はよいでしょう。
[例]
div.header div.nav ul li a[href="/products1"]{
left:0%;top:0%;
width:23%;height:30%;
background-image:url();
background-size:cover;
}
位置やサイズが自在に変更できますから・・
ポイント
※ HTMLには文書構造以外書かないこと。(デザインのために書いたら後で泣く)デザインはスタイルシートで
※ 位置はabsoluteで指定すると楽です。

★サンプルは次回で

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2015/03/12 11:42

[サンプル]

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済みのHTML4.01sttrict + CSS2.1　ウェブ標準
★リキッドですから、パソコンでもスマホでも使えるはず。ウィンドウ幅を変えてみましょう。
★タブは＿に置換してあるので戻す。

<!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>
＿＿<p>このページでは・・・・</p>
＿<div class="nav">
＿＿<h2>製品</h2>
＿＿<ul>
＿＿＿<li><a href="/products1">製品1</a></li>
＿＿＿<li><a href="/products2">製品2</a></li>
＿＿＿<li><a href="/products3">製品3</a></li>
＿＿＿<li><a href="/products4">製品4</a></li>
＿＿＿<li><a href="/products5">製品5</a></li>
＿＿＿<li><a href="/products6">製品6</a></li>
＿＿＿<li><a href="/products7">製品7</a></li>
＿＿＿<li><a href="/products8">製品8</a></li>
＿＿＿<li><a href="/products9">製品9</a></li>
＿＿＿<li><a href="/products10">製品10</a></li>
＿＿</ul>
＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>