【お知らせ】お問い合わせにつきまして、TwitterのDMが1番対応が早いです。Twitter

【簡単】【HTML】プログラミング言語を理解する方法【アウトプット】

こんにちは!たくぞーです。自分は転職していることをご存知な方っていますか?笑

2021.8.5現在転職活動中ではあるんですけど、製造を13年やっていましたが、製造をやるにあたって「この仕事やりたいことじゃないなぁ」と考えてしまいました。

そして、プログラミングは現代社会において「必須」なものになりつつありますよね。

文部科学省も推進している社会ということも背景にあります。こちらに文部科学省のリンク貼っておきます。

自分の「子供」が小学校からプログラミングを学んでいきます。

自分よりも詳しくなっていってしまいますので、今回「自分の学び」として子供にも教えていこう!と考えたことが背景にもあります。

そんな時に出会った一人の方について紹介しつつ独学で勉強したことを記事にしていけたらなと思います。

困った君

どうやって勉強していいいかわからないし実際にコーディングしたことがないんだよね〜。

そもそも君

簡単に勉強できる方法ないかなぁ?初心者でも触れそうなものってないかな?

同じような悩みを持っている方たちに向けて情報発信するべく、自分が先に学んでいこうと思います。

というか自分が勉強したものをアウトプットしているんですけどね。笑

この記事を読んだらわかること

  • HTMLってこんな言語
  • 合わせて使用されるCSS
  • 実際にやってみた勉強方法

と言った感じで解説していこうと思います。

目次

HTMLってこんな言語

結論ですが「タグをつけて印をつけることです。」

HTMLだけで使用しないので『HTML/CSS』という表記になっています。

この言語だけでコーディングしてしまってもいいんですが、CSSと同時に使用しないと以下のことが起こります。

  • 味気ない
  • 地味
  • ただの文章

こうやってブロガーの方達は文字を大きくしたり、色つけたり、囲ってみたりしますよね?

これがCSSと呼ばれる言語です。

例 「HTMLだけ」と「HTMLとCSSを入れたもの」をあげてみます。

HTMLのみの場合

こんにちは、たくぞーです。よろしくお願いします。今日はプログラミングについて話しようと思います。基本的に大切なのは●●○○なことですが△△◾️◾️です。以下の通りです。

  1. 言語
  2. コーディング
  3. たくぞー
HTMLとCSS

こんにちは、たくぞーです。よろしくお願いします。今日はプログラミングについて話しようと思います。基本的に大切なのは●●○○なことですが△△◾️◾️です。以下の通りです。

  1. 言語
  2. コーディング
  3. たくぞー

見違えるくらい、綺麗にまとまりますよね。

「HTML」はよくブログなどでも用いられる言語ですが、他にもJavaScript、PHPなどがあります。

HTMLCSSはセットで使わないといけないものなので実質2言語になりますね。笑

まずはこの2つから独学で学んでいこうと思います。

この2つを触ることよって何がメリットがあるの?

  • クライアント側の悩み解決しやすい。
  • 自分もブログやっているので役に立つ。
  • ブログ初心者の方々に教えてあげることが可能。

余談ですがWordPress自体は『PHP』という言語で作られています。

クライアント側のものを勉強し終わったら、「PHP」も勉強していく予定です。

HTMLの全体構造を見てみよう!

結論は決められた「型」を書かないといけないということです。

<html>の中に<head>.<body>などを入れること

実際にどんなものがあるのか解説を交えながらまとめてみます。

  • <!DOCTYPEhtml>・・・バージョン指定。(HTML5では必須)
  • <html lang=”ja”>・・・ページの言語設定(日本語なのでここではjaとなります)
  • <meta chaset=”utf-8″>・・・文字化けを防ぐコード。
  • <link rel=”stylesheet” href=”CSSのファイル名”>・・・他のページから読み込む場合に使用。(ほとんど書きます。)
  • <head>・・・ページに関する情報を入れるものだがページには表記されない。
  • <body>・・・画面に表示したい内容を入れる。
  • <title>・・・ブラウザに出る文字の指定。
  • <footer>・・・ページの著作者の情報を記すもの。

大まかにまとめたので少し補足を入れておきます。

<head>の中身には定型文の様なものを書きます。以下の通り

  1. コードの指定
  2. ページタイトルの設定
  3. CSSの読み込み

上記のものを使用してサイトの枠組みを作っていきます。下記の通り。

index.html

<!DOCTYPE html>

<html lang=”ja”>

 <head>

 <meta charset=”UTF-8″>

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>タイトルです。</title>

</head>

<body>

 <nav>

  <li class=”selected”>リストです。</li>

  <li class=”selected”>リストです。</li>  

  <li class=”selected”>リストです。</li>

  <li class=”selected”>リストです。</li>

 </nav>

</body>

</html>

ちょっと大きすぎましたが、こんな感じになります。

こういった「型」を使用してコーディングしていきます。

実際に使用してみる

ここでは「こんな使い方できる」ということを解説していきます。

勉強したことを「アウトプット」するのは大切ですからね!

タグとは?

<h1>、<h2>・・・や<a>、<p>のことです。「要素」とも呼ばれます。

上記のように表記すると、「見出し」、「リンク」となります。

使い方は以下の通り。

  • <h1>プログラミング</h1>
  • <a>リンクです。</a>
  • <p>改行されます。</p>

このように使用することで、見出し、リンク、改行の指定することができます。

見出しタグは<h1>〜<h6>まであります。

<p>要素は「段落」という意味ですが改行されるということで上記は「改行」と書いてます。

リンクタグは以下の通り。<a>要素を使用します。

<a href=”url“>このURLの部分にリンク先のURLを指定する。hrefを忘れないこと。

例 <a href=”https://www.takulog2930.com/”>takulog</a>となります。

画像表示タグは以下の通り。<img>タグを使用します。

ブラウザに表示しない方法もあります。下記の通り。

<!–○○○○–>・・・コメントのタグ

<!–ここに書いたものは表示されません。プログラム上何が書いてあるかの目安で残す時に使用する。–>

CSSとは?

先ほど少し解説しましたがここで改めて触れておこうと思います。

HTML要素に対して「色」「大きさ」を変更して、デザインするための言語です。

HTMLとはとは別の「ファイル」に記述する。

要するにワードプレス使ってる方ならわかると思いますが、

人に読んでもらうのに綺麗にまとめられるということです!

補足としてですが、先程解説したHTMLと同じように「メモ」を残すことがこちらも可能です。下記の通り。

/**/・・・プログラム上に「メモ」が残せるもの

/*この表記の間にメモを残すことができます*/

色を変更する

一般的にcolorプロパティを使用すればいいです。

style.css

例 h1 {

color:#ff0000;

}

これで<h1>見出しが「赤色」になります。

ここで補足ですが「色」のプロパティは覚えなくてもいいです。

color:の後はredでも使用できます。セミコロンを忘れやすいので注意ですね。『;』←これです。

文字の大きさを変える

font-sizeプロパティを使用します。指定後には「px」(ピクセル)という単位を忘れないこと

 style.css

例 h2 {

font-size:120px;

}

こうすることで、文字サイズの変更ができちゃいます。

この辺りのコーディングをWordPressが勝手にやってくれてるんですけどね。笑

便利になりましたよね〜。

文字の種類変更

font-familyを使用することによって変更できます。「明朝体」や「ゴシック体」に変えることができちゃいます。

この時フォント名に「スペース」が入る場合はダブルクォーテーションで囲むこと。

CSS側に入れてくださいね!

例 「明朝体」・・・『font-family:serif;』 か『 font-family:YuMincho;』

例「ゴシック体」・・・『font-family:sans-serif;』か『font-family:”Lucida Grande”;』

という様な表記をして指定すれば良いです。

背景色を変える

背景色は「background-color」を用いて変更します。

例 index.html

<p>プログラミング練習</p>

style.css

p {

background-color : pink;

}

ブラウザ出力側

プログラミング練習

上記の様になります。

だんだん、分かるようになってきましたか?笑

横幅、高さ変更

横は「width」高さは「heightで指定します。

例 index.html

<h1>たくぞーの趣味</h1>

<img src=”https//~~~~~~.jpg”>;

style.css

h1 {

background-color: red;

width:500px;

height:50px;

}

img {

width:50px;

height:50px;

}

ちょっとcss側が大きくなりましたがこうやって指定することによって、背景色を調整したり、文字の調整画像の調整ができます。

特定の要素にCSSを適用するには?

この時に注意が必要なことをまとめておきます。

  • <h1>や<p>といった要素が複数ある場合(というか複数になります。)
  • 上から順に実行になるので「width」や「height」を後に書く様にする。
  • 打ち間違いがあると指定されない。
  • classには先頭に.(ドット)を使用すること。
  • タグの場合は必要ない。

ということで、具体例を紹介していってみましょう。

classで指定してあげる

class指定する場合は「ドット」を使用します。同じclass指定したいときは下にも同じクラス名をつけること。

下記の通りです。

index.html

<ul>

<li class=”selected“>HTML</li>

<li class=”selected“>PHP</li>

<ul>

style.css

.ドットselected{

color: red;

}

selectedとついているもの全てにCSSが適用されます。

ここで注意点をまとめておきます。

  • 「class」の場合は必ずドットをつけること
  • タグ(header.footerなど)にドットはつけてはいけない

少し長くなってしまったのでここで解説を1次中断します。笑

文章ばかり見ていると気が滅入ってきますからね・・・

実際にしている勉強法

プログラミングアプリを使用する。

とりあえず最初は「Progate」の初級編などで基礎を学ぶことです。

ここにまとめたこともProgateで学んだことです。

初級編だけでも構いませんが、月額1080円で違う言語の中級編も学べちゃいますので自分はやってます。

こちらに「Progate」へのリンク貼っておきますね!

流れを理解したらさっさと次の行程に移っていきましょう。

VS Codeを使って書いてみる

見出しに書いたものをDLして書いてみた方がいいと思います。

そもそも君

そんなこと急に言われても何もわかんないじゃないか・・・

と思われるかもしれませんが、アプリだけだとタップするだけでクリアしてしまいます。

コードを書く!ということが大切だと思うので動画見ながらでも書いていきましょう!

必然的にコード覚えないといけない、というところに身を置くしかないんです。

苦行に見えるかもしれませんが、辛いのは最初だけですのでどんどんチャレンジしていきましょう!

「ドットインストール」の無料講座を受けると『VS Code』の設定がやりやすいと思います。

参考にしてみてください。リンク貼っておきますね!

参考動画紹介

自分が参考にしている方を紹介します。

HTMLはこの動画みてね!

『しまぶー』さんです。

この方の動画は非常にわかりやすい!

HTMLだけでなくCSSなども解説してくれています。

CSSならこの動画みてね!

これもおすすめです。

とりあえず「わかりやすい」のとコードを実際に真似っこしてやってみるのが早いと思います。

一時停止しながらやってみてました。笑

この方が、どんな動画を公開しているか知りたい人のために、ボタン作ってみました!

出会った人

そんな中、「1人の方」が自分の話を親身になって聞いてくれる存在ができました。

彼は某会社でプログラミングをしているらしくいろいろなお話を聞くことができていい経験になります。

そんな彼からも同じ様なことを言われました。笑

実際にここまで書いてみたが、流れを理解しておけばOKですのでメモやノートを取ることはやめましょう。

ググれば解決できます。

と言いつつ、コーディングしている時は、自分も自信がないです。笑

まとめ

  1. HTMLってこんな言語
    1. HTMLの全体構造を見てみよう!
  2. 実際に使用してみる
    1. タグとは?
    2. CSSとは?
    3. 色を変更する
    4. 文字の大きさを変える
    5. 文字の種類変更
    6. 背景色を変える
    7. 横幅、高さ変更
  3. 特定の要素にCSSを適用するには?
    1. classで指定してあげる
  4. 実際にしている勉強法
    1. プログラミングアプリを使用する。
    2. VS Codeを使って書いてみる
    3. 参考動画紹介
  5. 出会った人

ちょっと長くなりましたが、いかがだったでしょうか?

少し解説し切れていないところがあるので、次回また解説します。

やっぱり大事なことは「とりあえずやってみる」だと思います。

「ブログ」もなんだかんだ分からなくてもやってみてました。

勉強だけしていても成長はしないと思うので少しづつでも「実際にコーディング」してみましょう!

余談ですが任天堂Switchでプログラミングのゲームが欲しいと思い始めました。笑

少しでもみなさんの参考になれたら幸いです。

最後まで読んでいただき、ありがとうございました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる