第5回webのひみつ(cssについて)

皆さんこんにちは。
インターン生の明瀨と申します。

今回はCSSについてまとめていきたいと思います。

まず、CSSでの役割はHTMLで書いた内容をCSSを使用して体裁を整えていく際のレイアウトやデザインに関する情報を書くものとなっています。
これはCSSを使用しなくてもHTMLに直接指定すれば出来るのですが、ごちゃごちゃになってしまいすごくわかりずらく、役割を分けて使用していくために、利用されました。
現在のHTML5ではなどのstyleの指定のタグなどは廃止されて、CSSでしているのが今の基本となっているそうです。

次にCSSの大事な要素について書いていきたいと思います
p{witdh:10%;}:
上記のタグがあったとします。
こちらの左から、
p=セレクタ
witdh=プロパティ
10%=値
の三つの要素を書いていくことが主な基本的な書き方となっています。
しかし、htmlの方で、

と指定があったとき、
cssでは
.tamesi a{}
のセレクタの部分にdivのclassを指定したあとに、テキストの指定をしたかったので、aを追記するといったように、少し基本と違う書き方もあるので、こちらも学んでみてください。
その他にも様々な要素があります。
次にその要素うち良く使うものについて書いていきたいと思います。
まず、よく使われるのはwidthです。
こちらは幅を指定する際に使用するものとなっています。
それと一緒に使用するのは高さを指定するheghtというプロパティです。
この他にも、余白を決めるmargin、要素の配置一を指定するposition、要素の表示形式を指定するdisplayなどが存在しています。
また、これらの要素は
p{
height:10px;
width:20px;
margin:25px;
position:fixed;
float:left;
}
のように組み合わせて使うことで、今回の場合は高さ10px、幅20px、余白が25px、配置位置が画面のスクロールに合わせて固定、配置位置が左側のように詳細に指定して要素を移動させたり、浮かせたり、はたまた、消したり出来るので、これらのプロパティをCSSを書いていくには、これらを覚えていくことが重要となってきますので、覚えてみて下さい。
これ以外にもまだまだあるので、調べてみて下さい。

今回はこの辺で終了にしたいと思います。次回は、CSSでのアニメーションなどについて書けていけたら書きたいと思います。閲覧ありがとうございました。
良ければまた見て下さい。

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー