Toshi’s Enjoy Life

書きたいことを書く雑記ブログ!

【1からの挑戦】CSSというのを勉強してます。

 

f:id:tosikun0119:20170305213622j:plain

画像引用元:pixabay

 

みなさんこんにちは!

昨日は、「見出し・段落・箇条書き・リンク・画像」の5つのタグを勉強しました。

この5つの時点では、結構サクサクいけたので順調かな!

と思っていたのですが・・・

今日からやっているCSSというのがなんとまあ難しいこと(^◇^;)

 

 目次

 

難しいこと

なにが難しいかというと、

文字色・フォントサイズ・文字コードの指定・ヘッダーやフッターなどのレイアウトなどなど。それらに割り当てられてるタグなどがあるのですが、そのスペルが覚えられない(泣)

もちろんどういう時にどういう値で指定しなければいけないかも全くといっていいほど分からないので、今できることは丸暗記ということになってしまっています。

ですのでなんとか覚えるためにも覚えた内容をどんどん書き出していき、あとで復習としても使えるようにしていきたいと思います。

 

***********************************

文字色を変える

{  color : ___ ;   } 下線部に色を指定。ここに色々な値を入れてあげること。

#で指定する場合や「white」「red」 「blue」 「pink」で色を指定してあげるのも大丈夫である。

フォントサイズ

{  font-size: ___ ; } 下線部にピクセル(px)や%で指定。

font-size のところに、横幅:widht 高さ:height に置き換えられる。

背景色

{  background-color : ___  ;  }これも文字色を変える場合と同じ要領でOK。

 色ではなく、画像を変更したい場合は{background-image}と記述する。

文字コードを指定

<meta charset="utf-8"> これしないと文字化けする。Shift JISでも可能だが、今現在は「UTF-8」が一番望ましいとされているので、この通りに記述する事。

HTMLのバージョンの宣言

<!DOCTYPE html> 決まりの構文。これは必ず先頭に記述することと、終わりに</html>を忘れずに記述する事。

CSSの読み込み

<link rel="stylesheet"  href="stylesheet.css"> 別のディレクトリから読み込むときに書く構文。この通りではなく、ディレクトリ名と同じように記述する事。

 レイアウト

<div class="header"></div>

""内にmain や footerに置き換えられる。1つのレイアウトの区切りとして使える一つの例がこの<div>である。

idやclassを付けて、同じようなclassができないように注意する事。

 

*************************************

 まとめ

今日やったのはこんな感じです。

スペルが本当に難しいのでよく間違えてます。なんとかしていかないとコードが間違って指定できないってことになると大変なことになるので、スペル間違いには十分に気を付けていかないいけないなと感じました。

今回書き出したのは主要な部分だけで、これらが組み合わさって余計複雑になっていきます。

でも、こういう感じでホームページのレイアウトとかが決まってるんだ!

そう思うと自分でホームページ作れるようになったらすごい楽しんだろうなぁって思ってしまっています。でも、そこまでの道のりが本当に険しいんですけど・・・。

 

今日は苦労してやっとレベル6になりましたし、今度はホームページのメインとなる部分をちょっとやっていこうかなと思います。

なんか難しいブログになってきていると反省しつつ、でもこれからHTMLやCSSの勉強する方がもしいて、このブログが目に留まったなら、その方のほんのちょびっと参考になれればなといいなと思い書いたのでありました。

 

それでは今日はこの辺で☆