WEBサイトを作成する時に必要不可欠なHTMLやCSSについて初心者向けに解説します。
名前は聞いたことがあるんだけどいまいち操作方法やどのような機能なのかがわからない人も多いでうよね？私も２年前まではまったく同じでした。
しかし機能性や活動域などを理解すると、自分でサイトをしていても不具合が出た時に変更したり修正したり出来るようになるので覚えておいて損はないでしょう。
この記事を読むことでパソコンやWEBの知識がまったくない人でも、今日からHTMLやCSS、PHPについて理解できると思います！
【超初心者用】HTML・CSS・PHPの違いは？
似ているようで実はまったく違う言語のこの３つの言葉『HTML』『CSS』『PHP』について解説していきます。
読み進めていくと途中で訳が分からなくなってしまった人は、また最初に戻って何度も読んでいただくと完全に理解できるようになると思います！
HTMLとは？
HTMLとは『Hyper Text Markup language』の略で、WEBページを作成するために作られた言語のことです。
テキストとはワードで書かれたような文章やメモのことを指しますよね。ここにハイパーが付いているのでもっとグレードUPしたテキストという意味でOKです。
もっとグレードUPしたテキストとは、画像や動画などのリンクのことでブログ記事やネットのニュースなどのことをハイパーテキストと呼びます。
なのでこのワードプレスのリンクの正式名称も「ハイパーリンク」と呼ぶんですね。
このハイパーテキストに見出しや段落、表などのマークを付けることで記事が読みやすくなったり文章として成立するじゃないですか？
そして「language」は言語という意味なので『見出しや目次などのマークが入ったハイパーテキストの言語』という解釈でOKですよ。
ちなみに、ネット上にある画像や文章なども保存する時にファイルの拡張子に,htmlを付けてHTML化すればブラウザ上で動かすこともできますよ。
ワードプレスでブログをしている人は、このHTMLを操作したり新しく作成して自分のブログに埋め込むという人は多いですね。
その際には『FTP』について知っておいたほうが良いと思いますので、こちらの記事を参考にしてくださいね。
CSSとは？
CSSとは『Cascading style sheet』の略で、HTMLで作成したWEBページの見た目を変えたりする場所のことです。
Cascadingとは「何段にも連なったとか連結された」とかの意味があり、styleは見た目で、sheetはシートそのままです。
つまり『何段にも連なった見た目を変更するシート』という解釈でOKです。
HTMLとの違いは「htmlは文書の構造を変えますがCSSはサイトの見た目やスタイル（例えばワードプレスのテーマや見出しの大きさ等）を変える時」に使用するんですね。
CSSの記述方法は２通りです。
２・外部ファイルにCSSファイルを作成して、HTMLファイルの中で読み込む
どちらかの方法でCSSを操作することになりますが、初心者の方は②の外部ファイルで作成したものをHTML内に埋め込むといった方法を覚えたほうが良いと思います。
もし記述する文章を間違えてしまっても外部ファイルなので、直接サイト内のHTMLに埋め込むまでは影響を及ぼすことはありませんからね。
ちなみに私はブログ初心者の頃に、なんの知識もないのにブログ内のCSSを変更してしまいサイトがぶっ飛んだり画面が真っ白になってしまった経験があります（笑）
もし私と同じようにサイトが真っ白になってしまった人は別の記事で対処法を紹介していますのでそちらを参考にしてくださいね。
PHPとは？
PHPとは『Hypertext Preprocessor』の略で、オープンソースの汎用スクリプト言語です。
初心者の方はこのあたりから段々と意味不明になってくるのではないでしょうか・・・（笑）
でも大丈夫です。初心者の方向きにしっかりと解説していきます。
まず「オープンソース」とはHTMLで作られたサイトをWEB上に表示させるための方法といった解釈でOKです。
よく「yahoo」や「Google」のホームページで何かを検索してそのページで右クリックすると『ページのソースを表示』という項目があるので１度クリックしてみるとわかりますよ。
ずらっと英語の言語が表示されましたよね？
この表示されたものがHTMLで作成したWEBページで、これをネットで見ている人に表示させる時にこのように変換されて表示されるわけです。
話をもとに戻しますが、PHPとはこのようなオープンソースのスクリプト言語で多くのWEB開発者やアプリ開発者などが使用しています。
しかしPHPはHTMLやCSSと比較すると、かなりハードルが高い知識になり通常はHTMLやCSS、JavaScriptなどを覚えてから学習する人がほとんどです。
WEB初心者の方には難しいため、あまり覚えることはオススメしませんが、必要最低限としての知識だけご紹介しておきます。
なぜかというとWordPressはPHPが使用されているからです。
PHPはHTMLファイルの中に埋め込むことができるので非常に便利です。メモなどにコードを書いたら拡張子を.phpで保存すればソースコードとして活用することが可能です。
ちなみに最近よく聞くのがワードプレスのブロックエディターを使用していてインスタグラムが埋め込めなくなったという話を聞いたことがあります。
これは最近になってインスタグラムだけがブログに埋め込む方法が変わったからなんですね。
ワードプレスのブロックエディターでインスタグラムを埋め込む方法については、別の記事がありますのでそちらを参考にしてください。
HTMLとPHPのメリット＆デメリットは？
似たような機能と思われがちな『HTML』と『PHP』ですがここで双方のメリットとデメリットを把握しておきましょう。
HTML
・テキスト画面が表示できれば簡単に始められる
・初心者にもハードルが低い
・成果を出しやすい
・データベースに接続できない
PHP
・データベースと直接連携できる
・動かすにはサーバーが必要
・初心者にはハードルが高い
・覚えておくとかなり有利
・しかしマスターするにはそれなりの環境が必要
『https：//～』の意味はなに？
おまけとして付け加えておく予備知識として、WEBサイトの頭文字に絶対付いている『https』について解説しておきましょう。
『http』とは「ハイパーテキスト・トランスファー・プロトコル」のことです。
トランスファーは送るという意味で、プロトコルは約束といった意味があります。
つまり『http』とは「ハイパーテキストがあるサイトに送ることを約束します」という意味があるんですね。
サイトの頭に絶対に付くのはこのような意味があったんですね。
そして『https』の『S』はセキュアという意味でサイトが暗号化されていますよ。という証明のようなものなんです。
この『S』が付いているサイトかどうかでそのサイトの安全性が図れると言ってよいでしょう。
最近は悪質なサイトに誘導して個人情報を盗むようなサイトが蔓延しています。
悪質なサイトかどうかを正しく見分け方方法があるのでこちらの記事を参考にしてくださいね。
まとめ
WEB制作に必要不可欠なHTML・CSS・PHPについて初心者向けに解説してみました。
・CSSとはサイトのデザインを変更したりできる
・PHPはオープンソースでHTMLと似ている
・初心者はHTML、上級者はPHPを覚えると無敵
・httpsになっていないサイトは悪質サイトの可能性大
自分でHTMLコードを作成したり、CSSでテーマを変更でき足りすると自分のサイトの魅力が一気に上がるはずです。
しかしいきなり全部を覚えようとすると無理なので１つずつ、まずはHTMLから勉強してみてはいかがでしょうか？
この記事がどなたかの手助けになれば幸いです。
