リアイム

アウトプット&知識の共有

HTML入門② 基本 初めての方向けです

この記事では、HTMLについてご説明します。(CSS中心です)

サイト制作の最低知識として、知っておくべきものの一つです。

 

f:id:a1t2s2u2:20200218235718j:plain

 

前回の記事では、基本的な構造をご紹介しました。

 

 

 

今回は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ください。