【パート5】初心者必見!html入門② ど素人がプログラミング始めてみた

【パート5】初心者必見!html入門② ど素人がプログラミング始めてみた

こんにちはk-hippoです。

今回はhtml入門②ということで、前回【パート4】初心者必見!html入門①で紹介した様々なタグの使用方法の一部を紹介していこうと思います。

この記事を読むことで、htmlで作成した文章に、大きさの強弱や協調、段落やリストの作り方などが概ね理解できます。

最初に、私は普段作業療法士として勤務しており、妊娠中の妻と子供1人がいる状況でプログラミングの勉強を開始しました。

【経験ゼロ】ど素人がプログラミングを始めてみたから2週間が経過し、この記事を書いていますww

上記リンク記事の口約では「40日」で最低限のランディングページを作る技術を習得するという予定でしたが、本記事作成時点で「13日」経過してますので・・・・結果無理ですね(笑)

でも時間かかってでも、必ず習得し、このブログをみて仕事しながらでも、家庭を持ちながらでも、プログラミングを身につけて副業として開始できるんだ!というところを見せたいと思います。

子供が寝て、妻が寝たそのあとの時間や、いままでスマホゲームなどをしていた数分間の時間を利用し、毎日少しずつ本、youtube、ブロガーの皆さんの記事など使って勉強しています。

これからお仕事しながらプログラミングを学んで行く方に少しでも参考になればと身を以て経験したことを記事にしていきますので、よければ見ていってくださいww

様々なタグを使ってhtmlを書いてみよう!

まず、様々なタグを使ってhtmlテキストを作ってみましょう!

注:エディタ(またはメモ帳)を開いて以下のテキストを「必ず打って」下さい。打ち込む作業しないと絶対に覚えていけないからです!!

図1

打ち込めましたか?

作ったテキストは保存の時に「.html」の拡張子に変更することを忘れないようにしましょう。

では解説していきます。

重要度について(<h1>~</h1>)

文章の重要度を決めるタグになります。これは<h1>〇〇</h1>で囲まれた部分が強調されるということになります。図1の「プログラミングは最強の副業!?」というところが強調されています。

また、その重要度は<h1>から<h6>まであり、数字が大きくなるにつれて重要度が下がります。ちなみに図1の「プログラミングを始めるにはどうすればいいのか?」という文章が<h2>となります。

実際に表示されたらどのようになるのか?というと下図2を見てください。

図2

こんな感じになります。文字の大きさが1→6になるにつれて小さくなるような感じですね。文系でもプログラミング副業で月10万円稼ぐ!を参考にさせて頂くと、重要度は以下のように使い分けられます。

  • 重要度最高:<h1>~</h1>→メインタイトルに使いやすい
  • 重要度高:<h2>~</h2>→内容の区切り、項目の切り替えなどで使いやすい
  • 重要度中:<h3>~</h3>→h2のなかで区切りが必要な時
  • 重要度小:<h4>~</h4>→h3で分割したいとき
  • 重要度低:<h5>~</h5>→h4のなかで少し強調したいとき
  • 重要度極低:<h6>~</h6>→h5のなかで強調したいとき

一般的に使うのは<h1>から<h3>までは多いようです。まずはこの3つだけ使用するということだけ覚えておけば良いでしょう。

画像の挿入について<figure> <img src=”保存場所/画像”alt=”画像のひとこと説明”>

Webページを作成するのに必要不可欠なのが画像挿入です。ページの印象を大きく左右し、閲覧者の読む意欲や購買意欲を引き上げる効果があります。

その画像の挿入と画像のキャプションなどについて説明します。

図2を見てください。今回使用している画像はフリー画像サイト「ぱくたそ」さんから画像をいただきました。こういう画像を入れる手順を説明します。

タグとしては以下のものを使います。

  • <figure>~</figure>で囲まれた部分に画像が入ります
  • <img src=”保存場所/画像データ”>というタグで入れたい画像のデータをペーストします。

また、最初に画像の挿入にあたっての知っておくことかあります。

  • 使用したい画像がPCのどの場所(ファイル)に保存されているか知っておくこと
  • 画像ファイルの拡張子は「.jpeg」「.png」「.gif」などがあること

まず1つ目の「使用したい画像がPCのどの場所にあるか?」ということですが、<img src=”保存場所/画像データ”alt=”コメント”>の部分で、図3では2行目の部分にあたります。

図3

私の場合にはデスクトップにHTML①というファイルがあり、その中に画像データが入っています(図4)。その画像データが入っているファイルを指定して置かないと、コンピューターがどこから画像を引っ張ってきていいかわからないのです。

図4

画像データは同じ場所に保存しておくと、どのファイルに保存したかいちいち確認しなくてもいいですよ!

強調について<big><small><strong>

文字を強調したり、大きくしたりするにはどうすれば良いのか?

ここでは<big><small><strong>の3つを紹介します。

  • <big>~</big>:文字サイズを1段階大きくします
  • <small>~</small>:文字サイズを1段階小さくします
  • <strong>~</strong>:文字を1段階太字にします

下図5の3つの技術が必要!のところで「技術」に<big>と<strong>のタグが付いています。

図5

また、©︎2019 k-hippolog.の部分には<small>が使われています。

このように強調したり、逆に小さく目立ちにくくするときにこのタグを使います。

リストについて<ul><ol><li>

箇条書きにするとわかりサイトがすっきりし、見やすくなります。そのようなリスクを作成するときに使うタグを紹介します。

  • <ul>~</ul>:「・」で表示する
  • <ol>~</ol>:「数字」で表示する
  • <li>~</li>:箇条書きの項目を表示する
図6

この<ul>か<ol>でどのように表示するかを決めます。例の図6では<ul>を使用していますので、実際にページで表示されるときには、図5のように「・」で表示されます。

<ul>の部分を<ol>に変更すると「1」「2」といった数字での箇条書きになるということです。

<li>はその箇条書きに書く内容です。例の場合だと「HTML」「CSS」「java script」の3つです。箇条書きにしたい分だけ<li>~</li>で囲って入力していけばOKです。

パート5終了

プログラミング記事も5つ目が終了しました。

今回のまとめとしては

  • 重要度:<h1>から<h3>を覚えておく
  • 画像の挿入:<figure><img src=”保存場所/画像データ”alt=”コメント”>で保存した場所を覚えておいて、できれば画像データは一緒の場所に保存しておく
  • 強調:<big><small><strong>でサイズや太さを変える
  • リスト:<ul><ol>で「・」や「数字」での箇条書きができる。<li>で箇条書きの内容を記載する

です。

前回の【パート4】初心者必見!html入門①と合わせて、HTMLで必要な最低限の知識はある程度伝えることができたかな?と思います。

次回はページを移動する方法やボタン指定、動画を入れるなどの項目をUPしていきます。

ここまでを理解するのに約2週間・・・早いのか、遅いのかもわからないwwwでもまぁ自分のペースでこれからも勉強して発信し続けていきます。

最後まで読んでくださってありがとうございました。