初心者必見！！プログラミング基本講座

プログラミングを始めたいけど

何から始めればいいのか。

そもそもプログラミングって何？

とお思いの方多いのではないでしょうか？

実は私もその一人でした。

『プログラミングって難しそう…』

『HTMLとかCSSって何？』

それらが先行してしまい、挙げ句の果てには

英語やらカタカナの横文字が多いことで

更に難しさを感じてしまっているのでは

ないでしょうか？

当ブログではプログラミング初心者へ

向けわかりやすく解説していきますので

最後までお読み頂ければと思います。

プログラミングとは？
プログラミング言語
HTMLとは？
- HTMLでできること
HTMLの基本
まとめ

プログラミングとは？

そもそも当たり前のように言われている。

プログラミングやプログラマーとは

一体なんでしょうか？

ざっくりいうとプログラミングとは

『コンピューターを動かすのに必要な指示や

命令をする指示書のこと』です。

人であればアイコンタクトで意思疎通が

できたり、空気を読むということができますが

コンピューターにそれはできません。

コンピューターにはコンピューターが

認識できるような言葉を使って

説明（指示）する必要があります。

コンピューターはプログラムがなければ

なにもできません。

一連の流れを指示(プログラム)することで

初めて動き出します。

またプログラマーはやりたいこと、

作りたいものを形にするために

コンピューターに命令する

プログラミング（指示書）を

専用の言語を使って書く人たちのことです。

プログラマーというとWeb制作や

IT関連の仕事をイメージされるかと

思いますが、現在ではAI（人工知能）の開発や

生活必需品であるスマートフォンの

アプリ開発等で欠かせない職業となります。

プログラミング言語

プログラミングには数多くの種類とやり方が

あり、マイナーなものを含めると数百種類

あると言われています。

ですが現在で実際使われているものは

30種ほどとなっております。

プログラミング初心者でも耳にしたことが

あるものですと

HTML
CSS
JavaScript
PHP
Pythton

などがあります。その言語ごとに特徴や

得意とするものが分かれており、使い分けが

されてます。

ここでは一つ一つ触れませんが最初に

学ぶとしたら『HTML』と『CSS』が

覚えやすいと思います。

『HTML』はwebページを作成する上での

基礎部分となり『CSS』は

文字の色を変えたり、文字のサイズ、

フォントを変えたりできます。

この二つを合わせることで簡単なwebページが

作成できます。

これらを『静的ページ』と呼びます。

静的ページとは入力した内容が変わらず

表示されるページのことを指します。

今お読み頂いているこのサイトも

静的ページです。

対義語として『動的ページ』というものも

あります。

動的ページは入力した内容によって変わる

webページのことを指します。

ここら辺は

「そうゆうのがなんとなくあるんだなぁ」

という認識で問題ございません。

HTMLとは？

「ハイパーテキスト・マークアップ・ランゲージ（HyperTextMarkupLanguage）」のことで、WEBページを作成するための言語です。
見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示しています。ほとんどのWEBページはHTMLとCSSという言語でその見た目が作られています。わかりやすく言うとWebページの構造やレイアウトを決める基本的なもの。という認識で大丈夫です！

HTMLでできること

HTMLでできることは主に2種類あります。

HTMLメール
webページの作成

HTMLメールとはwebサイトのような画像やレイアウトを利用できる電子メールのことを指します。

主に販促や物販でのメルマガに使われます。

プログラミング初心者が使うのはwebページ作成がメインかと思いますのでこちらについては割愛します。

HTMLの基本

HTMLを使ってwebサイトを作るにはHTMLの基本である『タグ』と『要素』、『属性』を理解する必要があります。後ほど細かな説明をしますのでここでは簡単な説明をさせていただきます。

①タグ

タグとは『文字や記号に意味を与えるための印』と覚えましょう。

イメージとしては洋服などについている値札や注意事項などを『タグ』って言うと思いますがそれと同じです。「この服は1,000円ですよー。乾燥機入れたら縮みますよー。」と意味を付与するものです。

②要素

要素とは『タグに囲まれたもの』を指します。

上記イメージで例えると「洋服に値札や注意書きのタグが付けられたもの」を要素と呼びます。

③属性

これが一番イメージしにくいものとなります。

属性とは『タグにあらかじめ決められた補足の情報を与えるもの』となります。

同じように洋服でイメージすると『タグ（値札）にお花をつけたり、飾りをつけたりできるようになるもの』を属性と呼びます。

上記３点はHTMLでは必須のものとなります。

これを基本として作成しますので覚えておきましょう！

要素

要素とは『タグに囲まれたもの』を指します。

<ｈ>じぇんるど</h1>　⇐このまとまりを『要素』と言います。

要素にもいろいろあります。

基本構造要素
テキスト要素
レイアウト要素

要素は意味づけをしたり、情報を付加させることができます。

要素で一番大事なポイントは『html要素』です。

html要素はすべての要素の基準となります。

html要素に付随するものが子要素と呼ばれます。

上記で出てきたheadタグ、bodyタグ、ｈタグはすべて

子要素ということになります。

ここではhtml要素がすべての要素の基準になること、

またその他の要素が子要素となることを覚えておきましょう。

属性

属性とは『タグにあらかじめ決められた補足の情報を与えるもの』となります。

タグとは『文字や記号に意味を与えるための印』でしたね。

簡単に文字だけ並べると属性とは

『文字や記号に意味を与えるための印にあらかじめ決められた補足の情報を与えるもの』

となります。

<ｈ>じぇんるど</h1>

このままではこうなります。

では属性を加えてみましょう。

<ｈ1 align=”center”>じぇんるど</h1>

※<●● align=”center”>部分が属性となります。

意味は『文字の配置をセンターにする』という

ものになります。

では属性を加えるとどうなるか。

真ん中に寄りましたね。

このように補足情報を組み込むものが『属性』となります。

属性に関しては、多くの属性が存在しますが別の方法でも同様なことは可能となります。

ですがここでは難しく考えなくても大丈夫です。ここで覚えるべきことは

『補足情報を組み込むことができる』を理解しておけば問題ないですのでご安心ください。

まとめ

ここのページではHTMLにフォーカスして説明させていただきました。

HTMLを理解する上でのポイントをまとめますと

HTMLを使えばwebページが作成できる
【タグ】『文字や記号に意味を与えるための印』を『タグ』という
【タグ】<開始タグ>●●●</終了タグ>　⇒　開始タグと終了タグで●●●を囲む』
【タグ】タグの終わりは『/（スラッシュ）』をつける
【要素】『タグに囲まれたもの』を『要素』
【要素】html要素はすべての要素の基準となる
【要素】html要素以外のすべてのタグは『子要素』という
【属性】『タグにあらかじめ決められた補足の情報を与えるもの』を『属性』という。
【属性】多くの属性が存在しますが別の方法でも同様なことは可能である

いかがでしたでしょうか？

「難しそう」と思っていたプログラミングだと思いますが

実際は結構単純な部分が多くあります。もちろん深堀すればするほど難しい部分は出てきますがそれはどんな業種や趣味でも同じだと思います。

まずは少しづつプログラミングに触れて理解を深めていきましょう！！

最後までお読みいただきありがとうございました！