見出し画像

【初学者向け】プログラミングって何から始めればいいの？

ゆうぞー

皆様、こんにちは。
現在SaaSベンダーでCREとして従事しているゆうぞーです。

本記事はプログラミング初学者の方に向けて以下２つの意図を持って書きました。

① プログラミングに興味を持ってもらいたい
② HTMLやCSSに対するハードルを下げ、自己学習を促したい

先んじて、表題の結論を言えばマークアップ言語の「HTML」と「CSS」です。

これら2つはとても素直な性質であるため、プログラミングというものに初めて触れる方にとってもイメージがしやすいと思います。

また、カスタマーサクセスとしてIT業界に転職した当初、これらを使ってユーザー向けのクローズドサイトを制作した経験があり、その際にとても役立った成功体験があるため、自信を持って勧めることができます。

現役のWebエンジニアの諸先輩方からすれば「マークアップ言語をプログラミングに含めるのは如何なものか？」というご意見もあると思いますが、先述した背景もあって、素直で且つどの言語を学んだとしても何かしら関わる可能性が高いこれら2つを取り扱いたいと思います。

①そもそもプログラミングとは？

プログラミング（コンピュータプログラミング）とは「一連の命令を構成して体系化する処理」（※）のことです。
※ MDN Web Docs より引用

一見分かり難く思えますが、簡単に言えば「コンピュータにやって欲しい一連の指示」と理解してもらえれば十分だと思います。

原則として予め定義したプログラムを順に処理していき、逆に定義されていない処理はできない仕組み（原理）となっています。

例えば、人間の会話のように恣意的に途中の主語や述語をスキップするというようなことは原則としてコンピュータにはできません。

仮に何かの処理をスキップさせたい場合も「1から4まで順番に進行する処理の内、2の処理をAという条件の場合にスキップする」といったように予めスキップすることを他のプログラムと同様に事前に定義する必要があります。

プログラミングには様々な言語が存在し、それぞれの言語で出来ることや得意とする処理などがあります。

また、WebサイトやWebアプリケーションでは画面上に反映される処理に係る「フロントエンド」と画面には表示されない裏側の処理に係る「バックエンド」の２つで構成されており、それぞれ役割が異なっています。ちなみにHTMLとCSSは「フロントエンド」領域となります。

②マークアップ言語とは

マークアップ言語とは文章を構造化するための言語です。

例えば、私たちが普段Webブラウザを介して閲覧しているWebページで画面に表示されたコンテンツは原則として、全てマークアップ言語で構成されています。

Webページとはインターネット上で公開されているファイルのことで、私たちはWebブラウザを介すことで閲覧することができます。

WebブラウザはHTML、CSS、JavaScriptの3つしか解釈することができないため、RubyやPHPで作成した処理をWebページの画面上に表示する場合もHTMLに変換して表示しています。

③HTMLを理解する

HTMLは非常にシンプルな構造で把握するのに苦労しません。構造と少しのルールさえ把握できればOKです。細かいタグは少しググれば、ぶっちゃけ事足ります。

HTMLの構造について

HTMLは原則として4つの要素から成り立っています。

① DOCTYPE宣言
② html要素
③ head要素
④ body要素

また、body要素はheaderやfooterなどの細かい要素に分けることができます。

例として「サンプルHTML」という架空のHTMLファイルをタグで書いてみます。
※DOCTYPE宣言は文頭の1行目の部分です。本記事では説明は割愛します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>サンプルHTML</title>
</head>
<body>
   <h1>ホームページへようこそ</h1>
   <p>誰でも歓迎するよ!!</p>
   <p class="example">こんにちは</p>
</body>
</html>

html要素

上記のHTMLファイルの中でhtml要素は以下の部分です。
html要素を記述することで、このファイルがhtml形式であることを表します。
※lang="ja" は言語を日本語に指定しています。ブラウザによって記述が必要。

<html lang="ja">
~省略~
</html>

head要素

head要素にはメタデータ（データに関する情報が書かれたもの）を記述します。例えば、Webブラウザを介してhtmlファイルを開いた際に表示されるファイル名（タイトル）や書式を整えるためのCSSの指定などを行うことができます。

※metaタグや文字コードに関する解説は本記事では割愛しますので、必要であればQiitaなどで検索してみてください。

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>サンプルHTML</title>
</head>

body要素

body要素はブラウザ上に表示される本文に当たります。

テキストリンクの設定や見出しの設定、文章の改行までもbody要素内で記述することによって、反映されるようになります。

<body>
   <h1>ホームページへようこそ</h1>
   <p>誰でも歓迎するよ!!</p>
   <p class="example">こんにちは</p>
</body>

上記のタグを見て気付いた方もいると思いますが、htmlは原則として前後を同じタグで囲うという性質があります。（閉じる際は「/」を付ける必要があります）

一部、囲わないものもありますが、原則して囲う必要があり、記述方法に誤りがあると表示崩れが起きたり、何も表示されないことがあります。

細かいタグの説明はこの記事では扱いませんが、htmlではタグを都度記述しなければ文字の大きさや色の変更、リンクの設定、文章の改行すらされない性質があります。しかしながら、htmlで主に使われるタグは比較的限られているため、お時間のある際に「htmlタグ」などとググってみてください。

以上のことを前提としてタグを記述し、ブラウザで表示すれば思った通りの内容が表示されているはずです。しかし、上記のルールに則り、記述したファイルを参照してみると、確かに表示自体はされますが、見栄えが悪いと感じたはずです。

実は記述したHTMLの体裁を整えるためにはCSSを記述する必要があるのです。ということで続いてはCSSについて解説していきます。

④CSSを理解する

CSSの書き方

CSSの記述方法は3つあります。

1 : styleタグで記述する
2 : 別ファイル（.css）を用意する
3 : HTMLタグに直接書き込む

※HTMLタグに直接書き込む方法は一般的に使わないため、割愛します。

styleタグで記述する

CSSをstyleタグで記述したHTMLファイルは以下のようになります。
※特に3行目から20行目までのhead要素内をご確認ください。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>サンプルHTML</title>
   <style>
   h1 {
     color: red;
   }
   p {
     font-size: 16px;
     text-align: center;
   }
   .example {
     font-size: 20px;
     font-weight: bold;
   }
   </style>
</head>
<body>
   <h1>ホームページへようこそ</h1>
   <p>誰でも歓迎するよ!!</p>
   <p class="example">こんにちは</p>
</body>
</html>

上記のHTMLファイルのうち、CSSを表すstyleタグは以下の部分となります。

<style>
 h1 {
   color: red;
 }
 p {
   font-size: 16px;
   text-align: center;
 }
 .example {
   font-size: 20px;
   font-weight: bold;
 }
</style>

CSSは本文に直接表示させる文言ではないため、head要素に記述していきます。上記の記述が具体的にどのような意味を表すのか見てみましょう。

細かい部分を確認する前にまずCSSの基本的な文法をおさらいしてみましょう。

基本的なCSSの文法

セレクタ {
　　プロパティ: 値;
}
セレクタ：適用する要素
プロパティ：何を変えるか
値：どのように変えるか

CSSは以上の3つから構成されています。

記述する際は1行にまとめることも可能ですが、どこからどこまでが1つのまとまりなのかを視認しやすくするために上記のように改行とインデント（字下げ）を用いて記述することが一般的です。​

それでは先に共有したstyleタグの一部を上記の文法に当て込んでみます。

h1 {
   color: red;
}

セレクタに記載された「h1」は最も大きい文字の見出しを指すタグになります。
見出しに対して「color」（文字色）というプロパティが「red」（赤色）という値で指定されています。​見出しを表すタグは「h1」~「h6」まであり、「h1」が最も大きい見出しであるのに対して「h6」は最も小さい見出しとなります。

上記のように記述することによって以下のHTMLファイルの内、<h1>タグ内の「ホームページへようこそ」という部分のみが赤色に変更されます。

※<p>タグ内の「誰でも歓迎するよ!!」はstyleタグ内でセレクタが指定されていませんので、何も変更されません。

<body>
   <h1>ホームページへようこそ</h1>
   <p>誰でも歓迎するよ!!</p>
   <p class="example">こんにちは</p>
</body>

また、styleタグ内のセレクタが「. 」で始まる場合はclassが指定されています。

.example {
  font-size: 20px;
  font-weight: bold;
}

classは特定の要素に対して他と区別するために割り当てられる名称のようなもので、HTMLファイル内に記述して指定することができます。

例えば、以下のように<p>タグが2箇所あり、片方の<p>タグだけ文字の大きさを変えたりしたい場合、変えたい方の<p>タグにclassを付けることで他の<p>タグと区別化することができます。

<body>
   <p>誰でも歓迎するよ!!</p>
   <p class="example">こんにちは</p>
</body>
class名の記述ルール

<p class="class名">文章</p>
<div class="class名">文章</div>
<h1 class="class名">文章</h1>

「class名」の文言に決まりはありませんが、半角英数字で記述する必要があり、記号はハイフンやアンダースコアのみ有効ですが、全角文字やスペースは無効です。

なお、別ファイルでCSSを記述する場合も上記の記述ルールは同じとなります。

⑤ディベロッパーツールを使って確認

既存のWebページのHTMLとCSSを確認するためにはブラウザに搭載されているデベロッパーツールを用いることで確認することができます。

1 : ブラウザを立ち上げる（Safari, Chrome, Edge どれでも）
※ 原則PCのみ, 一部タブレットやスマートフォンでも可能

2 : 以下のキーをキーボード上で同時に押す
※ どのブラウザも共通

[ Windows  OS の場合 ]
→ Ctrl + Shift + I キー

[ Mac OS の場合 ]
→ Command + option + I キー

[ iPad OS の場合 ]
→ Safariで拡張ツールをインストールする

デベロッパーツール上にページ内のどの部分が何の要素なのか、また要素に対してclassが設定されているか、そしてCSS（スタイル）が指定されているかなどを確認することができます。

デベロッパーツールの詳しい使い方については以下のリンクをご参照ください。

まとめ

ここまで書いてきたことをざっくりまとめてみると以下の4つになります。

1 : HTMLは4つの要素で構成される
2 : CSSはセレクタ、プロパティ、値の3つで構成される
3 : 他と区別するためのclassを指定することができる
4 : デベロッパーツールを使うと既存のWebページのHTML&CSSを確認できる

HTMLとCSSも移り変わりが激しく、極めていけばとても複雑なものになります。しかしながら、プログラミングを初めて学ぶ方にとって概要を把握しやすいと思いますので、ぜひ学習の参考にしてみてください。

また、ホームページ作成などでもHTMLとCSSは必須の知識と言えるため、ぜひ業務でも活用してみてもらえると嬉しいです。