CSSを使用してWebサイトに注目の見積もりボックスを作成する方法（セクション6）

序章

このチュートリアルでは、デモンストレーションWebサイトの6番目のセクションに表示されているように、CSSを使用して注目の引用をWebサイトに追加します。このセクションを使用して、お気に入りの引用、あなたの仕事についての証言、またはサイト訪問者へのメッセージを特集することができます。必要に応じて、この引用を別のWebページにハイパーリンクすることもできます。ここで使用するメソッドは、他のCSS /HTMLWebサイトプロジェクトに適用できます。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

注目の見積もりセクションのスタイルルールの作成

注目の引用セクションを作成するには、コンテナーのスタイルを設定するクラスと、注目のテキストのスタイルを設定するクラスを作成します。 styles.cssファイルに、次のコードスニペットを追加します。

styles.css

. . .

/* Section 6: Featured Quote  */

.column-quote {
  width: 90%;
  height: 475px;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:100px;
  margin:auto;
  margin-bottom:150px;
  border: 20px solid #FEDE00;
}

.quote {
  font-size:80px;
  font-weight:bold;
  line-height: 1;
  text-align: center;
}

このコードスニペットでは、CSSコメント/* Section 6: Featured Quote */を追加して、CSSコードのこのセクションにラベルを付けています。次に、引用ボックスのスタイルを設定するために使用するクラスcolumn-quoteを定義し、コンテナーのサイズ、パディング、マージン、および境界線を指定しました。

余白はautoに設定されていることに注意してください。これにより、コンテナはページの中央で水平方向に中央揃えになります。さらに、ページの下部にいくらかのスペースを与えるために、下余白は200ピクセルに設定されています。他の宣言について詳しく知りたい場合は、コンテンツ、パディング、ボーダー、およびボーダーのサイズの設定に関するこのチュートリアルシリーズの前のセクションを確認してください。マージン。

また、quoteクラスを作成しました。このクラスを使用して、注目の引用のテキストのスタイルを設定します。 line-heightプロパティを1に設定していることに注意してください。これにより、テキスト行間のスペースがデフォルト設定の1.6から縮小されます。この値を変更して、好みの行間隔を決定してください。

styles.cssファイルを保存します。

注目の見積もりセクションの追加

index.htmlファイルに戻ります。 </div>タグを最後に閉じた後、次のコードスニペットを追加します。

index.html

. . .

<!--Section 6: Featured Quote-->

<div class="section-break"> </div>
<div class="column-quote">
  <p class="quote">There are many fish in the sea, but only one Sammy!</p>
</div>

先に進む前に、一時停止してコードの各行を調べてみましょう。

HTMLコメントは、index.htmlファイルのコードのこのセクションにラベルを付け、ブラウザーには表示されません。
<div class="section-break"> </div>要素は、前のチュートリアルで定義したクラスを使用してセクションブレークを作成します。そのチュートリアルに従わなかった場合は、CSSルール.section-break {margin:50px; height:500px;}をstyles.cssファイルに追加することでそのクラスを追加できます。この要素は、前のセクションのコンテンツと注目の引用セクションの間にスペースを作成します。
<div class="column-quote">タグとその終了</div>タグは、styles.cssファイルのcolumn-quoteクラスに対して宣言したスタイルルールを使用して、注目の引用のコンテナーを作成します。
<p class="quote">There are many fish in the sea, but only one Sammy! </p>は、上の行で開いた<div>コンテナーにテキストコンテンツを挿入し、styles.cssファイル。テキストコンテンツの長さを変更する場合は、このセクションのクラスの1つを変更して、フォントのサイズまたはコンテナのサイズを変更し、テキストが引き続き収まるようにすることができます。

index.htmlファイルを保存し、ブラウザにリロードします。これで、ウェブページに大きな注目の引用が無地の背景の透明なコンテナに表示されます。

結論

このチュートリアルでは、Webサイトに注目のテキストボックスを作成し、さまざまなWebサイトレイアウトに合わせてスタイルを変更しました。見積もりを新しいWebサイトページにハイパーリンクする場合は、チュートリアルHTMLを使用して追加のWebサイトページを作成してリンクする方法にアクセスしてください。

チュートリアルシリーズの次の最後のチュートリアルでは、静的フッターを作成します。静的フッターは、訪問者がページを下にスクロールすると、ビューポートの下部の固定位置に「固定」されます。