WEB(ホームページ)制作に必要な基礎知識「html」「css」は”小学生の算数”レベル。

まず、ざっくり説明すると、よくあるホームページを(自分で)作るのに必要な知識として「html」「css」「JavaScript(jQuery)」「php」という４つの言語を使います。

この言語とは、分かりやすく言えば「英語」とか「フランス語」とかのように、それぞれに書き方(文法)が違う感じです。”コードを書く”とか言ったりします。(要するにその言語で文章を書くみたいなイメージです)

で、僕が実際に仕事としてやってる感覚で、この４つの言語があれば、”完全オリジナルで良い感じのホームページ”が作れたりする訳ですよ。(WordPressっていうCMS(コンテンツマネジメントシステム)を使います)

ただ、”完全オリジナルで良い感じのホームページ”だけじゃなく、”簡単(安く)で良いから形上ホームページ が欲しい“っていう人も結構いるんですね。(最低限の機能があれば良い)

その場合「html」「css」だけ理解しておいたら、マジで何とかなっちゃう訳です。

多くの先人たちのお陰で、色んな無料のテンプレートが配布されているので、そういうものを使えたりするからですね。

加えて「html」「css」の２つが読めてしまうと、ほんと何となーく「JavaScript(jQuery)」と「php」が理解出来る訳ですね。(WEBのコードの構造が理解出来るという感覚を掴めるから)

しかもこの「html」「css」が、小学生で習う足し算や引き算レベルで理解出来ちゃう訳です。(これはマジです)

みんな知らないワードが出てくると「何となく難しそう」って嫌がったりしますが、やってみると意外に簡単だったりするわけですね。

で、僕が強く言いたいのは、今回のコロナさんの影響で、リモートワークを強いられたり、家で何も(仕事を)することが出来なかった人たちは、これから”生きるために学ぶ必要がある”と思います。

その中でも、入りやすく、分かりやすく、よく使う言語として「html」「css」がオススメということです。

「html」ってどんな言語？

まず「html」とは、”ホームページ を作る上で基盤(ベース)となる言語“になります。まずこれがないと始まらない感じですね。

この「html」で書いたコードに対して、「css」「JavaScript(jQuery)」「php」など、他の言語を使って作り込んでいくイメージです。

なので「html」を理解してなくて、ほかの言語だけ知っていてもホームページ は作れないってことになります。

具体的にどういうことが出来るかというと…

• 見出しを書く
• 文字や文章を書く
• リストを作る
• 画像を挿入する
• ブロック(枠)を作る

とか、簡単に言うとそんなイメージですね。

皆さんがいつも見ている全てのページの裏側にはこの「html」で書かれたコードが隠れています。

隠れているというよりは、実はウラ側は全部コード何ですが、そのコードによって具現化した文字や画像が表示されてる感じです。

ただこの「html」では、デザイン(装飾)することが出来ません。コードを書いたは良いけど、表示される内容は、ぜーんぶ黒文字とかで、文字のサイズも画像の大きさも選ぶ事は出来ないのでぐちゃぐちゃです。

要するに「html」は”骨組み”しか作れないんです。そこで必要になってくるのが「css」ですね。

「css」ってどんな言語？

「css」という言語は、それ単体では使う事はほぼありません。「html」で作った”骨組み”に対して「css」を使って装飾していくイメージの言語です。

例えば…

• フォントを変える
• 文字のサイズや色を変える
• 画像のサイズを変える
• 背景に色を付ける
• ※要素をアニメーションさせる

といったイメージですね。

要するに「html」と「css」は常にセットじゃないとダメって事です。何となくイメージが湧きましたか？

「css」は「html」に対して、基本設定(フォントを設定したり全体のサイズ感を決めたり)を行うのはもちろん、デザイン作業(色を変えたり、線で囲ったり、角を丸くしたり)も出来る言語となります。

最近は「css」も進化して”要素をアニメーションさせることも可能“になりました。(例えば、画像がクルクル回ったり、下からフワって出てきたりする感じです)

”※”をつけた理由は多少の「JavaScript(jQuery)」の知識も必要になる可能性があるからです。

ここまで理解出来ればお分かりだと思いますが、「骨組みを作って(html) + デザインすること(css) = WEB(ホームページ)制作」なんですね。

で、全部１から自分で作れなくても良いんです。

もともと先人が作ったテンプレートをカスタマイズするために、最低限「html」と「css」という基本言語を学んでおけば良いよってことです。

たくさん言語がある中で「やりたいこと」を基準に必要な言語は限られている。

プログラミング言語って言えば沢山あるんですが、正直「自分が何をやりたいか？」で必要な言語って決まってくるんですね。

今回の場合、ただ純粋によくある「WEB(ホームページ)制作」をやる場合は「html」と「css」が重要だよって話なんです。

例えば「LINEの様なチャットサービスを作りたい！」とか「会員登録やショップサイトのシステムから作りたい！」ってなれば、もっと違う言語を学ぶ必要があります。

そういったシステムから作る人達のことを総称して「プログラマー」と言うわけなんですが、ただ、ホームページを作る程度であればそんな難しい勉強をする必要はありません。

もっと想像しやすく言えば、シンプルにホームページ制作をするだけなら「文系」でも大丈夫で、複雑なシステムから作るってなると「理系」の要素が必要なんですよね。

僕は完全に「文系」で、理系的には圧倒的にバカの方に分類されるんですが、「html」と「css」が非常に分かりやすく作られた言語であることから、小学生の算数レベルで理解出来たわけです。

それと面白いのが、この”全ての言語が常にアップデートされている”ということです。

先にも言いましたが、これまで「css」には”アニメーションの機能はなかった“んですね。それまでは、全て「JavaScript(jQuery)」という別の言語を使ってアニメーションさせる必要があったんですが、今は「css」だけで出来る様になりました。

新しい要素だけではなく、既存のコードの書き方もよりシンプルで便利に使える様にアップデートされていっています。(それによって「仕事はかどるわぁ」ってなったりします)

アップデートがあるということは、”トレンド“もあるんですね。「今はこのコードの書き方がオシャレだよねー」とか。(マニアック)

知らないのに「難しそうだから嫌い」で終わらせない。

人って、”知らないを嫌う傾向にある”んですが、もうそうも言ってられないですよね。

これからどんどんリモート化して、WEBの知識に疎い人達はどんどん時代に乗り遅れていってしまう状況で、確実に新しいことを始めないといけないわけです。

そんな中で「html」と「css」だけ頑張って勉強すれば「仕事になるよ」って、実際にそれでご飯を食べさせてもらってる僕が言ってるんです。

やるかやらないかは自分次第なんですが、”やることがないならやっといたら良いよ”って感じです。

以前紹介した「Adobe(アドビ)製品の知識」もそうですが、マジでこういう知識があって、スキルが使えるだけで”今は”仕事になるんです。

参考記事 : 在宅ワークを実現させるために最低限知っておきたいAdobe(アドビ)製品の知識。【Adobe(アドビ)アプリケーション入門(知識準備編)】

ただ、この今もリアルタイムで、すでに危機感を持って始めてる人は沢山いると思います。そしてその需要を掴みに行くと思います。

自分がスキルを手に入れた時に、あなたを必要とする環境がどれだけ残っているかを考える必要があります。仕事になるのは今だけかもしれません。

ただ、先に掴んでいることが大切なのは分かりますよね。

だからやっぱり行動は早い方が良いし、それには何でも経験してみるのが良いと思います。

僕も沢山の「難しそうだから嫌い」を克服して、今仕事としてやらせてもらっていることが沢山あります。

皆さんも最初から嫌わず、色んなこと楽しめるように頑張りましょう。

では、またね。