育児や教育ばかりではなく、たまには、プログラミング講師らしいことも記事にしないと「ブログの説明と違うじゃないか」と怒られそうですね。
そこで、プログラミングに関する記事として第一回目はプログラミングを学習するにあたって、誰しもが一度は通るであろう、HTMLとCSSの概要についてご紹介します。
環境として、ざっくりと説明しますと、機種:MacBook Air、OS:catalina、テキストエディタ：VSCordeを使用しています。
HTML/CSSの役割
これらは、プログラミング言語というよりも、マークアップ言語と言われるものなので、プログラマーの方に「プログラミング言語ではHTMLとCSSができますよ」と言ったら、つっこまれる可能性があります。
しかし、とても大切な言語であるので、これから覚えていきましょう。
HTMLとCSSはどのような働きをするかというと、Webページの見た目を作ります。
詳しい働きとしては
・HTMLは、言葉や画像の表示
・CSSは表示した言葉や画像の修飾
を行います。
HTMLの簡単なコードを見てみよう
こちらの、<head>や<body>という大きな枠があり、それぞれに表現したいものが違います。
<head>タグには、そのページの初期設定を行います。
<body>タグにはページで表示したい、文字や画像などを記述していきます。
コードの始まりは<○○> 、終わりは、</○○>という書き方になっています。
その間に書かれている内容が、その部分で反映されることになっていきます。
（<!–形式の決定–>といった書き方はコメントアウトといって、表示されないないようになっています）
今回の場合では、これを表示してみると以下の通りになります。
作ったHTMLを画面に表示するためには
表示の方法は、GoogleChromを開いて、以下のようにファイルを指定していきます。
ここで表示されるものは、サーバーを経由していないので、見ることができるのは、自分だけです。
なので、いろいろ試してみるとよいですよ。
おわりに
今回はここまでにしておきましょう。
今回は、Webページの見た目をつくるのが、HTML/CSSの仕事なんだな、と理解してもらえばそれで十分です。
普段見ているページはこのHTML/CSSで作られていることを知ると、またページの見え方が変わってくるのではないでしょうか。
これから、１週間に１記事程度、まずはHTML/CSSについての記事を定期的に上げていこうかと思います。
コードの書き方や使い方など、興味がある方は、そちらもご覧ください。
コメント