質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1397閲覧

複雑に入り組んだ要素を目視でもすぐケアレスミスが分かるようにする方法

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/01/24 18:57

以下ようにdiv要素をたくさん使うのですが、このdiv要素を極力少なく書く方法はありますか?

よろしくお願いします。
CSS

*{ margin:0; padding:0; } #wapper{ width:900px; margin:20px auto; } #header{ margin:20px auto; padding:15px 20px; border:solid 1px #CCC; } h1{ color:green; font-size:58px; } #contents{ border:solid 1px #CCC; padding:10px; overflow:auto; } #left{ float:left; width:45%; } #manner{ margin:0px 10px 20px 10px; border:double 5px blue; overflow:auto; padding:5px; } #manner div{ float:left; width:70%; } #manner img{ float:right; width:25%; height:auto; margin-top:5px; } #syacho3{ margin:auto 10px 20px 10px; border:solid 1px blue; overflow:auto; padding:5px; } #syacho3 img{ float:left; width:25%; height:auto; margin-top:5px; } #syacho3 div{ float:right; width:70%; } #rina3{ margin:auto 10px 20px 10px; border:solid 1px blue; overflow:auto; padding:5px; } #rina3 div{ float:left; width:70%; } #rina3 img{ float:right; width:25%; height:auto; margin-top:5px; } #syacho4{ margin:auto 10px 20px 10px; border:solid 1px blue; overflow:auto; padding:5px; } #syacho4 img{ float:left; width:25%; height:auto; margin-top:5px; } #syacho4 div{ float:right; width:70%; } #right{ float:right; width:45%; } #keigo{ overflow:auto; } #keigo img{ display:block; margin:auto; height:420px; } #sodan{ border:solid 1px blue; overflow:auto; margin:20px auto auto auto; padding:5px; } #sodan div{ float:left; width:70%; } #sodan img{ float:right; width:25%; height:auto; margin-top:5px; } #footer{ clear:both; padding:20px 0px; border:solid 1px #CCC; text-align:center; margin-top:20px; }

HTML

<!DOCTYPE html> <html> <head> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body> <div id="wapper"> <div id="header"> <h1>test</h1> <p>testは、~です。</p> </div> <!--header_end--> <div id="contents"> <div id="left"> <div id="manner"> <div> <p> あかさたなは2まやらわ1あかさたなはまやわあかさたなはまやらわあかさたなはまや わあかさたなはまやらわ </p> </div> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--manner_end--> <div id="syacho3"> <img src="images/lake1web.jpg" alt="見本" /> <div> あかさたなはまやらわ </div> </div> <!--syacho3_end--> <div id="rina3"> <div> あかさたなはまやらわ </div> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--rina3_end--> <div id="syacho4"> <img src="images/lake1web.jpg" alt="見本" /> <div> あかさたなはまやらわ </div> </div> <!--syacho4_end--> </div> <!--left_end--> <div="right"> <div id="keigo"> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--keigo_end--> <div id="sodan"> <div> あかさたなはまやらわ </div> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--sodan--> </div> <!--right_end--> <div id="footer"> 株式会社トラスト </div> <!--footer_end--> </div> <!--contents_end--> </div> <!--wapper_end--> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

何らかの目的があって定義したdiv要素である以上それを省略することは出来ません.

むしろ

  • インデントを付けてHTML文書のツリー構造を可視化する.

一見無駄に見えても, インデントとして挿入した空白文字はあとからどうとでもなる.

  • divと言った役割が不明確な要素の使用を避け, main, header, footer, article, sectionなどと言った**タグそのものに意味のある(しかしレイアウト上はdiv要素と同等な)**要素を使う.

と言ったようにすることで, ミスに気が付きやすくなる方法はあります.

NOTE: この他次のような対策が考えられます.

  • 動作を確認しながら少しづつコーディングする
  • WEBブラウザのHTMLのデバッグ機能を利用する(ソースの表示等)
  • HTMLをサポートするエディタを用いる(タグ対応のリアルタイム表示)
  • HTMLを直接コーディングするのではなくHTMLデザイナを使う
  • HTMLではなくXHTMLを用いる(強力な文法チェックが可能だが, HTMLとの互換性でハマることも)
  • マークダウン記法を用いてHTMLを生成する

NOTE: 後は(当たり前ですが)HTMLで定義されている要素毎の意味・記法・使い方について一つ一つ理解(暗記)していく他ありません.

投稿2018/01/24 19:30

編集2018/01/25 02:28
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

複雑に入り組んだ要素を目視でもすぐケアレスミスが分かるようにする方法

そんな方法はありません。
速く読めるのは綺麗で整頓されている文章だけです。

まずは文章を綺麗で整頓されたものにしてください。
最初の一歩はインデントです。
「HTML インデント 整形」といった文章で検索すれば色々な情報にアクセス出来るでしょう。

以下ようにdiv要素をたくさん使うのですが、このdiv要素を極力少なく書く方法はありますか?

それをdiv病と呼びます。
沢山div要素を宣言すれば楽に画面を表現出来ますからね。

ちょっとエモい感じがしますが、この記事で気づきが得られそうだったので紹介します。
HTMLを15年書いてる僕が語ってみる vol.1

divは少なければ少ない程良いものです。
何故ならば、コードは人が読んで新たなコードを付け加える事もある立派な文章だからです。
無意味な修飾子をダラダラ付けた文章が読みづらいように、無駄なdivの山で入れ子になっているコードも読みづらいものです。
最小限で伝えたい事だけが載っているHTMLだからこそ美しい、それを目指してください。

とは言うものの実際の方法を一言で教える事は出来ません。
良い文章を書くには国語の勉強をしっかり行い、多数の書籍を読み、文法を学習した上で反復することが重要だからです。
HTMLも同様。まずはHTMl5のタグ全てに目を通す事から始めましょう。

投稿2018/01/25 02:03

編集2018/01/25 02:26
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/01/25 02:15

この記事、超刺さりますね。未だにdiv病にかかっています・・・ なのでCSSフレームワークを使うことでだいぶ分かった気になって誤魔化してますねw
miyabi-sun

2018/01/25 02:44

まぁ、JSON返すRestAPI鯖が主流になったり、 今のトレンドはHTMLを純粋な文書として表現する方法を放棄したように見えますからね… 偉い人が寄ってたかってそうなってるので、CSSフレームワークの流れも散々苦悩した挙句の妥協みたいな感じはしますね…
guest

0

インデント。なにはなくともインデント。

インデントとても大事ですよ。
このソースもインデント入れればそこまで見辛くないのでは?

もし私がこのソースをメンテしてくれと言われたら
まず最初にインデントを入れるところから始めます。

投稿2018/01/25 04:27

sk_3122

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問