#CSSの基本概念
基本的に「どこの、何を、どうするのか」という形で書いていきます。
またその際に：と；でコードを閉めていくことを忘れないようにします。
#文字の設定方法
font-size:20px;文字の大きさを変更できます。
font-family:~~~~;文字の種類を変更できます。
font-color 文字の色を変更できます。
width:10px
height:10px 縦横幅を調節できます。また、この技術は画像にも適応できます。
Widthが横、heightが縦の長さとして設定されます。
#背景色の設定方法
background-color:#~~~;
で設定可能です。
#クラスとタグの使い分け
li{color:~~;}
.selected{color:~~;}
この場合、HTML上でクラス分けをする必要があります。
具体的には
<li class=”selected”>~~~</li>
として、このリストタグがクラス指定されていることを明確にしてあげます。
クラスの場合は前にドットを付ける、タグの場合はそのままで大丈夫と
覚えます。
#ひな形を完成させる
基本覚えなくても良いそうですが、一からHPを作る際には
以下のコードを添付するとよさそうです。
<!DOCTYPE html>
<html>
<head>
<!--文字コードを「utf-8」にしてください-->
<meta charset="utf-8">
<!--タイトルを「Progate」にしてください-->
<title>Progate</title>
<!--「stylesheet.css」を読み込んでください-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>
今回はProgateのものを引用させていただきました！
#ヘッダーとメインとフッターを作成する
Bodyの中をいじっていきます。
まずは、HTML上にて
どこがヘッダーなのかということをお知らせしていきます。
設定方法は、
<div class="header"> </div>です。
これを main とか footer といった具合でクラス分けしていけば良いです。
復習を兼ねると、これを「クラス」と言います。
なので、ヘッダーをCSSでいじる場合には、
.header{}とすれば良いです。初めにドットを入れることを忘れずに！
.main{}
.footer{}
の手順でCSSをどんどんいじっていきましょう！
まず初めに、背景色の設定とそれぞれの範囲の大きさをピクセルで決めると良いですね。
#divをさらに分解しよう
<div class=”header”>
を例にもっと分解していきます。
この枠内に、
<div class=”header logo”>★</div>
でヘッダーのロゴを挿入し、
<div class=”header list”>★★★</div>
でヘッダーのリストを追加していきます。
次にCSSへ移って、リストを編集するのですが、
li{ List-style:none; }
にすると、リストの先頭に黒点がつかなくなるのでオススメです。
#横並びにする方法
文字を横並びにするにはCSSを使っていきます。
list{ Float:left;
という感じで書いていきましょう。
#CSSを用いてクラスの大きさを変更する方法
li{ padding:40px; }
のようにしていく。
ちなみに全方向別にしたい場合には、
Padding-top, padding-right, padding-bottom, padding-left
を使用します。
Padding:★ ★ ★ ★;
と一気に記述してもOKで、その場合topから順に時計周りで表示されます。
#header-listとfooter-listに同じ操作が反映されてしまうことを防止する方法
li{ Padding~~ }
などとしていると、headerとfooterｍの両方に反映されてしまうことを防ぐには、
.header-list li{ Padding~~~~ }
といった方法を使います。
#1文字だけ色を変えたい場合
<h1>★★<span>☆</span>★★</h1>
のようにHTMLで表記することが可能です。
#ボーダーの付け方
ボーダーを付ける際には、CSSにて
.logo1{ Border:10px solid red }
のように行います。
記号について説明すると、左から大きさ、棒の種類、色です。
Borderとだけ記述すると、logo1の周りを取り囲む形で設定されてしまうので、
左だけが良いとか、アンダーバーだけ欲しいという場合には
Border-topなどと方向を記述します。
#補足 divの使い方
<h3 class="section-title">学べるレッスン</h3>
で、h3であることを言明してあげてください。
#margin:; と padding:; を使い分けよう
前者が外枠、後者が内枠です。
#フォーム作成方法
<input>を書くと一行の欄が作成されます。
なんのための記述欄なのか明確にするために、
<p>氏名</p> <input>
などとします。
また、複数行書きたいときには
<textarea>～～～</taxtarea>を使います。
こちらは文章になるので最後に終了タグが必要です。
また、なんのための枠なのか明確にするために<p></p>を使って
用途を書くと良いです。
ちなみに、<input type=”submit”>とすると「送信」ができます。
<input type=”submit” value=”保存”>とすると「保存」にできます。
これをvalueを属性といい、valueに入る値は表示させたいものであれば
なんでもOKです。