一般的な初心者HTMLレイアウトエラー

読者の皆さん、こんにちは！ 2011年からウェブサイトを公開しています。 当時のほとんどのコーダーと同様に、私はビデオチュートリアルから自分で勉強しました。 この間、ブロックの配置の選択、要素のタグの選択、そしてもちろんクラスの名前と間違えられることがよくありました。 この記事では、間違いを共有したいと思います。

メニューと検索のあるトップバー

ページの最初のブロックは、メニューと検索を含むフルスクリーンに広がるトップパネルです。 まず、ブロックの一般的な構造を見てみましょう。

<div class="header"> <header id="header" class="wrapper"> <div class="menu_block"> <!-- menu --> </div> <div class="search_block"> <!-- search --> </div> </header> </div> 

見たときに最初に目を引くのは、ヘッダークラ​​スでdiv要素を使用し、ヘッダー識別子でheader要素を使用することです。 このコードを見ているレイアウト設計者の100％は、帽子が本当にどこにあるのか理解できないと確信しています。 したがって、次のように要素を元に戻す必要があります。

 <header id="header" class="header"> <div class="wrapper"> <div class="menu_block"> <!-- menu --> </div> <div class="search_block"> <!-- search --> </div> </div> </header> 

次に、ヘッダー識別子の用途を決定する必要があります。 これを行うには、CSSで次のカスケードを見つけます。

 .header{..} #header{...} #header .search_block{...} 

ヘッダークラ​​スとヘッダー識別子を使用してCSSカスケードを実行している状態はわかりませんが、彼らが言うように、「あなたは歌から言葉を捨てることはありません」。 この場合、2つのCSSカスケードの作成が無意味であるだけでなく、CSSでidを使用すると、CSSを再利用できなくなり、その結果、重複が発生します。 したがって、ヘッダークラ​​スのみを使用します。 コードを次のように変更します。

 <header class="header"> <div class="wrapper"> <div class="menu_block"> <!-- menu --> </div> <div class="search_block"> <!-- search --> </div> </div> </header> 

 .header{..} .header .search_block{...} 

しかし、率直に言って、私はこれがこのサイトの見出しであることに大きな疑念を抱いています。 私はこれがトップパネルだともっと信じたいです。 したがって、ヘッダークラ​​スの名前をトップパネルに変更することをお勧めします。

 <div class="top-panel"> <div class="wrapper"> <div class="menu_block"> <!-- menu --> </div> <div class="search_block"> <!-- search --> </div> </div> </div> 

 .top-panel{..} .top-panel .search_block{...} 

メインコンテナのレイアウト

構造をさらに進めて、ラッパークラスでdivを満たします。

 <div class="top-panel"> <div class="wrapper"> <!-- menu and search --> </div> </div> 

CSSの図を完成させるには：

 .wrapper{ margin: 0 auto; width: 940px; padding: 0 10px; } 

ラッパーという言葉は、ラッパーとして翻訳できます 。 それが何を包むかは明らかではありませんか？ そして、このブロックはまったくラッパーではありません。 それで、このクラスで興奮しました。

この要素は、サイトの幅を中央に配置して示すのに役立ちます。 実際、これは他の全員が配置されるページのメインブロックです。 したがって、それをmain-containerと呼ぶのは論理的です。

 <div class="top-panel"> <div class="main-container"> <!-- menu and search --> </div> </div > 

メニュー

次に、以下の構造を持つメニューをさらに詳しく調べます。

 <div class="menu_block"> <ul class="menu"> <li class="menu_item"><a href="#" class="item"> </a></li> <li class="menu_item"><a href="#" class="item"> </a></li> <li class="menu_item"><a href="#" class="item"></a></li> <li class="menu_item"><a href="#" class="item"></a></li> <li class="menu_item"><a href="#" class="item"></a></li> <li class="menu_item"><a href="#" class="item"></a></li> <li class="menu_item"><a href="#" class="item"></a></li> </ul> </div> 

そして、次のCSS：

 .menu_block{...} .menu{...} .menu_item{...} .item{...} .item:hover{...} 

このコードを見て、私が最初に尋ねたいのは、なぜulタグがdivに埋め込まれているのですか？ ulタグとdivタグはブロック要素であるため、この場合、ulタグをdivタグでラップする必要はありません。

 <ul class="menu_block menu"> <li class="menu_item"><a href="#" class="item"> </a></li> ... </ul> 

さらに、_block、_listなどのクラスに「説明」を追加するという非常に悪い習慣がありました。 このメソッドは、コードをより透明にするのに役立ちません 。 これは意味のない余分なトートロジーであり、簡単に破ることができます。 したがって、次のようにコードを変更します。

 <ul class="menu"> <li class="menu_item"><a href="#" class="item"> </a></li> ... </ul> 

 .menu{...} .menu_item{...} .item{...} .item:hover{...} 

次に、アイテムクラスとのリンクを見てください。 このクラス名は非常に一般化されています。 6か月後にこのクラスを使用する理由を尋ねられた場合、私は答えません。 HTMLを見ていなければ、このレイアウトを作成していても答えません。 クラスの名前は要素の意味を反映する必要があることに注意してください。

次に、コードを変更します。

 <ul class="menu"> <li class="menu__item"><a href="#" class="menu__link"> </a></li> ... </ul> 

 .menu{...} .menu__item{...} .menu__link{...} .menu__link:hover{...} 

さて、4泊でも電話をかけて、なぜmenu__linkクラスがあるのか​​と尋ねたら、メニューのリンクのスタイルを設定するために答えます。

検索する

次に、次の構造の検索を検討します。

 <div class="search_block"> <form class="search"> <input type="text" class="search_field" placeholder="  "> <button type="submit" class="search_icon"> <img src="http://images/search_icon.png" alt=" "> </button> </form> </div> 

ご覧のとおり、ここでは、以前と同様に、私のトートロジー病の症状と、ブロックdivのフォームブロック要素の過剰なネストがあります。 このような問題を解決する方法をご理解いただけましたら、お任せください。 解決する必要があります！ しかし、あなたが望んでいないなら、答えは次の段落にあります。

上記のエラーに加えて、このフラグメントにはさらにいくつかのエラーがあります。 まず、これは入力フィールドの名前属性ではありません。

2番目は、検索ボタンのsearch_iconクラスの名前です。 繰り返しますが、彼らがこの要素が何のためであるかを私に尋ねた場合、再び私は正しい答えに名前を付けません。 したがって、クラスをsearch__buttonに変更します。

第三に、HTMLで拡大鏡付きの装飾アイコンを使用します。 なぜこれが間違いですか？ なぜなら、imgタグを使用してページに挿入されたすべての画像は、検索ロボットによってインデックス付けされるからです。 デコレーション要素のインデックス付けにはあまり意味がないので、HTMLのページのコンテンツに関連する画像のみを残すことをお勧めします。

では、HTMLを変更しましょう。

  <form class="search"> <input type="text" class="search__field" name="query" placeholder="  "> <button type="submit" class="search__button"></button> </form> 

今はすべて順調です...しかし、やめてください！ 絶対に空のボタンができました！ これはレイアウトの非常に悪い調子です。 CSSが読み込まれない場合、またはユーザーが電子リーダーを使用してサイトにアクセスした場合、ユーザーはそれを単に表示したり聞いたりしません。 したがって、「検索」という単語を追加する必要があります。この単語は、text-indentプロパティを使用して非表示にします。

  <form class="search"> <input type="text" class="search__field" name="query" placeholder="  "> <button type="submit" class="search__button"></button> </form> 

次に、CSSに進みましょう。

 .top-panel .search{...} .top-panel .search .search_field{...} .top-panel .search .search_field:focus{...} .top-panel .search .search_button{...} 

ご覧のとおり、CSSセレクターでネストチェーン全体を示しました。 私は常にそのようなエラーに遭遇します。 このエラーを詳しく見てみましょう。

まず、左から右への読み取りに慣れているため、ブラウザーは最初にトップパネルクラスの要素を見つけ、次にその内部で検索クラスの要素を見つけると考えています。 しかし、実際にはその逆です！ ブラウザはCSSセレクターを右から左に読み取ります。したがって、最初に検索クラスで要素を見つけ、次にトップパネルクラスで先祖を見つけます。

第二に、すべての初心者タイプセッターは、彼らがサイトを作り上げていると考えており、他の誰もそれに触れることはありません。 そして彼は一生この状態で生きます。 しかし、実際には、元の形式のレイアウトは、プログラマーがそれに触れる瞬間まで正確に存続します。

しかし、これはそれほど悪くはありません。 訪問しているサイトを少しだけ作り上げている場合は、遅かれ早かれ変更する必要があります。 検索ボックスをページ上の別の場所に移動するとします。 たとえば、地下室。 現在の実装では、HTMLとCSSの両方を変更する必要があります。 これは、要素の厳密なネストが示されているためです。 CSSプロパティを複製する必要があります。

この問題を解決するには、次のようにCSSを変更する必要があります。

 .search{...} .search__field{...} .search__field:focus{...} .search__button{...} 

すべてがシンプルです！ これで、検索、検索フィールド、さらにはボタンを好きな場所に移動できます。

メニューの配置と検索

それでは、メニューの配置と検索に移りましょう。 このデザインは、メインコンテナの左側でメニューが押され、右側で検索が行われていることを明確に示しています。 明らかに、フロート要素を使用する必要があります。 現在の実装は次のようになります。

 .top-panel{ background-color: #ededed; min-width: 960px; height: 40px; } .menu{ float: left; } .search{ float: right; } 

ここの間違いは何ですか？ クラストップパネルの要素が40ピクセルの高さに設定されているという事実により、ブロックは本来の外観になります。 しかし、Webインスペクターを使用してmain-containerクラスで要素を検査すると、その高さがゼロであることがわかります。 これは、フロート要素を使用する場合の副作用です。 これで何ができますか？ 初心者のレイアウトデザイナーのロジックでは、高さを設定するだけです。 そのため、次のようなものが表示されます。

 .top-panel{ background-color: #ededed; min-width: 960px; } .top-panel .main-container{ height: 40px; } 

主な問題はカスケードのネストでさえありませんが、main-container classで要素の高さに固定値が指定されていることです。 レイアウトでは、ブロックの高さを要素のコンテンツに合わせて調整する必要があります。 したがって、修正することはできません。

さて、あなたは高さを設定することはできませんが、この状況を修正する方法は？ 非常にシンプルで信頼できる方法があります。 これは、clearプロパティと、float要素の背後または親ブロックの最後に両方の値を持つ要素を追加することです。この場合のように。

そのような要素を追加するには、疑似要素：afterを使用します。

 .clearfix:after{ content: ""; display: block; clear: both; } 

HTMLは次の形式を取ります。

 <div class="top-panel"> <div class="main-container clearfix"> <ul class="menu"> <!-- menu --> </ul> <form class="search"> <!-- search --> </form> </div> </div> 

CSSは次のように変更されます。

 .top-panel{ background-color: #ededed; min-width: 960px; } .menu{ float: left; } .search{ float: right; } 

では、次の質問について考えてみましょう。 正しいレイアウトを使用すると、ブロックをページ内で自由に移動できると既に述べました。 しかし、現在の実装では、floatプロパティが原因でこのような普遍性は達成されません。 どうする？ トップパネルのメニューが左側にあり、検索が右側にあることは確かです。 したがって、floatを記述する追加のクラスを作成できます。

 <div class="top-panel"> <div class="main-container clearfix"> <ul class="menu top-panel__menu"> <!-- menu --> </ul> <form class="search top-panel__search"> <!-- search --> </form> </div> </div> 

CSSは次のように変更されます。

 .top-panel{ background-color: #ededed; min-width: 960px; } .top-panel__menu{ float: left; } .top-panel__search{ float: right; } 

メニューのスタイル

ブロックのスタイルを設定するには、次のCSSを使用します。

 .top-panel__menu{ float: left; } .menu{ width: 620px; padding: 12px 0; list-style: none; } .menu__item{ display: inline-block; } .menu__link{ color: #353743; font-size: 14px; margin-right: 15px; text-decoration: none; } .menu__link:hover{ text-decoration: underline; } 

ここにどんな間違いがありますか。

まず、メニューの上部と下部のパディングは12ピクセルです。 これは、ブロックの端からインデントするために必要です。 すべてがうまくいくようです。 しかし、トップパネル全体を見ると、検索には上からのインデントもあることがわかります。 したがって、一般的なインデントを親ブロックに設定することをお勧めします。 たとえば、.top-panel。 そして、これは既に外部インデントになるため、既にマージンを使用して、メニューに欠損値を追加します。

 .top-panel{ background-color: #ededed; min-width: 960px; padding-top: 7px; padding-bottom: 7px; } .top-panel__menu{ float: left; } .menu{ width: 620px; margin-top: 5px; margin-bottom: 5px; list-style: none; } 

第二に、この場合、メニューは幅を指定する必要がありません。 初期状態のレイアウトは長生きしないことを覚えていますか？ ライブサイトにはより多くのメニュー項目がある場合があるため、自由に増やす必要があります。

第三に、何らかの理由で、メニュー項目間のインデントはリンクに設定されますが、これはli要素に対してより論理的です。 些細なことですか？ しかし、レイアウトには些細なことはありません！

変更されたCSSメニューは次のようになります。

 .top-panel{ background-color: #ededed; min-width: 960px; padding-top: 7px; padding-bottom: 7px; } .top-panel__menu{ float: left; } .menu{ margin-top: 5px; margin-bottom: 5px; list-style: none; } .menu__item{ display: inline-block; margin-right: 15px; } .menu__link{ color: #353743; font-size: 14px; text-decoration: none; } .menu__link:hover{ text-decoration: underline; } 

検索スタイル

ブロックのスタイルを設定するには、次のCSSを使用します。

 .top-panel__search{ float: right; } .search{ padding: 5px 0; } .search__field{ width: 135px; height: 25px; background-color: #D2D2D2; padding: 0 10px; font-size: 12px; transition: width 0.9s 0s; vertical-align: middle; } .search__field:focus{ width: 200px; outline: none; } .search_button{ position: relative; right: 4px; top: 1px; background: none; vertical-align: middle; } 

top-panelクラスを使用して要素にパディングを追加したという事実により、パネルの上端から検索までの距離が長くなりました。 したがって、検索クラスから削除します。

また、以前、検索ボタンのレイアウトを変更したため、この段階ではデザインとは異なります。 ボタンのサイズを設定し、backgorundプロパティを使用して虫眼鏡アイコンを追加する必要があります。 text-indentを設定してテキストを非表示にすることも必要です。

 .search_button{ width: 25px; height: 25px; position: relative; right: 4px; top: 1px; text-indent: -9999px; background: url("../images/search_icon.png") no-repeat 0 0; vertical-align: middle; } 

それでは、エラーを見てみましょう。 最初に目を引くのは、ボタンの位置の使用です。 Webインスペクターでposition：relativeを無効にすると、入力フィールドとボタンの間の距離が表示されます。 入力フィールドとボタンの両方がインラインブロック要素であるために表示されます。

これらの問題を解決するには、floatプロパティに値leftを設定し、ボタンから位置を削除するだけです。

 .search__field{ width: 135px; height: 25px; background-color: #D2D2D2; padding-right: 10px; padding-left: 10px; font-size: 12px; transition: width 0.9s 0s; float: left; vertical-align: middle; } .search_button{ width: 25px; height: 25px; float: left; text-indent: -9999px; background: url("../images/search_icon.png") no-repeat 0 0; vertical-align: middle; } 

次に、以前に作成したclearfixクラスを検索クラスを使用して要素に追加します。

  <form class="search clearfix"> <input type="text" class="search__field" name="query" placeholder="  "> <button type="submit" class="search__button"></button> </form> 

そして、それは一種の作品です。 しかし！ 今では、経験豊富なタイプセッターでも遭遇するお気に入りのミスがあります。 CSSの入力フィールドとボタンをもう一度見てみましょう。

 .search__field{ width: 135px; height: 25px; background-color: #D2D2D2; padding-right: 10px; padding-left: 10px; font-size: 12px; transition: width 0.9s 0s; float: left; vertical-align: middle; } .search_button{ width: 25px; height: 25px; float: left; text-indent: -9999px; background: url("../images/search_icon.png") no-repeat 0 0; vertical-align: middle; } 

両方のクラスには、垂直軸に沿ってインラインブロック要素を整列できるvertical-alignプロパティがあります。 しかし！ これでブロック要素ができました！ floatプロパティは、要素のフローに影響を与え、ブロック化します。 これは常に覚えておく必要があります。 したがって、要素の垂直方向の配置を削除します。

 .search__field{ width: 135px; height: 25px; background-color: #D2D2D2; padding-right: 10px; padding-left: 10px; font-size: 12px; transition: width 0.9s 0s; float: left; } .search_button{ width: 25px; height: 25px; float: left; text-indent: -9999px; background: url("../images/search_icon.png") no-repeat 0 0; } 

おわりに

私が記事を書き始めたとき、私は自分の間違いの説明がそのような大量のテキストを占めるとは思わなかった。 したがって、次のブロックのエラーの解析を続けたい場合は、コメントでこれについて書いてください。