HTML入門② 基本 初めての方向けです
この記事では、HTMLについてご説明します。（CSS中心です）
サイト制作の最低知識として、知っておくべきものの一つです。
前回の記事では、基本的な構造をご紹介しました。
今回はCSSという分野をご説明します。
上の文字の『CSS』という文字は青色になってますよね。
CSSとは、サイト上の文字の色を変えるといったデザインを担う言語です。
色の変更だけでなく、大きさや位置や太さも変更できます。
では簡単な例を出して解説いたします。
<a>こんにちは</a>
というコードは、サイト上では
こんにちは
と表示されます。
こちら文字を大きくしたいとき、
<a>タグを<a style="font-size: 30px;">とします。
style=" "←この点々のなかにCSSを書くことができます。
今回は文字の大きさを指定するため、
『font-size:〇〇px;』というものを使います。
〇〇には好きな大きさの数字を入力してください。pxは単位です。
目安が20pxで数値が大きいほど文字は大きくなります。
では、
<a style="font-size:30px;">こんにちは</a>
とした場合は、
と表示されました。上記の文字と比較すると、大きくなったことを実感する事ができます。
他の設定方法もご紹介します。
<a style="〇〇"></a> で、
〇〇の中身の例一覧
・color:red;
文字の色を赤色にする
・font-weight:800;
文字を太くする。こちらは600,700,800,900などに設定します。
・ background:pink;
背景の色をピンク色にする。
以上のCSSを全て設定するとどうなるか…
<a style="color:red;font-weight:800;background:pink;">こんにちは</a>
コードはこうなります。
サイト上での表示は
となりました。
どうですか？CSSは見やすくするために使用する言語ですが、これでは逆に見にくいですね。
色を変える必要があります。色はredやpink、blue、yellowなどでも設定可能ですが、カラーコードを検索すると、rgbなどもでできます。より細かい色を設定する事ができます。
この記事でコード紹介をしている文字の背景の水色は「#CCFFFF」という色を使用しています。
こういう色もおすすめです。
<a style="color:white;font-weight:800;background:black;">こんにちは</a>
CSSはいろいろな設定があります。
用途に応じて検索したりして、CSSの知識を深めていくのがおすすめです。
Web制作の言語（HTML,CSS,JAVASCRIPT）は独学でも十分に学習可能です。
javascriptは動作の言語なので、完全にプログラミングです。
しかし、javascriptは必ずしも必要ではないので、学習しなくともサイトは一応作る事ができます。こちらの言語については、次回ご紹介する予定です。
javascriptを用いたプログラムの例を載せます。
<html>
<body>
<input type="text"id="text_field"><button onclick="check">確認</button>
<script>
function check(){
var text = document.getElementById("text_field").value;
alert(text);
}
</script>
</body>
</html>
こちらのプログラムをサイトで表示させると、
となります。
ブログでは動的処理がカットされ、実行する事が禁止されていますが、入力欄に文字を入力後、確認ボタンを押すと入力した文字が表示されます。
なんか一気に難しくなりましたね。
動的処理プログラムは<script>タグ内に入力します。変数や代入の知識、型についても知っておかないと理解できません。
詳しくは次回。
記事を読んでいただきありがとうございます。
今回はCSSを中心にご説明しました。CSSは簡単だったと思いますが、最後のjavascriptのサンプルはとても難しかったですよね。javascriptを習得すると、ゲームを作る事ができるようになります。
CSSとは全く違うことをしているように見えますよね。デザインと動的処理では難易度が全く違います。つまずく方もいると思いますが、慣れれば簡単にサイトを制作する事ができます。
htmlやcssといった言語を説明するのはとても難しく、なかなか理解できないかもしれません。
何か個人的に聞きたい場合はTwitter:@riaimu1222にDMください。
