PROGRAMMING

HTMLとCSSの基本を現役SEが解説【PHPも少し】

eyecatch
悩み人
HTMLとかCSSってなに?

 

今回はこんなお悩みを解決します。

 

マナブさんやマコなり社長の影響でプログラミングに興味を持っている人は少なからずいると思います。

でも、ちょっとイメージしづらいですよね?

 

普通に生活していたらHTMLやCSSの中身なんて気にしなくていい世界です。

 

でもでも、副業でプログラミングってかなりオイシイです。

 

電話やスカイプで会話できれば、直接お客さんと会わなくても完結できるので、毎日出社はできないけど家では時間がある、といった人に適しています。

子供が中学生ぐらいになった主婦や、時間がある学生はスキルを磨きつつお金ももらえるのでイイですね。

副業で経験を積めば、いずれは会社に勤めることも可能だと思います。

 

今回はそんな副業プログラマーのとっかかりになるHTMLとCSSのイメージを掴んでもらうため、HTMLとCSSの基本を解説していきます。

 

あと、最後にちらっとPHPの概要だけ触ります。

 

この記事を書いている僕は、現在システムエンジニア8年目なので「現場ではこんな感じですよ」ということも交えて書いていきます。

HTMLとCSSとは?

what_html_css

まずは、HTMLとCSSの基本的な知識からです。

それぞれの役割を知るとイメージしやすくなるので理解が進みます。

 

【HTMLとCSS】HTMLについて

HTMLはHyper Text Markup Languageの略です。

HTMLではWebページの構成を定義します。

 

これだけだとわからないですよね。

 

たとえば「これは大見出しで表示する」「これは箇条書きで表示する」といったことを決めます。

 

これにはタグと呼ばれるものを使います。

 

タグについては、この後のHTMLの書き方でもう少し詳しく解説していきますね。

 

ひとつ覚えておいて欲しいのが、「デザインまではHTMLでは決めない」ということです。

背景色、線の太さや種類(実線・点線)などのデザインはCSSの方で決めます。

 

このあたりは概念の話になるので、今のところは「HTMLはページの構成、CSSはページのデザインを決めてるんだなぁ」ぐらいでオッケーです。

 

▼技術屋小噺(クリックで開きます)

ちょっと上記の補足です。

気になる人だけ読んでください。

HTMLの最新バージョンであるHTML5は、Web技術の標準化をはかるW3Cによって「セマンティックであること」が推奨されています。

セマンティックとは【意味的】ということです。

つまり、「HTMLとはWebページの構成を決めるものであって、デザインを決めるものではない」と言っています。

デザインはCSSで定義すべきで、HTMLとCSSで担当範囲を明確にした感じですね。

実際に仕事をしていて、CSSを修正しても中々Webページが思った通りにならないときがあります。

この原因として、HTML側でもデザインの指定があったりします。

なので、W3Cの言っていることは「まぁ分かる」って感じですね。

この流れで、実はHTML5では<center>タグが廃止されています。

HTMLは「これは何か」を定義するだけで、「どこにどう出すか」はデザインの範疇だからです。

とはいえ、過去に作られたページは効いてもらわないと正常に表示できなくなるので、廃止になった途端効かなくなるわけではありません。

これから副業のために勉強しようとする人にとっては必要な情報なので書きました。

成果物を納品したときに構成がめちゃくちゃだと保守性が下がります。

保守性とは、修正のしやすさのことです。

保守性の低いコードを納品すると、プログラマーとしての信頼を損なうことになるので大切にしてください。

 

【HTMLとCSS】CSSについて

CSSはCascading Style Seetsの略です。

CSSでは、Webページのデザインを定義します。

 

フォントは?何色?中央寄せ?

 

すべてCSSで決めます。

 

HTMLとCSSを分離していることのメリットは、HTMLが同じでもCSSを変えることで見た目を変えることができる点です。

これはWebページの見た目を変えたいときに修正を少なくできるので嬉しいです。

CSSメリット

 

HTMLとCSSの書き方

how_to_written_html_css

ここから具体的にHTMLとCSSの書き方を解説していきます。

一番単純なカタチで解説するので、あまり構えずに見て頂けたらと思います。

HTMLの書き方

まずは、HTMLからです。

 

かなり簡単なサンプルですが、ファイル名を「HelloWorld.html」にしてダブルクリックすると表示できます。

basic_html

html_browser

 

1行目のDOCTYPEはおまじないみたいなものだと思っていてください。

2行目以降から<html><head><body>があります。

これがタグと呼ばれるものです。

 

参考

<  >で囲ったものをタグと呼び、<html>は「htmlタグ」、<head>は「headタグ」と呼びます。

タグは<〇〇>hogehoge</〇〇>のように、基本的に対応する閉じタグが必要です。

ですが、metaタグのように開始タグと閉じタグの間に何も書かないタグは閉じタグを書かなくても大丈夫です。

このあたりは、実際に学びながら理解していけばオッケーです。

 

そして、bodyタグの中にh1タグがあります。

h1タグは「大見出しです」という定義になります。

 

headタグの中にmetaタグがありますね。

headタグは画面に出さないけど、必要なものがある場合に色々書いていきます。

アドセンスの申請をしたことある人は、headタグ内にコードを貼り付けましたよね。

 

HTMLはざっくりとこんなところです。

 

CSSの書き方について

次はCSSです。

こちらも簡単なサンプルをどうぞ。

basic_css

css_browser

 

さっきのHTMLに赤枠の部分を追加しました。

styleタグの中に書かれているのがCSSになります。

 

CSSの内容は大体こんな感じ。

h1・・・h1タグのデザインだよ!

width・・・幅は300px分だよ!

color・・・文字は赤色だよ!

background-color・・・背景色は薄青だよ!

border・・・幅2pxの点線だよ!

 

 

ちなみにCSSを別ファイルにして、HTMLからそれを読み込んでも問題ないです。

css_read

css_file

ちなみに、「{」の前の何にデザインを適用するか決めている部分をセレクタと呼び、どのようなデザインにするか決めているところをプロパティと呼びます。

 

現場では、このようにCSSを別ファイルにして読み込む方が一般的です。

 

理由は、保守性が高いからです。

実はCSSは1つの画面に複数ファイル読み込むことができます。

 

なので、ヘッダーやフッターなどの全画面に共通するデザインは「common.css」にして、画面特有のデザインは「画面名.css」にすると作りやすいです。

 

僕が使っているテーマのAFFINGERは現状(2020/2/13時点)メモボックスの背景色を設定から変えることができません。

これはメモボックスで使っている「st-in-my-box」という定義がアチコチで使われているため、迂闊に変えることができないからだと思われます。

 

このように一つの定義をむやみに使い回すと修正するときに大変なので、ちゃんと使い分けることをオススメします。

 

他にも色々な設定ができますが、基本はこれだけ。

 

こうやってバラして見ると意外と簡単ですよね。

 

最後にちょっとPHP

PHPとは、Hypertext PreProcessorを再帰的に略したものです。

しっくりこないのはわかります。

僕もしっくりきていません(笑)

 

PHPは基本的にHTMLとあまり変わらないのですが、決定的にちがう部分があります。

 

それは動的に表示を変えられること、です。

 

「動的に変える」というのは、スマホで見たときはスマホ用の画面になって、パソコンで見たときはパソコン用の画面になることを言います。

 

予め決められた1つのことしかできないんじゃなくて、その時々によって動きを変えることを「動的に」変えると表現します。

 

田中さんがログインしたときに「ようこそ 田中 さん」と表示して、佐藤さんがログインしたときに「ようこそ 佐藤 さん」と表示するのも「動的に」変えたと言うことができます。

 

反対に常にパソコン用の画面しか表示されなかったり、常に「ようこそ!」しか表示されないことを「静的な」表示と言います。

 

動的と静的のイメージは掴めたでしょうか?

 

HTMLとPHPの話に戻ると、HTMLは静的な表示しかできずPHPは動的な表示ができることが大きな違いです。

 

PHPの記述方法はこんな感じです。

basic_php

 

<?php やりたいこと; ?> ですね。

このサンプルは表示した年月日を動的に表示しています。

 

他にもスマホとパソコンで処理を変えたり、ブログのトップページのように投稿している記事分繰り返して表示したり、様々なことができます。

 

今回の記事ではこれぐらいに留めておきますが、また環境設定の方法や他の便利な構文なども紹介する予定なので、よかったらそちらも読んでください。

 

まとめ:HTMLとCSSは意外とカンタン

summary

いかがだったでしょうか?

 

HTMLとCSSは聞いたことがあるけどむずかしそうというイメージから、少しずつ積み上げればできそうというイメージに変わったのではないでしょうか。

 

副業でプログラミングをする人はこれから先どんどん増えていきます。

 

なので、今のうちから勉強しておくことでアドバンテージになる思いますよ。

 

それでは、今回は以上です!

 

-PROGRAMMING
-, , ,

© 2020 eureka