Webサイト制作～プログラミングの基礎知識

Webサイト制作の基礎『HTMLとCSS』

今回は、プログラミングの基礎知識についてお話しします。
と言っても、
『HTML（HyperText Markup Language）』は、プログラミング言語ではなくマークアップ言語と呼ばれます。

簡単に言うと…
マークアップとは、コンピューターに構造と実行したいことを示す目印、です。
例えば…
「ここは、赤太文字にして下さい」
「ここは、黄色マーカーにして下さい。」
とか…です。

その際に使用するのが、大なり小なりの記号で囲まれた＜タグ＞です。
そして、
<タグ>で囲まれた要素にデザイン・スタイルを加えるのが、スタイルシートと呼ばれる『css（Cascading Style Sheets）』言語です。

そんな【HTML】と【CSS】について簡単に説明していきます。
これさえ理解していれば、Webサイト制作は、SIRIUSやワードプレスといったツールを活用しなくても綺麗に作れます。

Web上では、htmlファイルに記述したことが表示されます。
ただ文章をずらずらと書くだけなら、文字だけでもいいですが…
そんなサイト見たことないですよね（苦笑）

html上で使う主なマークアップタグは、（<>は省略）

などが挙げられます。
もちろん他にもありますが、初歩的なものだけにしておきます。

Headerのhと重要度を表す数字の組み合わせのh1,h2.h3などは、「見出し」、
div(division)は、ブロック（領域）、
p(paragragh)は、段落、
spanは、範囲、
aは、リンクを表します。

a以外の４要素の関係を簡単に絵で表すと…
h-div-p-spanの関係性
こんな感じです。

「divとpの違いは何だ？」ってよく聞かれますが…
p要素の配置・デザイン・構成の指定をするのがdivって感じで覚えておくとわかりやすいと思います。
（上の画像右側では、横並びの指定）

実際は、画像と段落をどう構成するかなど、ブロックごとによってデザインを変えるのに活用します。
そして、そのデザインを決めるのが、【css】です。

CSSがないと、Webサイトはただの箇条書きのように要素が並んでいるだけになります。
CSSの説明画像
つまり、こういうことです。
このようなデザインにする際、各要素にclassを付けます。

画像を左寄せにして、文字を画像の横に置きたい場合、
<img class=”left”>
とhtml上に記載し、css上で、

.left{text-align:left;}

1	.left{text-align:left;}

と記述することで、画像の左回り込みを指示することになります。
（※左寄せにしたい要素が画像でも文字でもtext-alignを使います。）

しかし、上の説明画像において、一番上の画像1と文章1をdiv要素で囲まないと…
cssの説明２
文章1が短い場合、文章2が繰り上がりを起こしてしまいます。
これでは、デザインも総崩れです。
divタグは、このようなブロックの細かい設定をすることが目的とされています。

Webサイト制作に必要な【HTML】と【CSS】について、簡単に説明しましたが…
もっと学びたいなって思っても、現在、これらだけを教えるスクールはあまりないでしょう。

なぜなら、htmlとcssなら独学でもある程度は習得できるし、他の言語を学ぶ時に、スクールのカリキュラムに必ず入っています。

プログラミングに興味を持ったあなたには、今ならpythonを学ぶのをおすすめします。
今はやりの『AI（人工知能）』の開発言語です。

そして、アプリ制作する時にも必要となる言語でもあります。

はっきり言って、アプリ制作できた方が間違いなく稼げます！
個人で数百万DLのアプリをリリースし、稼いでいる人もたくさん☆彡

今では、ノーコード（コードを一切書かない）でアプリを制作しビッグマネーをゲットしている人も。
↓こちらのYoutube動画では、そんなアプリが紹介されています。↓

現在もテレワークが続いていると思います。
通勤に使っていた時間を新しい知識習得の為に使ってみてはいかがでしょうか。

では。