1.フォームを使用し、下のようなサイトを作る場合
このようなコードで作ったのですが、どのような書きかたがスマートなのでしょうか?
(※商品選択からカートに入れるボタンまでの間に、他に要素がたくさんあります。)
よろしくお願いいたします。
<div id="header">
・
・
・
</div>
<div id="contents">
<form>
<input>
<select>
・ ←商品選択フォーム
・
・
</select>
</div>
<div id="footer">
・
・
・
<input>←カートに入れるボタン
</form>
</div>
No.3
- 回答日時:
>その場合の記述はどのようになるのでしょうか?
リキッドデザイン・・ウィンドウ幅に制約されない・・簡単なサンプル書いておきます。(画像は用意してください。)
ご覧になるとわかるとおり、HTMLは文書構造しか書いていませんから簡単ですね。誰でも手を入れられるはずです。
一方のスタイルシートは、HTMLの文書構造を基に書いていますから、HTMLを開かなくても修正が出来るはずです。
このように文書構造とプレゼンテーションを分離することで、とても簡単になり、どのようにでもデザインできます。
ポイントはHTMLは文書構造しか書かない・・。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済みのHTML4.01strict+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">
<!--
html,body{margin:0;padding:0;}
p{margin:0 auto;text-indent:1em;}
div.header{height:100px;background-color:red;}
div.header h1{margin:0 auto;}
div.section{padding-bottom:100px;}
div.section div.section{padding-bottom:10px;}
div.section ul,div.section ul li{display:block;list-style:none;margin:0;padding:0;}
div.section ul,div.section div.section,div.section h2{margin-left:30%;}
div.section ul li ul{margin-left:0;}
div.section ul li{width: 200px;height:300px;float:left;margin-left:10px;}
div.section ul li ul li{float:none;height:auto;}
div.section div.section{clear:left;}
div.footer{position:fixed;width:100%;background-color:gray;height:100px;bottom:0;font-size:0.9em;}
div.footer>*{margin:0 50% 0 0}
form input[type="submit"]{position:fixed;bottom:20px;right:20px;z-index:10;font-size:2em;}
#contentTable{position:fixed;top:120px;left:10px;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>商品一覧</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section" id="productList">
__<h2>商品を選択してください。</h2>
__<form action="#">
___<ul>
____<li><img src="./images/photo/01.jpg" width="200" height="200" alt="商品1">
_____<ul>
______<li>なんたらかんかたら</li>
______<li>価格:10,000円</li>
______<li>かごに入れる<input type="text" size="2" name="p1" value=""></li>
_____</ul>
____</li>
____<li><img src="./images/photo/02.jpg" width="200" height="200" alt="商品2">
_____<ul>
______<li>なんたらかんかたら</li>
______<li>価格:10,000円</li>
______<li>かごに入れる<input type="text" size="2" name="p2" value=""></li>
_____</ul>
____</li>
____<li><img src="./images/photo/03.jpg" width="200" height="200" alt="商品3">
_____<ul>
______<li>なんたらかんかたら</li>
______<li>価格:10,000円</li>
______<li>かごに入れる<input type="text" size="2" name="p3" value=""></li>
_____</ul>
____</li>
____<li><img src="./images/photo/04.jpg" width="200" height="200" alt="商品4">
_____<ul>
______<li>なんたらかんかたら</li>
______<li>価格:10,000円</li>
______<li>かごに入れる<input type="text" size="2" name="p4" value=""></li>
_____</ul>
____</li>
____<li>いくつでも増やせます。ウィンドウ幅を変えてもOK!!</li>
___</ul>
___<p><input type="submit" name="productList1" value=" バスケットに入れる "></p>
__</form>
__<div class="section" id="tediously1">
___<h3>御託1</h3>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
___<p>ここに御託を並べる・・・</p>
__</div>
__<div class="section" id="tediously2">
___<h3>御託2</h3>
___<p>ここに御託を並べる・・・</p>
__</div>
__<div id="contentTable">
___<ol>
____<li><a href="#productList">商品</a></li>
____<li><a href="#tediously1">御託1</a></li>
____<li><a href="#tediously2">御託2</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
No.1
- 回答日時:
formが他の要素をまたいでいます。
HTML5的に記述すると<section>
<form>
コントロール
送信
</form>
</section>
でなければなりません。
<div class="header">
ヘッダ
</div>
<div class="section">
<form>
フォームコントロール
(送信ボタン)
</form>
</div>
<div class="footer">
フッタ文書情報など
</div>
で良いです。このときdiv.sectionをstaticで置いておけば、良いです。
HTMLはデザインのために書くものではありません。HTMLのデザイン機能なんてしょぼいものです。デザインなどは考えずに、きちんと書きましょう。
早速のご回答ありがとうございます。
そうなんです、他の要素をまたいでいるんです。。
コンテンツの部分で商品を選択し
その情報を(固定)フッターの送信ボタンで送りたいんです。
その場合の記述はどのようになるのでしょうか?
・・・フォームを2つに分ければいいのでしょうか?
お手数をおかけしますが、よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
画像にリンクを張ると画像がず...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
ボタンを横に並べて表示させる方法
-
<li>で改行する横並びのメニュー
-
<ul><li></li></ul>にするメリ...
-
htmlで行頭を下げる方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
css ol liにdisplay:inlineを設...
-
ulタグやliタグの中でbrタグ...
-
【至急】ul li 行間調整ができ...
-
3番目のBoxだけずれる
-
jQuery-もっと見るボタンをスマ...
-
bxsliderの画像が左によってしまう
-
CSS「table-cell」で横並びにし...
-
フォームボタンがフッターにあ...
-
HTMLで組織図を作成する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報