私たちが Web 上で見つけて使用するほぼすべての Web サイトの構造は、テキスト ファイルを分類するための標準化システムである HTML を使用して作成されています。改ページ、段落、太い文字、斜体、その他の機能はすべて HTML を使用して追加されます。 HTML は、ブラウザーにコンテンツの処理方法を指示するタグを使用することで、この構造の作成に役立ちます。
たとえば、単語をstrong>bold/strong>タグの間に配置して、太字に見せます。開始タグ (/) は太字の終了位置を示し、最初のタグ (/) は太字の開始位置を示します。これは、ほとんどの Web ページの基盤として機能します。したがって、コードを学習している場合は、ここから始めることになります。
HTML にスペースを追加する方法
単語間の 1 つのスペースを超えて、ブラウザーに表示する HTML テキストに入力した空白スペースはすべて無視されます。その結果、文書内に必要な空白スペースをプログラムする必要があります。 HTML では、テキストのどの行にもスペースを追加できます。たとえば、HTML オブジェクトを使用して、表や段落のコンテンツに空白スペースを挿入できます。 HTML には空白スペースに対応するキーボード文字がないため、エンティティを入力して各スペースを追加する必要があります。
簡単そうに見えますが、HTML にスペースを追加するのは難しいかもしれません。これに対処するには、少なくとも 5 つの異なるアプローチがあります。
このトレーニングを通じて、私たちは多くの事例を目にします。また、より精巧な空間形式を使用する方法も示します。
すべて大文字のコマンド Excel
これらはすべて、CSS を使用せずにプレーン HTML で可能です。ただし、HTML にスペースを追加するには、CSS を使用するのが最適であることに注意してください。
ASCII スペースはどのようなものですか?
スペースは ASCII 記号 20 で表されます。ただし、これは単に慣例として受け入れられているだけです。
HTML で使用できるスペースは 5 種類あります。それらは訓練されていない目には同じように見えますが、いくぶん異なる機能を持っています。
キーボードのタブ キーを押すことをシミュレートするタブ文字も、別のオプションです。キーボードの Enter キーを押すことをシミュレートするキャリッジ リターン文字も、別の例です。
非改行スペース:
宇宙で：
全角スペース:
薄いスペース:
標準スペース:
改行 (リターン):
タブ文字:
左側は次のことを表します。 キャラクター 、右辺は HTMLコード。
空間内のキャラクターの幅はどれくらいですか?
スペース文字には、次の 4 つの標準幅があります。
HTML のスペース記号は何を意味しますか?
最も広く使用されている HTML エンティティです。
ダブルJavaとは何ですか
このテキストをスペースに埋めるには、テキストを投げてみてください。
たとえば、フレーズの後に 2 つのスペースを追加したいのに、Web サイトのレンダリング エンジンが独自にスペースの 1 つを削除していると想像してみましょう。スペースを 2 つ追加するには、次のように入力できます。
ホワイトスペース: それは何ですか?
表示されない文字は空白と呼ばれます。それらは次のもので構成されます。
- スペース、
- タブ、および
- 改行 (キャリッジ リターン、ライン フィード、またはその両方)、
なぜこれが重要なのでしょうか?
たとえば、これらの文字はワード プロセッサでは表示されませんが、テキストのスペースと書式設定に影響を与えます。ブラウザーは、HTML 内の多数の空白文字を 1 つのスペースに凝縮します。これは、他のマークアップ言語とは異なります。
この HTML では単語の間にいくつかのスペースがあり、各行は CRLF (キャリッジ リターン、ラインフィード) 文字で終わります。すべての空白文字はブラウザによって折りたたまれます。
例
良いものにはもっと時間がかかります。
出力：
スペースの挿入
- スペースを増やすには、テキストの非改行スペース記号 ( ) を使用します。
- CSS パディング プロパティは、さまざまな状況で要素内のスペースを増やすために使用できます。
- CSS のマージン属性を使用すると、要素の周囲に余分なスペースを追加できます。
非改行スペースは便利ですが、ブラウザでのマテリアルの表示に支障をきたす可能性があるため、過度に使用しないでください。さらに、Web ページ上の要素をインデントしたり中央揃えにしたりするなど、スタイル目的で非改行スペースを使用することは避けてください。文体の要求は代わりに CSS 経由で処理する必要があります。
エンティティに加えて、HTML は多数の隣接する空白スペースに対して次の追加エンティティもサポートしています。
文字エンティティ はスペースを表すために使用されます。 En は、8 ピクセル、つまり em の幅 (16 ピクセル) の半分に相当する測定単位です。
コンテンツ間のエンスペースの構文は次のとおりです。 以下は、HTML &ensp エンティティの使用方法の例です。
これは、スペース エンティティの例です。
出力：
上記の例では、 エンティティは HTML にスペースを追加するために使用されており、その幅は 8 ピクセルです。近隣の複数の場所でも使用できます。
書式設定と間隔の維持
指定した書式設定と間隔を維持したい場合は、次の 2 つの選択肢があります。
アリ対メイブン
- HTML フォーマットとスペースの追加
- を使って
tag.
「pre」タグの使用
これらの結果は、
のタグ
tag:
例
pre> Good things take more time
出力：
はい
tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn't always the best option. HTML spacing is a more popular method.</pre>
HTML フォーマットとスペースの追加
代わりに、次のような HTML 要素とシンボルを含めることもできます。
良いことは起こるだろう
もっと時間がかかります。
出力：
改行は必要です
要素。
非改行スペース:
ブラウザでは、非改行スペース文字 () で追加されたスペースは折りたたまれません。
さらに、名前が示すように、ブラウザがそこで 2 つの単語を分割するのを防ぎます。
良いものにはもっと時間がかかります。
出力：
文字列の連結
このモデルでは、テキストの先頭に向かって 10 個のスペースが追加されます。もう一つは ' の間に置かれます かかります ' スペースの制限により、文が折り返されても分離されません。
パディング属性
要素の内部スペースは、CSS のパディング属性によって増加します。
値は 1 ～ 4 の範囲で、上、右、下、右側から始まります。
の 「ディビジョン」 要素にはすべての辺に 20 ピクセルのパディングがあります。
Inner spacing is 20px with a div attribute
出力：
マージン属性
- CSS margin 属性を使用すると、要素の周囲に余分なスペースが追加されます。
- 値は 1 ～ 4 の範囲で、上、右、下、右側から始まります。
の 「ディビジョン」 要素には四方に 40 ピクセルの余白があります。
Outer spacing is 20px using the div and margin attribute
出力：
パディングとマージン
- パディングとマージンはどちらも要素のスペースを増やします。
- パディングにより、要素のコンポーネントと見なされる空白が残ります。
- マージンによって作成されたスペースは、要素の境界の外側に存在するとみなされます。
- クリック領域、背景色、および Web サイトのその他の属性は、この変動の影響を受けます。
HTML にスペースを追加するのは、スペースバーを押し続けるだけと同じくらい簡単だと思われるかもしれません。しかし、それは物事の仕組みではありません。スペースバーを複数回押しても、テキスト文書の場合のように近くに空白スペースが追加されることはありません。これを HTML で行うと、ブラウザは近くの空白スペースをすべて 1 つに結合します。 HTML で複数のスペースを使用すると何が起こるかを示すために、例を見てみましょう。
そのため、スペースバーを何度も使用した後は、空白スペースを追加できなくなります。
出力：
上の例に見られるように、HTML でスペースバーを繰り返し押すことにより、Web ページに多数の連続した空白スペースを挿入しようとしています。ただし、ブラウザは複数の隣接する空白スペースを 1 つのスペースとして表示し、コンポーネントの前後および外側のスペースを無視します。この現象は空白崩壊として知られています。空白の折りたたみが煩わしい場合もありますが、HTML と CSS (カスケード スタイル シート) の両方に空白を追加するためのテクニックがいくつかあります。
&
文字実体 は全角空間を表すために使用されます。 em の幅 (16 ピクセル) は emsp と同等です。
本文中の全角スペースの構文は HTML &emsp エンティティの使用例を次に示します。
これは、宇宙エンティティの例です。
出力
カプセル化プログラム
上記の例では、 エンティティは HTML にスペースを追加するために使用されており、その幅は 16 ピクセルです。複数の隣接するスペースでも使用できます。
&thinsp
文字エンティティは、狭いスペースとして知られる薄いスペースを表すために使用されます。 em の 6 分の 1 は & の幅です
薄いスペースは、構文内のコンテンツの間として記述されます。以下は HTML エンティティの使用方法の例です。 「」
これは薄い空間エンティティの例です。
出力
このエンティティは、上の例で HTML に細いスペースを追加するために使用されており、その幅は em の 6 分の 1 です。いくつかの隣接するスペースでも使用されます。
以下は「Hi」のアスキーアートです。 # # ##### # # # ##### # # # # # # # # # #####
出力：
空白を利用する利点
なぜ空白が重要なのでしょうか?
デザイナーとしての私の意見では、ホワイトスペースは優れたデザインの基本的な構成要素です。デザイナーが「ホワイトスペース」という用語を使用する場合、ネガティブスペース、つまりコンポジション内のピース間のスペースを指します。これは、ページ上のグラフィック、余白、および余白の間の、何もマークされていない空白スペースです。目には、列、テキスト行、図の間のスペースによって視覚的な呼吸領域が与えられます。
ホワイトスペースがデザインの重要な要素であるのには、説得力のある理由があります。適切に適用すれば、当社の Web サイトのデザインに革命をもたらし、いくつかの利点をもたらす可能性があります。目に心地よく、読者が読み続けられるようなレイアウトを作成し作成する必要があります。 Web 用にデザインするときは、素晴らしい製品をクライアントに提供することが私たちの優先事項であることを常に念頭に置くことが重要です。
ホワイトスペースは、読者をある要素から別の要素に導き、調和とバランスを生み出し、デザインのブランド化に役立ちます。私たちの主な目標は、Web サイトをわかりやすく明確に見せ、ユーザーが好み、評価するコンテンツを提供することです。ホワイトスペースは単なる「空白」スペースではありません。これは、ページ上のアイテムの存在を可能にするデザイン機能です。このエリアはバランスが取れており、美しいデザインが存在することを常に思い出させてくれます。明確なメッセージを伝えるために、テキストやグラフィックを詰め込みすぎたレイアウトを作成する必要はありません。