こんにちは！tsuneです！
ちょっと前から、HTMLとCSSを本格的に勉強しております！
勉強前からWordpressで幅や色を変えたりとちょこちょこ編集はしていました(^_^;)
しかし、遂に本格的に勉強をする時期がきました！
その関係で、今から初める方と一緒に勉強できたらと思いまして記事にすることにしました。
本当に最初のことから備忘録の意味も込めてアップしていきますね！
それではまずは基本知識から！٩( ‘ω’ )و
HTMLとCSSって？
webページは「HTML」と「CSS」という言語の組み合わせで構築されています。
この２つの言語を学ぶだけでおしゃれなサイトを作ることも可能です！
HTMLとは？
HTMLは、ページの要素や構造を指定するための言語です。
HTMLの記法は、下のコードのように開始タグと終了タグで囲むような形になっています。
|
1 |
<開始タグ>〜</終了タグ> |
開始タグと終了タグで囲ったものが「要素」と言われ、この要素が実際にサイト上に表示されます！
HTMLはこの要素の組み合わせによって構成します！
HTMLについて見出し
HTMLについて詳しく説明を読んでみよう！
↑このようにタイトルと文章を表示したい場合は、下記のように記述します。
|
1 2 |
<h1>HTMLについて見出し</h1> <p>HTMLについて詳しく説明を読んでみよう！</p> |
CSSとは？
CSSはHTMLで作った要素を装飾するスタイルを指定する言語になります！
ページのデザインは基本的にCSSで記述できます。
CSSはデザインを指定したい要素を選択し、その中にどのような装飾をするのかを記述する形になります。
|
1 2 3 |
要素名 { プロパティ名:値; } |
要素名
idやclassのことです。
HTMLで記述したどこにデザインを施したいのかを指定するためのものです。
プロパティ名
どのようなデザインをいじるのかということです。
幅や高さ、背景など色々ありますがどれをいじりますかー？ということですね！
値
プロパティ名の値をどのくらいにするかということですね！
例えば、文字の色を変えたい場合は、文字（プロパティ名）を指定して値に色情報を記述します。
すると文字が記述した色情報通りに表示されます！
実際に背景を淡いピンクに、文字を灰色にしてみましょう！
HTMLの記述はこのようになります。
|
1 2 3 4 |
<div> <h1>CSSについて見出し</h1> <p>CSSについて詳しく説明を読んでみよう！</p> </div> |
それでは、CSSを指定していきましょう。
|
1 2 3 4 5 6 7 8 9 |
div{ background-color: #efd8d8; } h1{ color: #7d7979; } p { color: #7d7979; } |
divは文字を囲っている全体の要素です。そのdivの背景(background-color)を色情報(#efd8d8)で色付けしています。
次にタイトル(h1)と文章(p)の色(color)を色情報(#7d7979)で色付けしています！
CSSについて見出し
CSSについて詳しく説明を読んでみよう！
まとめ
今回は、HTMLとCSSがどのようなものかをご紹介致しました！
この他にも沢山のルールがあります。覚えるのが大変ですよ！(^_^;)
しかし、これこそ書きながら覚えていくしかない感じですね。
私も今回ご紹介した知識に毛が生えた程度のスキルしかまだありませんのでこの記事をアップしながらどんどんレベルアップしていけるように頑張ります！！
コメント