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コメント
<!--Section 6: Featured Quote-->
は、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サイトページを作成してリンクする方法にアクセスしてください。
チュートリアルシリーズの次の最後のチュートリアルでは、静的フッターを作成します。静的フッターは、訪問者がページを下にスクロールすると、ビューポートの下部の固定位置に「固定」されます。