PoipOipoN

ウルトラハイパー雑記ブログ。

フロントエンジニアを目指す話 2話 CSS覚えること多くない?

 

覚えることが多いCSS

ここ数年何かを暗記しようとか理解しようとか思って勉強した記憶が無かったので全て忘れないように記憶することは可能なのかと思うほどにCSSの勉強が心配になってきた。25歳ということもあるだろうが公務員試験に向けて頑張ってた時代はそこまで暗記に困った記憶が無かったのでショックである。比べる対象が10代なのがそもそも間違っているのだろうけど5年やそこらでここまで変わるとは思わなかった。今この記事を見ている10代の若者がいるなら本当に今のうちにいろいろ勉強しておきなさいとアドバイスしたい。人によるだろうが筆者はすでに頭が悪くなりつつあるみたいだ。とにかくそれなら余計にインプットだけではなく、アウトプットをする必要がある。頑張っていこう。

CSSをコーディングする場所

まず最初に疑問に思ったのがCSSはHTMLの文書の中に書くもんだと思っていたが、別にそうじゃなくてもいいらしい。というより上官に聞いたらHTMLファイルと別でCSSのファイル作ってくれた方が、メンテナンスとかいろいろ楽だから基本的には書きこまないよと言われた。他にも多くメリットがあるそうだが、実践段階に入っていないので理由は後回しにしてとりあえず、CSSを書く場所だけは覚えておきたい。

外部ファイル

名前の通り○○.cssというファイル名で保存して、後にHTML側でcssファイルを開くという方法。cssファイル側とHTMLファイル側に多少の工夫が必要だが、特に難しくもないのでこちらをまずマスターしておきたい。

cssファイル側にはコーディングの一発目に

@charset"UTF-8"

というコードを書く必要がある。文字化けを防ぐために必要なものである。書かないといけないものと覚えておこう。

cssを読み込みたいHTMLファイルを開き、<head>タグ内に

<link rel="stylesheet" href="CSSファイル名orCSSファイルの在処のURL">

というCSSを呼び出すためのコードが必要。

特に難しくもないので今後は基本的にこの方法を使ってHTMLとCSSを勉強する。

<head>タグ内に<style>タグを使用する方法

HTML文書の<head>タグ内に<style>ここにcssコーディング</style>という使い方をするだけでCSSを楽に書くことができる。

インライン

一部のデザインだけを変えたい時にstyleを属性として使用する、インラインというものがある。

<h1 style="color:red">

コーディングが上手な人はインラインをほとんど使わないらしいので基本的には使わない方法で頑張りたい。あとで書くがcssのプロパティdisplayに使用する値のinlineとは別である。

適用される優先順位

インライン > <style>タグ > 外部ファイル

外部ファイルで作ってサイト全体のイメージを作り、このページのデザインだけ少し変えたいなと思ったら<style>タグを使用する。というような使い方でいいはず。

 

この辺の知識はとりあえず忘れないようにマスターしておきたい。

 

cssを学ぶに当たって要素について勉強した

要素とはhtml文書においてタグで囲われたもので

<p>これらが要素</p>

だと簡単に解釈した。

要素にも親要素と子要素というものがあるが、簡単に

<div class="poipoi">

    <p>これは例です</p>

</div>

この場合だと<div>タグが親要素で<p>タグが子要素となる。CSSを勉強するにあたって必須知識らしい。

CSSの基本形式

セレクタ{プロパティ:値;}

  • セレクタ=タグ<p>など。<>で囲う必要はない
  • プロパティ=colorなど命令したいものを書く。
  • 値=プロパティによって値の種類と使い方は様々。
  • 最後の「;」を書かないと続けてコーディングする場合,次の行のcssの指示が反映されなくなるので書く必要がある。一つだけコードを書く場合などは書かなくてもいいが今はとにかく絶対書くものだとして理解しておく。後々書いたらまずい場面が出てくるのであればその時は修正。
セレクタにid名とclass名を使用する場合

idは#id、classは.classと書く必要がある。

複数セレクタをまとめて書きたい時

#id,div,pなど「,」で区切る必要がある。

適用先を指定したい場合

.class p のように半角スペースで区切る。

プロパティの種類と値

昨日使い方を勉強したものを記載。これからもどんどん使えるものを増やしていきたい。

color:red

文字色の指定。値は色の名前か、カラーコードと呼ばれる英数字の#FFFFFFのようなコードで指定する。カラーコードはググればいくらでも出てくる。

fontsize:1px or 1em

フォントサイズ指定。値はpxかemで指定。emは現在の大きさの倍率で指定できる。

text-align:center

文字の位置調整。値はleft、light、center。デフォルトはleft。

background:red

背景色。色の名前かカラーコードで指定する。

border:solid 1px black

文字周りに線を足すことができる。値は線の種類、太さ、色の順で書く。

線の種類はsolid(普通の線)、dotted(点線)、dashed(破線)、dooble(二重線)、none(無し)

プロパティを少し変えるだけで文字の上下左右に線を指定することもできる。

border-top(上線)、border-bottom(下線)、border-left(左線)、border-right(右線)

borderのみの場合は文字を囲む。

widthとheight

要素の縦と横の大きさを指定できる。widthが横幅でheightが縦幅。値はpx。

paddingとmargin

要素の内側の余白をpaddingで指定、要素の外側の余白をmarginで指定できる。

display:inline

要素の表示方法を決めるもので、値はinline、block、inline-block、none。

block

要素が縦並びで自動的に改行されます。

要素のwidthとheightも指定できる。

paddingとmarginの指定も自由自在。

要素の中身は指定しなければ自動的に横に長くなります。

p、div、ul、h1~h6などのタグは初期値がこれ

inline

要素が改行されずに横並びで配置されていきます。

幅、高さ、上下の余白の指定ができません。横のpaddingとmarginは指定できます。

要素の中身の文字や画像のデータに応じたサイズに自動的になります。

a、spam、imgの初期値がこれ

inline-block

二つの良い所だけを抜き取ったようなものでとりあえず一番強い。

全部できるもので優秀。ブログのヘッダにメニューバーを作りたい時などに便利。

 

今回の勉強まとめ

CSSはHTMLとちがって覚えるものが多いっぽいので大変。暗記だけではなく、使い方もしっかり理解する必要があるのでプログラミングの難しさを痛感。とりあえず今は楽しめているのでよしとする。

 

昨日つくったやつ載せ

実際はちゃんとわかりやすいように改行してます。これはただコピペしているだけのものです。なんかコードを記事に張る方法あるみたいですけどめんどくさそうなので今はスルー。それより勉強だよ。

HTMLとCSS

実行結果

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta chraset utf-8>
<link rel="stylesheet" href="untitled-1.css">
<tytle>css練習2</tytle>
</head>
<body>
<div id="headline">
<h1>CSS練習</h1>
<p>段落1</p>
</div>
<div class="main">
<h2>見出し2</h2>
<p>これは<span class="light"></span>です</p>
<p>
<a href="https://www.poipoipon.com/">メインページへ</a>
飛びます。
</p>
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

 CSSファイル

@charset "UTF-8";
html,body {
/*ページ全体の背景色をベージュ*/
background:#fffbf4;
/*全文字を中央ぞろえに*/
text-align:center;
height:100%;
}
h1 {
/*h1タグ内の文字色を変更*/
color:#f89174;
}
#headline {
/*id="headline"の下に点線を*/
border-bottom:dotted 2px #f89174;
height:50%;
background:rgb(162, 211, 235);
}
#headline p {
/*id="headline"の中のフォントサイズを1.2倍に*/
font-size: 1.2em;
}
h2 {
/*h2タグの文字色をオレンジに*/
color:orange;
}
a {
/*リンクの文字色をgrayに*/
color:gray;
}
/*↓id="nav"の中のulに対してCSSを適用*/
#nav ul {
list-style-type: square type none;;
text-align:center
}
/*id="nav"の中のulの中のliに対してCSSを適用*/
#nav ul li {
display:inline-block;/*inline-blockに変更*/
width: 80px;/*縦幅を80に*/
padding:10px 0;/*要素内側の縦余白を10*/
margin:10px 0;/*要素外側の縦余白を10*/
vertical-align:middle;/*縦の表示位置を中央に*/
background-color:skyblue;/*背景色をskyblueに*/
font-weight:bold;/*fontを太線に*/
color:white;/*文字色をwhiteに*/
}