HTMLとCSSってナニ!? -1-

こんにちは!
ここではお問い合わせの多いカリキュラム内容について、数回に分けてリネオス福岡天神で学べることなどを紹介していきたいと思います。

HTMLやCSSという言葉を聞いたことありますか?

パソコンに詳しい人なら聞いたことや目にしたことがあるかもしれませんね。
ITに特化した就労移行についてやリネオス福岡天神のサイトを調べるときにはじめて知った人も多いと思います。

HTML(エイチティーエムエル)とCSS(シーエスエス)はそれぞれ別々のwebページを作成するための言語です。

HTMLの意味について

HTMLとは正式名称「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略称で、「エイチティーエムエル」と呼ばれるwebページを作成するための言語の一種です。
まずはHTMLを構成する単語の意味を見てみましょう。

ハイパーテキストとは

HyperTextとは、複数の文書(テキスト)を相互に関連付け、結び付ける仕組みのことです。直訳すると「テキストを超える」という意味になります。これによってテキストだけでなく画像や動画など複数のオブジェクトをリンクさせることができます。

マークアップとは

身近なものだと、雑誌や新聞などを想像してみてください。
タイトルや文章、写真などの情報が読みやすいように配置されていますね。
読者が見やすいように配置の指示を出すことを編集用語でマークアップと言います。

HTMLの正式名称の一部「Markup」がまさにこのことと同じことを指しています。ブラウザはこのマークアップされた情報をもとに表示するため、HTMLをつかって文字や画像の重要度を決めていきます。

まずはHTMLを見てみよう!

HTML/CSSを見たことはない人でもサイトなら見たことありますよね。
実はパソコンからだと誰でも簡単にHTML/CSSって見ることが出来きるんです。
GoogleChromeの場合、サイトの上で右クリックを押して「ページのソースを表示」を選ぶと、webサイトで使用されている言語が一覧で表示されます。

たとえばリネオス福岡天神の場合だと……

こんな風に英単語や数字や記号が使われている文章がドバっと出てきます。

これがリネオス福岡天神のサイトのHTMLの部分になります。

ざっくり内容の説明をすると、サイト上で表示させたい文字や画像などがHTMLには書いてあります。
「リネオス福岡天神」や「スキル習得・就職までの流れ」とかちょこちょこサイトの中で見覚えがある文字があると思います。
文字の色が白くなかったり、背景の緑色やオレンジの色もなにも書いてないけど!?と気づいた方もいらっしゃるかもしれません。そういった装飾する部分の指示はCSSを使います。

GoogleChromeやsafari、firefoxなどのブラウザはこのHTMLを読み込んで「重要な言葉は大きな文字で表示する」「リンクが設定してあるところは色を変えてわかりやすくする」などの指示に従ってwebサイトを表示してくれます。
このようにコンピュータが読めるように記述した文章構造をソースコードと呼びます。略してソースとも言いますね。

HTMLをどうやって使うの?

雑誌や新聞の大きな文字などは目を引くので「これはタイトルだ!」と人間はわかりますがコンピュータには目がないのでそのタイトルが重要なものかどうかはわかりません。
そこで、コンピュータに「ここの文字はタイトルです」「この文章は記事の中身です」と文章構造を指示する必要があります。

その時に使用するのが、h1やpなどタグと呼ばれる単語です。このタグはそれぞれ意味を持ったものがあり組み合わせることで、タイトルなのか文章なのかの意味を持たせることができます。

タグを使って文字を囲んでみると……

ブラウザではこのように表示されます。

Hello, Worldの言葉だけ太文字で目立つようになってませんか?これは文章をそれぞれ役割をもったタグで囲んでいるからなんです。
h1のはheadingの略語で見出しの意味を持っています。pはparagraphの略語で段落の意味を持っています。その指示にそってブラウザが表示してくれるのです。

どんなに複雑なサイトも基本はこのタグを書くことからはじまります。

余談ですが、Hello, Worldという言葉は「プログラミング言語C」(1978年)という書籍の中で使用されたことがきっかけでプログラミングの学習の際に使用されるようになったと言われています。
長年、なぜ著者はこの言葉をなぜ使ったのか?と誰もが考えてましたが、著者のひとりであるカーニハン氏がこの言葉を選んだ理由について「卵からヒヨコが出てくる漫画があるんだけど、それが Hello, World だったよ」と話していたとのインタビューが2019年に公開されたそうです。

見知らぬ世界への第1歩を踏み出してみるのにもピッタリな言葉だなと感じました。

お問い合わせでも「初心者ですが利用してもいいのでしょうか?」「経験者でないと難しいですか?」などのお問い合わせもたくさんいただきます。経験の有無は必要ありません。

初心者でも未経験者でも、どなたでも見学や体験が可能です。
興味があればお問い合わせフォームやお電話などからお気軽にお問い合わせください。