HTML CSSの基本

25日目です。 HTML CSSですが、自分で練習問題を解いたことや調べたことで理解が深まりました。

そもそもHTML、CSSとは

HTML
・WEBサイトを作るための言語。別のWEBサイトに飛ぶためのリンクをつけたり、文章や動画を埋め込むことができる。また、各要素の意味や情報構造を定義している。左上に重力のある積み木のようなものであり、入れ子構造になっている。

CSS
・HTMLとともに使用される言語で、HTMLで指定した構造をどのように装飾するか指定する(文字や画像の大きさ、色、位置など)。

HTMLとCSSはどのように結びついているのか

・HTMLのタグの間にて、取り込みたいCSS(仮に「practice.css」と言うCSSファイル)を指定します。

<head>
  <link rel="stylesheet" href="practice.css">
</head>

プラウザで元々設定されているHTMLのデフォルト

Google Chromeや、サファリなど各プラウザごとに、最低限の見た目を維持するために元々デフォルトでCSSが設定されている。
ユーザーが異なるプラウザでHTMLを表示する際に、そのHTMLがデフォルトのまま設計されていると、それが影響して上手く表示されないこともあるため、CSS内に「リセットCSS」を書くことが多い。
例えば見た目に関わるbody要素などに、pading: 0; margin: 0;などど設定する。設定しないと、文字を左上などに詰めたくても(見えない)デフォルトの影響で余白ができるなどの現象が起こってしまう。

リセットCSSはこんな奴です。

body, html {
    height: 100%;
    background-color: white;
}

h1, h2, h3, h4, h5, h6, p, body {
    line-height: 1.77;
    font-size: 18px;
    color: #4a4a4a;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}  

備忘録として、忘れてしまっていたCSSを載っけておきます。
font-weight: bold; 文字を太くする(デフォルトではnomalになっている)
z-index: (数字); 数字が多いものほど前面に出てくる
line-height: 〇〇px; 親要素と同じ高さを指定することで、要素の中央にくる

参照:

www.htmq.com

www.htmq.com

qiita.com

qiita.com


明日は、先輩の個人アプリ発表会に参加してきます。Pythonを使ってポートフォリオを作っている先輩もいるそうなので、すごい楽しみです。
模試、Railsの復習にも力を入れて理解の定着に努めます。