初めてのCSS-(1)-初めてのCSS

プログラミング/初めてのCSS/初めてのWeb基本//

記事の紹介

この記事ではCSSの簡単な紹介をします。

CSSはページのデザインを設定するもの

前章まではHTMLの紹介をやってました（もし、まだ初めてのHTMLが終わってない方は初めてのHTMLを聞いてから初めてください。）。そこでは、主に見出しや本文など、文書の構造を定義するものを説明しました。CSSはこれらに文字の種類や色などの見栄えを設定する仕様です。HTMLの至るところで働くCSSに対して学習して行きましょう。

Webページの見映えを設定する

Webページでは、ただ文字を表示するのではなく、文字の書体や色、図形の配置や色など、閲覧者が読みやすいようにデザインする工夫が必要となります。昔は以下の例のように、HTMLのタグだけで無理やり設定したりしました。

<!DOCTYPE html>
<html>
<body>
テキスト１
	<center>テキスト２</center>
	<font color="red">テキスト３</font>
	<font size="13">テキスト４</font>
</body>
</html>

完成ソース

このように、HTML中に見映えに関するタグを入れてしまうと、その文書は色んな所に設定を反映させるのが不便になってしまいます。

例えば、パソコン用のおおけな画面を想定して作ったページが、スマートフォンでは想定したデザインが出来なくなって、余計に文字が小さくなったり、要らない改行が入る可能性がある、ということです。

このような場合は、文章の構造（章、段落、見出しなど）と、見映え（色、文字の大きさ、フォントなど）を切り離すことができれば、見映えのみの修正で済ませるようになりますね。

その時、導入されたて、見栄えをしてするためのルールが「CSS」です。

一番わかりやすのが私が趣味で作った「(プリコネ)ユニオンバースト再生機」です。ボタンを見映え良くするために、スマートフォンの接続の時とPCの接続の時にボターんがサイズを画面の見栄えに合わせて長さをCSSで調整して置きましたので、後で確認してみてください。

とにかく、このように文書の見映えを切り離し、用途別のCSSを適用することで、色々なデバイスで最適な状態で表示することが出来るようになります。

Web開発-初めてのCSS

プログラミングメイン

プログラミング
このサイトを運営しながら勉強したものです。どなたでもいいですので役に立ってたら幸いです。Web開発 プログラミング初心者にもおすすめできるWeb開発の講座です。 初めてのWeb開発の基本初めてのHTML初めてのCSS初めてのJavaScriptJSP入門JSPWebゲーム開発canvasの...