ウェブサイトのコーディング方法

ウェブサイトのコーディング方法HTMLとCSSでWebサイトを作成する方法を学びたい?


あなたは正しい場所にいます。このガイドでは、空白の画面から、最適化され、見栄えの良いウェブサイトが表示されるまでのすべての手順を示します.

しかし、最初に、HTMLとCSSとは?

ええと、ウィキペディアで両方の用語を調べることはできますが、それらの定義はあまり読みやすいものではありません。少し簡単にしましょう。

  • HTML (ハイパーテキストマークアップ言語)は、Webページの構造とコンテンツを定義します– どこ 物事は行く, どうやって 彼らは配置され、そして なに ページ上
  • CSS (カスケードスタイルシート)は、 スタイリング/プレゼンテーション ウェブページとその要素の

実際にどちらか一方がなければ、実際に1つにすることはできません。2つが連携して、最終的なWebページ、そのデザイン、およびそこにあるコンテンツを構成します.

注意; 「ウェブページ」とは、1つのHTMLドキュメント、つまりウェブサイトの一部である1つのページを意味します。一方、「Webサイト」は完全なものです–個々のWebページをすべて含むサイト全体.

HTMLとCSSを使用してWebサイトを作成する方法(目次):

  1. HTMLの基本を学ぶ
  2. HTMLドキュメント構造を理解する
  3. CSSセレクターについて知る
  4. CSSスタイルシートをまとめる
  5. ブートストラップを入手
  6. デザインを選ぶ
  7. HTMLとCSSを使用してWebサイトをカスタマイズする
  8. コンテンツと画像を追加する
  9. 色とフォントを微調整する
  10. 追加のページを作成する

ウェブサイトを作成するための合計時間: 4-5時間
スキルレベル: 中級

これが複雑すぎると思われる場合は、WordPressを使用してWebサイトを作成するか、Webサイトビルダーの1つを選択することをお勧めします。ウェブ開発に最適なIDEのリストをチェックすることもできます. 

Contents

始める前に、リソースを収集します。

したがって、HTMLとCSSでWebサイトを作成する前に最初に必要なのは、Webサーバー(ホスティング)です。でも心配しないでください。自分のマシンを買う必要はありません。多くのWebホスティング会社は、自社のマシンで簡単なホスティングサービスを販売しています。 「ウェブホスティング」をググって、高すぎないものを選びましょう.

サーバーを並べ替えた後、次に必要なのはドメイン名です。ドメイン名は、ウェブサイトがウェブ上で識別されるものです。たとえば、このサイトのドメイン名は websitesetup.org.

ドメイン名とサーバーの両方がある場合、2つを一緒に接続できます.

完全な開示:このガイドの紹介リンクからBluehostを購入すると、手数料が発生します。これにより、WebsiteSetupを稼働させ、最新の状態に保つことができます。ご協力ありがとうございました.

これをあなたの側に苦痛なしで整理するために、私たちは次のような会社にサインアップすることを勧めます ブルーホスト.

彼らはあなたのためにすべてのセットアップを処理します。彼らが意味すること: (a) あなたのためにホスティングアカウントを設定する, (b) あなたに代わってドメイン名を登録する, (c) 連携するようにすべてを構成し、 (d) 使いやすいダッシュボードにアクセスできます.

先に行き、サインアップ ブルーホスト, 待ちます。戻って、ウェブサーバーを設定して準備ができたら、次のステップにスクロールします.

追伸コンピュータでHTML Webサイトを試してみたいだけの場合, 公開するつもりはなく、ローカルのウェブサーバーソフトウェアを使用します。私たちが推奨し、使用したいものは XAMPP. MacとPCの両方に対応するバージョンがあり、使いやすいです。これは ガイド コンピュータにインストールする方法について.

1. HTMLの基本を学ぶ

HTML構造の主な要素はHTMLです 鬼ごっこ.

たとえば、タグは次のようになります。

何か

ここでは、 鬼ごっこ。これは 大胆な 開始タグの間にあるテキスト()と終了タグ()。この場合、そのテキストは 何か.

ただし、他にもいくつかのタグがあります。

  • ... 開始タグと終了タグの間のテキストを斜体にします
  • ... 下線が引かれます
  • ...

    テキストの段落です


  • ...

    ページのメインヘッダーです

これらの単純なタグの他に、より複雑なタグもあります。たとえば、次のようなリストを作成する場合は、

  • アイテム1
  • アイテム2
  • アイテム3

…次のHTMLコードでこれを行うことができます。

  • アイテム1
  • アイテム2
  • アイテム3

または、次のような別のページへのリンクを追加したい場合:

これは私たちのホームページへのリンクです

…次のコードでそれを行うことができます。

これは私のホームページへのリンクです

これを読んで HTMLタグの完全なリスト. HTMLとCSSを使用してWebサイトを作成するときに便利になります.

2. HTMLドキュメントの構造を理解する

HTMLページがLegosで構築されているかのように考えてください。異なるレンガを積み重ねて、特定のより大きな構造物を作ります.

しかし、レゴブロックの代わりに、HTMLタグを取得します…

最も単純なHTMLドキュメント構造は次のとおりです。





こんにちは世界!


こんにちは世界!

私の最初のWebページ.

上記のコードをコピーして新しいファイルに貼り付け、ドキュメントを index.html, 完全に有効なHTMLページになります.

このコードの個々の部分について説明しましょう:

  • –ドキュメントの最初の宣言
  • –別の宣言。次に来るのは英語で書かれたHTML文書であると言います
  • –開始のマーク セクション;の セクションは、ページのすべての基本的なパラメーターの場所です。それらのほとんどは画面に表示されません。内部で何が起こっているかを定義するだけです
  • –ドキュメントの記述に使用される文字セットを定義します。これに多くの時間を費やす必要はありません。この宣言をそのまま使用してください
  • こんにちは世界! –ページのタイトル。これは、ブラウザのタイトルバーに表示されるものです。例:

HTMLとCSSでWebサイトを作成するときのWebブラウザーのタイトル

  • –開始のマーク セクション;これは、ページのすべてのコンテンツが移動する場所です。 HTMLドキュメントの主要部分です。 これを強調しましょう。このセクションには、ページに表示されることを意図したすべてのコンテンツを含めます。

  • こんにちは世界!

    –ページのメインヘッダー

  • 私の最初のWebページ.

    –テキストの簡単な段落

  • – HTMLドキュメント全体の終了タグ

ここで重要なメモ。基本的なテキストアプリやMS Wordのような複雑なテキストプロセッサでHTMLファイルを操作するのは良い経験ではありません。自分で簡単にできるようにするために、 崇高なテキスト. MacとPCの両方のバージョンがあり、無料です.

なぜそれが良いのですか?特に、HTMLファイルの構文を色分けします。つまり、HTMLタグとテキストコンテンツ、タグパラメータ、その他の値を視覚的に区別します。基本的に、すべてが読みやすくなります。 Sublime Textでの単純なHTML構造は次のようになります。

HTMLとCSSを使用してWebサイトを作成する場合、崇高な構文は素晴らしい

さて、トピックに戻ります。あなたはその新しいものを取ることができます index.html 自分のファイル、それをWebサーバーのメインディレクトリがある場所にコピーし、Webブラウザーからそのページに移動して表示します。ただし、あまり興奮しないでください。このページはかなり見苦しくなります(以下を参照).

このページは醜いです

わかりましたので、ページは見苦しいです。?

3. CSSセレクターを理解する

HTMLにタグがあるように、CSSにも セレクター.

セレクターは、特定の要素が外観に応じてどのように動作するかを記述します。次にCSSセレクタの例を示します。

p {
font-size:18px;
}

このセレクターは、すべてのHTML

ドキュメント内のタグのフォントサイズは18ピクセルになります.

ただし、CSSセレクターを使用するより実用的な方法は、特定のタイプのすべてのタグを特定のスタイルに制限するのではなく、異なる「クラス」を作成し、タグに1つずつ割り当てることです.

たとえば、CSSのクラスセレクターは次のようになります。

.通常テキスト{
font-size:18px;
}

ドット(.)クラスの名前の前(通常テキスト)。 「通常のテキスト」クラスが定義されたので、サイズを18pxにしたい特定のHTMLタグにそのクラスを割り当てることができます.

例えば:

このテキストは18pxになります.

上記のCSSコードのすべての要素を説明するために、もう1分時間を取ってみましょう。

  • .通常テキスト –クラス定義。クラス名の後、開始括弧と終了括弧の間 {} このクラスに割り当てられた要素がどのようになるかを定義します
  • フォントサイズ – CSSプロパティの例
  • 18px –プロパティに割り当てられた値

上記以外にもたくさんのCSSプロパティがあります フォントサイズ. これが 完全なリスト 興味があれば.

4. CSSスタイルシートをまとめる

HTMLドキュメントは非常に構造的です。すべての要素がその場所にあり、要素の順序は、問題のWebページの最終的な構築と外観にとって重要です。 CSSドキュメントはずっと少ないです.

CSSドキュメントは、多くの場合、 スタイルシート. 基本的に、CSSスタイルシートは、対応するHTMLドキュメントで使用されているすべてのクラス定義のリストです。ほとんどの場合、クラス定義の順序はそれほど重要ではありません(少なくとも単純な設計の場合)。.

CSSスタイルシートをまとめる方法は、各クラスを1つずつ定義し、ページデザインの結果が希望どおりかどうかをテストすることです.

これは退屈な作業のように聞こえますが、.

しかし、私たちは物事をより簡単にし、HTMLとCSSのデザインを手動で学ぶことを強制しません。ゼロからすべてを教えるのではなく、私たちは生きている生物を取り、その要素を解剖します.

これがブートストラップと呼ばれるものが出てくるところです.

5.ブートストラップのダウンロード/インストール

Bootstrapは、HTMLとCSSを使用してWebサイトを作成するためのオープンソースのツールキットです。.

平易な英語で、BootstrapはHTMLドキュメントとCSSスタイルシートの基本構造を処理します。それはあなたのウェブページの主要な足場がさらなる開発のために準備され最適化されていることを確実にするフレームワークを提供します.

基本的に、Bootstrapを使用すると、ゼロから開始するのではなく、楽しい部分に直接進むことができます。これにより、HTMLとCSSを使用してWebサイトを作成する、退屈な初期段階に取り組む必要がなくなります。.

次の2つの方法があります。

  • オプション (a):Bootstrapを学ぶ– Bootstrapホームページにアクセスし、メインのBootstrapパッケージをダウンロードして、その上にビルドを開始します.
  • オプション (b):近道–見栄えの良いデザインと構築済みのデモWebページを備えたBootstrapのスターターパックを入手する.

オプション (a) 最初は多少学習曲線があるかもしれませんが、HTMLとCSSを使用してWebサイトを作成するアプローチの方が、決して悪い方法ではありません。コアブートストラップ構造を習得したら、新しいページを作成して、希望どおりの外観にするのが簡単になる場合があります。の ブートストラップのドキュメント この道を始めるのに最適な場所です.

オプションで行きます (b) このガイド。これを行う理由はいくつかありますが、主な理由は次のとおりです。

既成の構造から始めることで、HTML文書の基本的な必要性を理解しようとする際の多くの苦痛が軽減されます。これにより、コンテンツのレイアウトや見栄えを良くするなど、興味深いことに集中できます。.

つまり、この方法で学習すると、見栄えの良い結果がより早く得られます。.

6.デザインを選ぶ

HTMLとCSSを使用してWebサイトを作成するときは、好きなBootstrapテンプレートを自由に使用できます。彼らはすべて十分に同じように動作するはずです.

ただし、このガイドでは、次の方法でテンプレートの1つを使用します。 ブートストラップを開始. 彼らは、最適化され、問題なく機能し、非常によく設計された無料のテンプレートの素晴らしい選択を持っています.

これから使うテーマは クリエイティブ. 最終的な効果は次のようになります。

HTMLとCSSでWebサイトを作成した後の最終的なホームページ

まず、クリエイティブテンプレートで、 無料ダウンロード 右側にあるボタン(上 このページ)そしてzipパッケージをデスクトップに保存します.

パッケージを解凍し、その内容をローカルWebサーバーのメインディレクトリまたはWebホスティングアカウントに移動します.

次に、Webブラウザーでその場所を開きます。テンプレートのストックバージョンが表示されます。

ブートストラップテンプレートを開始する

見た目はかなり良いですが、今度はHTMLとCSSを使用して、希望どおりの形にする方法を学習します。.

7. HTMLとCSSを使用してWebサイトをカスタマイズする

まず、デザインのホームページから始めましょう。これは、グラフィックス、テキストを置き換え、一般的にすべてを調整する方法を示します.

上記では、HTMLドキュメントのヘッドセクションについて簡単に説明しました。ここでさらに詳しく見てみましょう.

あなたが開くとき index.html ブートストラップサイトのファイルをSublime Textにすると、次のようなヘッドセクションが表示されます(明確にするために、このコードから重要でないものをすべて削除しました*)。






クリエイティブ-ブートストラップテーマの開始





*上記とは別に、Googleフォント、Font Awesomeアイコン、およびページに表示される画像用のライトボックスモジュールをロードするコードもありました.

ここでの宣言のほとんどはすでに知っていますが、新しい宣言がいくつかあります。

  • まず、間のすべて 括弧はHTMLコメントです。最終ページには表示されません.
  • –これは、Bootstrap独自の宣言タグの1つです。ウェブサイトのビューポートのサイズを定義します.
  • –この行は、クリエイティブテンプレートのCSSスタイルシートを読み込み、Bootstrapのデフォルトスタイルシートも格納します.

最後の宣言(CSSを読み込む行)を変更して、後で作業しやすくします.

その行を次のように変更します。


これはほんの小さな違いです。同じCSSシートの短縮されていないバージョンが読み込まれます。このバージョンは修正が簡単です.

今一番下までスクロールします index.html ファイル。クロージングの直前に次の行が表示されます 鬼ごっこ:

        

彼らは、デザインのより視覚的な相互作用のいくつかを処理するJavaScriptファイルをロードする責任があります。たとえば、 トップメニューのリンクをクリックすると、同じページのaboutブロックにスムーズに移動します。これは、とりわけ、JavaScriptを介して行われます。今、このコードを理解するのに悩む必要はありません。これを別の時間にしましょう.

代わりに、ページに独自のコンテンツを追加してみましょう。

8.コンテンツと画像を追加する

最初に行うことは、ページのタイトルを変更することです.

1.タイトルを変更する

を見つける 題名 ヘッドセクションでタグを付け、タグ間のテキストを独自のものに置き換えます。

私のHTMLサイト

2.ヒーローセクションをカスタマイズする

ヒーローセクションは、このブロックと呼ばれるものです。

ヒーローセクション

その中に私たち自身のコンテンツがあるといいですね。このブロックを変更するには、 index.html ファイルを作成し、このセクションを見つけます。

...


...

もっと詳しく

このコードブロック全体が、ヒーローセクションの内容を制御します.

ここにいくつかの新しいタグがあります:


  • –これは、このセクション全体がページのヘッダーであることを定義するタグです。このタグには、2人の兄弟姉妹が
    タグと
    鬼ごっこ
  • –は、後続のセクションが別のセクション(別名 分割)HTMLドキュメント内。これを使用すると、ページ上の個々のセクションを視覚的に簡単に区別できます

また、他のいくつかのタグ(すでに知っています)は、複数のCSSクラスが割り当てられているため、もう少し複雑に見えます。例えば:

...

に割り当てられたクラス

ここのタグは テキスト大文字テキスト白フォント太字太字.

これらのクラスは、BootstrapとCreativeテーマの開発者によって作成されました。良いニュースは、HTMLとCSSを使用してWebサイトを作成するときに、それらも自由に使用できることです。.

率直に言って、ページの構造に追加したタグには、クラスをいくつでも割り当ててカスタマイズできます。.

利用可能なクラスの完全なリストを表示したい場合は、メインを開くことができます creative.css にあるファイル CSS クリエイティブテーマのサブディレクトリ.

これらすべてのクラスを把握することは、最初は怖いように見えるかもしれませんが、実際には見た目よりもはるかに簡単です。.

たとえば、私たちの段落のいくつかに割り当てられたクラスの1つ index.html ファイルは font-weight-light. に飛び込むとき creative.css ファイルと Ctrl + F そのクラス名を探すと、それは単に フォントの太さ そのようなパラメータ:

.font-weight-light {
font-weight:300;
}

のデフォルトテキストの変更 index.html ファイルは非常に簡単です。編集するタグを見つけて、開始タグと終了タグの間にあるものを変更するだけです.

たとえば、メインの見出しを変更するには、次のように変更します。

あなたのお気に入り ...

次のようなものに:

HTML Webサイトを賞賛する!

ページ上のすべての段落と他のタグについても同じことができます.

重要なのは、新しい段落を自由に追加できることです。たとえば、ページに既にある段落を取得してコピーし、元の段落のすぐ下に貼り付けることができます。そのようです:

ブートストラップ缶 ...

パラグラフ2

次に、テキストが処理されたので、背景にある画像を置き換えましょう.

CSSスタイルシートファイルに移動して変更を加える必要があるため、これは少し複雑です。あなたがのHTMLコードで見ることができるように マストヘッド セクションでは、タグはどのような方法でもページに画像を含めることを示しません。これはすべてCSSを介して行われます.

コードブロック全体をもう一度見てみると、 マストヘッド セクションでは、それが呼び出されるクラスに割り当てられていることがわかります マストヘッド. 次のコード行は、クラスの割り当てを処理します。

マストヘッド クラスは、ブロック全体の背景に画像を配置するクラスです.

開けましょう creative.css もう一度ファイルを作成し、「マストヘッド」クラスを探します。

header.masthead {
パディングトップ:10rem;
padding-bottom:calc(10rem-72px);
background:linear-gradient(to bottom、rgba(92、77、66、0.8)0%、rgba(92、77、66、0.8)100%)、url( "../ img / bg-masthead.jpg" );
背景の位置:中央。
background-repeat:no-repeat;
background-attachment:スクロール;
背景サイズ:カバー;
}

このコードは、オーバーレイ、シェーディングなど、画像にあらゆる種類の凝った処理を行いますが、重要な部分は次のとおりです。 url( "../ img / bg-masthead.jpg"). これは、背景画像の場所を示す線です。それは img サブディレクトリ.

この背景画像を変更するには、任意の画像を取り、それを img サブディレクトリを作成し、元の名前の代わりにその名前をコピーして貼り付けます bg-masthead.jpg ファイル。つまり、これを変更します。 url( "../ img / bg-masthead.jpg") これに: url( "../ img / YOURFILE.jpg").

3.ページの他のブロックをカスタマイズする

あなたが通過するように index.html ファイルを見ると、ページ上にすでにさまざまなセクションがたくさんあることがわかります。のセクションがあります 航海, そして ブロック、いくつか サービス, a ポートフォリオ, a アクションの呼び出し, a 連絡先 ブロック、および フッター.

これらのセクションはすべて内容が異なりますが、セクション自体は構造が似ています。それらはすべてほぼ同じHTMLタグのセットを持っています–割り当てられているCSSクラスは異なるだけです.

ニーズに合わせてページを変更する最良の方法は、ブロックを1つずつ調べて、周りを変えて実験することです.

テキストを変更するだけでなく、セクション全体を移動することもできます(

タグ)。確かに、手作業で(要素をカットしてから所定の場所に貼り付けることにより)行う必要がありますが、それでも簡単に実行できます.

そうは言っても、まだ話していない2つの基本的な変更点があります。これらについて次に説明します。

9.色とフォントを微調整する

HTMLやCSSでは、色やフォントの変更は非常に簡単です。最も簡単な方法は、HTMLタグにインラインスタイルを割り当てることです。例えば:

赤いテキスト

HTMLでは、色は16進値で表されます。 「#FF0000」は赤です。ここに他のすべての表があります 標準色.

色を割り当てるより良い方法は、CSSスタイルシートを介して行うことです。たとえば、上記のコードと同じ効果を得るには、これをCSSスタイルシートに配置します。

p.red {
色:#FF0000;
}

次に、メインドキュメントで次のHTMLコードを使用します。

赤いテキスト

その2番目の方法は基本的に物事がブートストラップで行われる方法です.

ページ上のテキストの色を変更するには、まずそのテキストのスタイルを設定するタグを見つけてから、スタイルシートに移動して対応するクラスを変更するか、新しいクラスを作成します.

ここに例があります。ヘッダーの色を「At Your Service」に変更したいとします。現在、それは黒であり、これはそれを処理するコードです:

どうぞ何なりとお申し付けください

その色を変更するための最良の方法は、次のような新しいクラスを作成することです。, .テキストオレンジ 次のように色の値を設定します。

.text-orange {
色:#f4623a!重要;
}

* !重要 この色設定が、その前に来た他の色設定を上書きすることを確認します.

これで、ヘッダーに戻り、コードを次のように変更できます。

どうぞ何なりとお申し付けください

これらの変更により、ヘッダーはオレンジになります。

オレンジh2

フォントとそのサイズを変更するには、非常によく似た方法を使用できます。ただし、最初に、CSSでのフォント定義ブロックの例を示します。

.SOMECLASS {
font-family: "Merriweather"、Roboto、sans-serif;
font-size:18px;
}
  • フォントを読み込む メリウェザー, Roboto, そしてシステムデフォルト サンセリフ フォント(Webセーフフォントについては、こちらをお読みください)
  • フォントサイズを18pxに設定します

この種の定義は、色の定義と同様に、任意のCSSクラスに配置できます。実際、フォントと色の定義は同じクラス宣言でよく見られます.

前の例に戻り、「At Your Service」というヘッダーのフォントサイズを変更するには、まず次のようなクラスを作成します。

.text-xxl {
font-size:50px;
}

次に、このクラスをヘッダーに割り当てます。

どうぞ何なりとお申し付けください

Boot Bootstrapで作成したテンプレートの色やフォントを変更する場合は、まずCSSスタイルシートを調べて、すでに別のサイズや色が提供されている可能性があるクラスを探します。可能な場合は使用してください.

10.追加ページを作成する

ホームページをカスタマイズしたので、追加のページで作業を開始し、ホームページにリンクします。.

HTMLとCSSを使用してWebサイトを作成する場合、任意の数のサブページを作成し、それらをすべて一緒にリンクできます。.

以下は、ほとんどのWebサイトに必要な一般的なページの一部です。

  • ページについて
  • 連絡先
  • ポートフォリオ
  • 製品とサービス
  • チーム
  • ポリシー(プライバシーポリシー、条件など)

1.レイアウトから始める

新しいWebページを作成する場合、最初に決定する必要があるのは、レイアウトをどのようにするかです.

HTMLとCSSを使用してWebサイトを作成するとき、細工を妨げるものは何もありません なんでも あなたが望むレイアウト。唯一の困難は、実際にそれを組み立てることです.

空白の画面から始めると、HTMLとCSSの扱いが難しい場合があるため、ここでもBootstrapを使用します。最初に、レイアウトを作成するためのいくつかの原則を示し、次にBootstrapを使用してそれを行う方法を示します.

Webページのレイアウトについて考える方法は、それを個々のブロックのシーケンスと見なすことです。次のようなもの(4つの異なるブロックに注意してください):

HTMLとCSSでWebサイトを作成するときのレイアウト

Bootstrapの優れた点は、基本的なレイアウトの原則と外観の詳細を処理するため、これらのブロックを適切な場所に配置することに集中できることです。.

ガイドのこのセクションでは、新しい「概要」ページを作成します.

まず、レイアウトのごく基本的なプロジェクトを作成します。上記のようなもの.

  • 上部にナビゲーションメニューがあります,
  • メニューの下に全幅の見出しブロック,
  • 画面中央にボックスで囲まれた中央のメインコンテンツセクション(全幅ではありません),
  • そしてフッター.

では、このレイアウトをHTMLで作成してみましょう.

2.新しいページを作成する

新しいページで作業を開始する最も簡単な方法は、既存のページを複製してテンプレートとして使用することです。それが私たちがやろうとしていることです.

のコピーを作成します index.html ファイルして名前を変更する about.html.

この初期段階でページを区別しやすくするために、新しい about.html ファイルを作成して内容を変更する </code> 鬼ごっこ。例えば, <code><title>私について.

次に、ファイルを1行ずつ見て、何を残し、何を削除するかを決定します。

  • 航海 メニュー(下 )。すべてのページでナビゲーションエクスペリエンスを統一するために、このセクションをそのままにしておくとよいでしょう。.
  • 主人公 セクション(下 )。これは、レイアウトプロジェクトによっては必要ありません。先に進んでセクション全体を消去できます.
  • セクション(下 )。このセクションをメインの見出しブロックとして再利用します.
  • サービス セクション, ポートフォリオ セクション, アクションの呼び出し セクション、および 連絡先 セクション(間のすべて そして )。これらのセクションはまったく必要ありません。あなたは先に進んでそれらを消去することができます.
  • フッター セクションとその下のすべて(以下 )。これを維持する必要があります.

これにより、現在のコードは非常に単純になります。基本的にはこれだけです:



























ここで欠けているのは メインコンテンツ セクション。それを構築するために、私たちはAboutセクションを再利用します.

先に進んで、aboutセクションのコピーを作成してください。これです:

...


...

最初の2行を次のように変更します。

必要ないので

そこにヘッダーと

要素を削除してみましょう。このブロック全体に残っているのは、テキストの段落だけです。そのようです:

テキストの段落.

ファイルを保存してブラウザーからそのファイルに移動すると、基本的に、同じ色の背景を持つ2つの非常によく似たブロックが上下に並んでいることがわかります。

ページ頭について

メインコンテンツセクションの背景は白にするとよいでしょう。変更するには、削除する必要があるのは bg-primary メインクラス

鬼ごっこ。つまり、タグを次のようにします。

それは良いです:

ページヘッドについて2

ページにダミーの段落を追加して、ページをさらに追加し、さらに小見出しを追加しましょう。

Lorem ipsum dolor sit amet、consectetur adipiscing elit...

Proin fermentum、felis tempor pharetra lobortis、magna quam hendrerit dolor...

小見出し

Lorem ipsum dolor sit amet、consectetur adipiscing elit...

これは、ページ上では次のようになります。

ver 1について

テキストを中央揃えにしたくない場合は、 テキストセンター のクラス

タグ.

ver 2について

これらのテキストブロックをさらに洗練させたい場合は、新しいCSSクラスを(以前のように)作成して、ブロック内の段落に割り当てることができます。または、現在のスタイルシートをのぞいて、この目的のためにどのクラスがすでに存在しているかを確認することもできます。ここに私たちが割り当てたものがあります

そして

タグ:

Lorem ipsum dolor sit amet...

Proin fermentum、felis tempor pharetra lobortis、magna quam hendrerit dolor...

小見出し

そして、効果は次のとおりです。

ver 3について

ここでやることは、ページのどこかに画像を追加することです.

HTMLのサンプルイメージタグは次のようになります。


かなりシンプルですよね?唯一のパラメータは、画像ファイルへのパスです。うまく整理するために、画像を img もう一度ディレクトリを作成します(少し前にその背景で行ったのと同じです)。このような場合、イメージタグは次のようになります。


そうは言っても、この特定の構成のイメージタグはかなり制限されています。もう少し洗練させるために、Bootstrapクラスをいくつか割り当てましょう。特に:


これらの2つのクラスは、画像の角を丸くし、画像のサイズが配置されているブロックのサイズを超えないようにします.

これで、aboutページのメインコンテンツセクションのどこかに、このようなタグを追加できます。たとえば、ここでは:

Lorem ipsum dolor sit amet...

Proin fermentum、felis tempor pharetra lobortis、magna quam hendrerit dolor...

小見出し

そして、これがページの最終的な効果です。

ver 4について

これが栄光の概要ページです。

ページ完成について

3.新しいページへのリンク

新しいページが完成したら、ホームページからリンクしましょう( index.html ファイル)。もちろん、このリンクを追加するのに最適な場所は、ナビゲーションメニュー( ).

特に、次の行を探します。

これを次のように変更します。


これについてはまだ話していませんが、 tagはHTMLのリンクタグです。それを使用して、あなたはそのページのアドレスを href パラメータ。リンクのテキスト(リンクのクリック可能な部分)は、開始と終了の間のテキストになります タグ.

ここでホームページを更新すると、概要ページを指す新しいリンクが表示されます.

参考文献:

この段階で、基本的に2つのページで構成されるシンプルなWebサイトを構築しました。 ホームページ ページ.

今やるべきことは、新しいページを作成し、それらを調整し、コンテンツをページに追加し、ナビゲーションメニューからすべてをリンクすることにより、すすぎと繰り返しです。.

これらの手順を実行する際に行う他の価値のあることは、HTMLとCSSの原則をさらに学習し、チェックリストを実行し、Bootstrapとその構造およびクラスを学習することです。そのためのいくつかのリソース:

  • HTML5チートシート
  • CSSチートシート
  • JavaScriptチートシート
  • HTMLチュートリアル
  • ブートストラップのチュートリアル
  • ブートストラップチートシート

マスタリングブートストラップ。HTMLとCSSを使用して最適化された美しいWebサイトを構築するために現在利用できる可能性が最も高いパス.

HTMLとCSSを使用したWebサイトの作成について質問がある場合は、コメント欄で遠慮なく送信してください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map