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; 親要素と同じ高さを指定することで、要素の中央にくる
参照:
明日は、先輩の個人アプリ発表会に参加してきます。Pythonを使ってポートフォリオを作っている先輩もいるそうなので、すごい楽しみです。
模試、Railsの復習にも力を入れて理解の定着に努めます。