HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML divとは何ですか？どのように使用されますか？

<div> HTMLで要素をグループ化するために使用される汎用コンテナであり、CSSを使用して要素にスタイルを適用できます。 div要素はデフォルトでは空であり、機能するにはHTML要素で埋める必要があります。 <div> タグはペアで提供され、1つのオープンタグと1つのクローズタグがあります：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 1px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
 
       }
       .blue {
           background-color: royalblue;
           border: none;
       }
       .purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div class="square blue">1</div>
           <div class="square purple">2</div>
 
       </div>
</body>
</html>

<div>について注意すべき最大のこと タグは、ではないということです セマンティックHTML要素。つまり、<div>が何であるかが明確ではないということです。 タグを見ることによって行います（、

、
などとは異なります）

使いすぎると、スクリーンリーダーが関係するアクセシビリティの問題が発生する可能性があります。必ず<div>を使用してください より良い選択となる可能性のあるセマンティックHTML要素がない場合の最後の手段としてのタグ。

<div> コンテナはブロックレベルの要素です。 CSSまたはインラインスタイルを使用して開発者が制御しない限り、ビューポートの幅全体を占めます。さらに、表示プロパティをある種のインライン値またはフレックスに変更しない限り、前後に改行があります。

レイアウトに関しては、divはかなり柔軟です。それらは互いに入れ子にすることができます。そうは言っても、<div> コンテナは段落を壊します-したがって、<div>をネストしないでください <p>内のタグ 鬼ごっこ。さらに、<div>を挿入すると奇妙な異常が発生します <h1>のように見える見出しタグ（

、

など）内のコンテナ 勝ち、<div> 無視されます。

属性

HTML <div> 要素は、HTMLのイベントおよびグローバル属性にアクセスできます。イベント属性は、ユーザーが何らかの方法でWebページを操作するときに使用される属性です。たとえば、ユーザーが画像をクリックしたときのonclickや、ユーザーが要素の上にマウスを置いたときのonmouseoverなどです。グローバル属性は、すべてのHTML要素で使用できる属性です。

これらのHTML属性の完全なリストは、MozillaDeveloperNetworkのWebサイトにあります。

スタイルを設定する方法

<div>のスタイリング かなり簡単で、複数の方法で実行できます。インラインスタイリングは、<div>にスタイル属性を追加することで実行できます。 スタイルのプロパティと値が文字列として追加されます：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Inline Styling</title>
<body>
       <div style="width:500px;border: 3px solid black; padding: 20px;">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div style="background-color: royalblue; border: none;">1</div>
           <div style="background-color: purple; border: none;">2</div>
       </div>
</body>
</html>

スタイリングは<style>でも実行できます <head>のタグ HTMLドキュメントまたは外部スタイルシートの。ここが<div> classまたはid属性が機能します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

クラスは、同じ方法でスタイルを設定する複数の要素で使用できます。 IDは、HTMLドキュメントで1回だけ使用できます。次のように考えてください。同じ学年で同じ年齢、教師、科目の複数の生徒をグループ化できますが、各生徒には、人間としての自分を表す独自の個人ID属性があります。

> 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 3px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
 
       }
       #blue {
           background-color: royalblue;
           border: none;
       }
       #purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div id="blue" class="square">1</div>
           <div id="purple" class="square">2</div>
       </div>
</body>
</html>

class属性とid属性は、1つの<div>で同時に使用できます。 。 idはclass属性よりも具体的なものとして扱われるため、その特定の<div>に固有のスタイル id属性を使用できるため、クラスのスタイルをオーバーライドできます。



結論

今日、私たちは<div>が何であるかを学びました つまり、その属性とは何か、要素のスタイルはどのようになっているのかです。 displayプロパティが<div>に与える影響の詳細については コンテナについては、ボックスモデルとフレックスボックスモデルに関するCareerKarmaの記事を参照してください。


  1. トップレベルドメイン（TLD）とは何ですか？

    ドメイン名を入力するたびに、 .com のように、ドットの後に何かを入力する必要があります。 、 .net 、 .org 、など。これらの3文字は、入力したアドレスがどこかに移動するために不可欠であり、トップレベルドメイン（TLD）と呼ばれます。 3文字は常にドメイン名の末尾にありますが、それは重要ですか？この3文字を読むだけで、サイトにどのような情報があるのか​​わかりますか？入力しないと、間違ったサイトに移動したり、どこにも移動しなかったりする可能性があります。 トップレベルドメインまたはTLDとは何ですか？ トップレベルドメインは、インターネットドメイン拡張またはドメインサフィッ

  2. Windows Sysinternals:その概要と使用方法

    Windows コンピューターを完全に制御したいと思ったことはありませんか?ほぼすべての Windows プロセスまたはアプリケーションの内部を確認できるだけでなく、アプリケーションがアクセスしているファイルやレジストリ エントリをリアルタイムで表示できるというのは素晴らしいことです。 最も評判が良く強力な Windows システムおよび管理ツールキットの 1 つは Sysinternals です。ほとんどのユーティリティは単純な EXE ファイルであり、USB フラッシュ ドライブに配置することで、システム管理用の Windows ポータブル アプリのコレクションに追加できます。 Wind