HTML/CSSの基本

ここ数日ほどHTMLとCSSを勉強して知ったこと。理解したこと。箇条書きしていく。

間違ってるところがあったらコメントで教えて欲しいでござる。

・HTMLとCSSはセットで使う。HTMLは土台、CSSは装飾。

⇨セットで使うのが基本ということすら知らなかったよ・・・。

どうやらHTMLは箱を作成して、その中にどんな文字を書くかといったことを指定しているらしい。

他にも文字に属性をつけることができて、代表的なのがhrefを使ったリンク機能ってところかな。

この土台を元に、箱の大きさはどうするのか？文字のサイズ、色は？レイアウトは？背景は？といったところを補完するのがCSS。

HTMLで紐づけた画像のサイズや、透明度も指定できるみたい。

逆に言えばHTMLだとただの文字の羅列になっちゃたり、ただの透明な箱が出来上がってサイト上に表示されなかったりする。

・<a href = "http://XXXXXXX">

HTMLのおそらく頻出機能。サイトにアクセスしたユーザーがクリックできるようになり、紐づけたURLのサイトに飛ぶことができるようになる。

当然、表示する文字をhttp://XXXXXXXではなく任意の文字にすることが可能。

[お問い合わせはこちら]とかで色反転してるところは多分この関数なんじゃないかな。

・<img src="image.jpg" alt="イメージ">

こっちもHTMLも頻出機能。サイト上に任意の画像を掲載することができる。

掲載する画像のディレクトリに気をつけること！

・<link rel="stylesheet" href="XXX.css"> 

こいつを忘れちまうところだったぜ。

HTMLと関連づけるCSSファイルを指定する記述。

こいつがないとCSSが反映されません。

・text-align: center;

ここからはCSSの記述。この文により、表示している文章を真ん中よせにできます。

もちろん左詰、右詰もできるよ。

・padding: Xpx Ypx Zpx;

・margin: Xpx Ypx Zpx;

説明が難しいけど重要な記述。

marginはボーダー外部の余白のサイズを指定していて、

paddingはボーダー内部にある要素の位置を指定する・・・と言えば伝わるだろうか・・・。

指定するpxは１〜４個どれでも対応していて、個数によって意味合いが変わるから注意！

詳しくは別サイトの画像付きでみてくだされ・・・。

・background: url("image/jpg");

・background-color: #fff;

確実に使用するであろう記述

urlと続く方は画像ファイルを読み込んで背景画像として指定できます。

colorの方は背景色の指定。

#を使って16進数で色を指定することもできるし、rgba(a,b,c)みたいな感じでも色を指定できます。

こんなところかなぁ・・・。もっと重要なこともありそうだけど。

なんどかテストケースを模倣しながら作ったんだけど、CSSのミスによって予想外の表記になるってことは意外となかったかな。

変な表記方法になったらHTMLを先に疑ったほうがいいかも知れないね。

実際やってみるようになると、どんな構文を使ってるのか、よりもどんな仕組みで出来上がっているのかの方が問題解決にも利用できるし応用も聞くんだけどね。

最初は構文を真似て使ってみる方が入りやすいんじゃないかなぁと思うな。

もう眠いぜ・・。

今日はこの辺で。