Home-theater-designers
ウェブサイトを作成することはあなた自身を表現するための素晴らしい方法です。多くのウェブサイト構築ツールがありますが、それを自分で書くことは、ウェブサイトが舞台裏でどのように機能するかについてもっと学ぶための楽しい方法です。優れた初心者プロジェクトは、Webサイトを作成し、CSSを使用して背景画像を追加することです。このプロジェクトでは、HTMLとCSSの両方を使用して実行できます。
CSSとは何ですか？
CSSはCascadingStyleSheetの略です。これは、マークアップ言語のスタイルを設定できるプログラミング言語です。そのようなマークアップ言語の1つは、HTMLまたはハイパーテキストマークアップ言語です。 HTMLはウェブサイトの作成に使用されます。 HTMLを使用してWebサイトのスタイルの一部を制御できますが、CSSははるかに多くの制御および設計オプションを提供します。
HTMLを使用した基本的なWebサイトの作成
CSSは単なるスタイル言語であるため、CSSを使用するには、最初にスタイルを設定するものが必要です。 CSSを使い始めるには、非常に基本的なWebサイトで十分です。このページには「HelloWorld」が表示されます。
Hello World
HTMLに慣れていない場合は、すべての要素が何をするのかを簡単に見ていきましょう。前述のように、HTMLはマークアップ言語です。つまり、タグを使用してテキストをマークします。あなたが囲まれた単語を見るときはいつでも タグです。タグには、を使用してセクションの開始をマークするタグと、を使用してセクションの終了をマークするタグの2種類があります。セクション内のテキストは、この区別をわかりやすくすることも目的としています。
この例では、4つのタグがあります。 NS html タグは、どの要素がWebサイトの一部であるかを示します。 NS 頭 タグには、ページには表示されないがページの作成に必要なヘッダー情報が含まれています。表示されるすべての要素は、 体 タグ。表示される要素は1つだけです。 NS 鬼ごっこ。テキストが段落であることをWebブラウザに通知します。
関連している： 10分で学ぶことができる10の簡単なCSSコード例
HTMLへのCSSの追加
簡単なページができたので、CSSを使用してスタイルをカスタマイズできます。現在、私たちのページは非常にシンプルで、できることはあまりありませんが、段落を目立たせて、境界線を追加して背景と区別できるようにすることから始めましょう。
Hello World
これで、段落は黒い境界線で囲まれます。 CSSのスタイルの説明を段落タグに追加すると、ウェブサイトに段落のスタイルを設定する方法がわかりました。説明を追加できます。段落の周りの空白またはパディングを増やして、テキストを中央に配置しましょう。
Hello World
私たちのウェブサイトは見栄えが良いですが、私たちのHTMLは、段落タグ内のこれらすべての説明で乱雑に見え始めています。この情報をヘッダーに移動できます。私たちのヘッダーは、ウェブサイトを正しく表示するために必要な情報のためのものです。
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
これで、HTMLが読みやすくなりました。あなたは私たちが周りのいくつかのことを変えなければならなかったことに気付くでしょう。 styleタグは、Webブラウザーのスタイル情報だけでなく、スタイルを設定するものも示します。この例では、2つの異なる方法を使用してスタイルを設定しました。 NS NS スタイルタグは、そのスタイルをすべての段落タグに適用するようにWebブラウザに指示しています。 NS #ourParagraph セクションは、IDを持つ要素のみをスタイル設定するように指示します ourParagraph 。そのことに注意してください id 私たちの体のpタグに情報が追加されました。
Chromeでポップアップ広告を停止する方法
あなたのウェブサイトへのCSSファイルのインポート
ヘッダーにスタイル情報を追加すると、コードがはるかに読みやすくなります。ただし、多くの異なるページを同じ方法でスタイル設定する場合は、そのテキストをすべてのページの上部に追加する必要があります。それほど手間がかからないように思われるかもしれません。結局、コピーして貼り付けることはできますが、後で要素を変更したい場合は、多くの作業が必要になります。
代わりに、CSS情報を別のファイルに保持し、ファイルをインポートしてページのスタイルを設定します。スタイルタグ間の情報をコピーして新しいCSSファイルに貼り付けます ourCSSfile.css 。
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}次に、ファイルをHTMLファイルにインポートします。
Hello World
CSSを使用した背景画像の追加
HTMLとCSSの基盤がしっかりしているので、背景画像を追加するのは簡単です。まず、背景画像を与える要素を特定します。この例では、ページ全体に背景を追加します。これは、スタイルを変更したいという意味です 体 。 bodyタグには、表示されているすべての要素が含まれていることを忘れないでください。
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}CSSでボディスタイルを変更するには、最初に 体 キーワード。次に、{}の前に行ったように中括弧を追加します。ボディのすべてのスタイル情報は、中括弧の間にある必要があります。変更したいスタイル属性は 背景画像 。多くのスタイル属性があります。それらすべてを暗記することを期待しないでください。覚えておきたい属性を含むCSSプロパティのチートシートをブックマークします。
関連している： 誰でも自分のWebサイトに追加できる8つのクールなHTML効果
Googleドライブフォルダを別のアカウントにコピーします
属性の後にコロンを使用して、属性を変更する方法を示します。画像をインポートするには、 url（） 。リンクを使用して画像を指していることを示します。ファイルの場所を引用符で囲まれた括弧内に配置します。最後に、行をセミコロンで終了します。 CSSでは空白は意味がありませんが、インデントを使用してCSSを読みやすくします。
この例は次のようになります。
画像のサイズが原因で画像が正しく表示されない場合は、画像を直接変更できます。ただし、CSSには、背景を変更するために使用できる背景スタイル属性があります。背景よりも小さい画像は、自動的に背景で繰り返されます。これをオフにするには、追加します 背景-繰り返し：繰り返しなし; あなたの要素に。
画像が背景全体を覆うようにする方法も2つあります。まず、background-sizeを画面のサイズに設定できます。 背景サイズ：100％100％; 、ただし、これにより画像が引き伸ばされ、画像が大きく歪む可能性があります。画像の比率を変更したくない場合は、background-sizeを次のように設定することもできます。 カバー 。 Coverを使用すると、背景画像が背景を覆いますが、画像が歪むことはありません。
背景色の変更
最後にもう1つ変更しましょう。背景ができたので、段落が読みづらいです。背景を白くしましょう。プロセスは似ています。変更する要素は#ourParagraphです。 ＃は、「ourParagraph」がID名であることを示します。次に、 背景色 白に起因します。
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}ずっといい。
CSSを使用してWebサイトの設計を継続
さまざまなHTML要素のスタイルを変更する方法がわかったので、空が限界です。スタイル属性を変更する基本的な方法は同じです。変更する要素を特定し、属性を変更する方法を説明します。詳細を学ぶための最良の方法は、さまざまな属性を試してみることです。次にテキストの色を変更することに挑戦してください。
共有 共有 つぶやき Eメール 高品質のHTMLコーディング例のための8つの最高のサイトあなた自身のウェブサイトやアプリをコーディングするためのHTMLを学びたいですか？これらのWebページの例とソースコードを使用して、HTMLとCSSを学習してください。
次を読む 関連トピック- プログラミング
- HTML
- ウェブデザイン
- CSS
J. Seatonは、複雑なトピックの分析を専門とするサイエンスライターです。彼女はサスカチュワン大学で博士号を取得しています。彼女の研究は、ゲームベースの学習を利用してオンラインでの学生の関与を高めることに焦点を当てていました。彼女が働いていないとき、あなたは彼女が読書をしたり、ビデオゲームをしたり、ガーデニングをしたりしているのを見つけるでしょう。
ジェニファー・シートンのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください