シェアする

超初心者向け!!htmlを一緒に学ぼう。Part.1

シェアする

先日、オーカワ氏に「htmlを学んで、ゆくゆくはブログをhtml形式で書いてほしい。」という要望を受けました。

僕たちが利用させていただいている、このWordPressというものは、書き込みの形式が

  • 誰でも直感で書ける『ビジュアルエディタ』
  • htmlで入力を進める『テキストエディタ』

に分かれていて
オーカワ以外はプログラム経験がほとんどないため、Microsoft Wordのように書き進めることができる『ビジュアルエディタ』を利用しています。
ですが両エディタを継続していると、その切り替えなどに伴い様々な弊害が生まれる、と彼は語りました。

それであれば、将来的にも!使えておいて損はないだろうと!全員でhtmlを学ぶ決意をした次第でございます!!

僕は、初心者が学んだ経験談以上に他の初心者が上達するものはないと思っているので、僕の感じたこと・コツなどは今からhtmlを始めようとしている方にはぴったりなのではないでしょうか!

今回は第一回目!それでは張り切っていきましょう!!

スポンサーリンク




最初に学んだこと~htmlとは~

オーカワは勉強会にてそもそもhtmlとは、という根本のところを話してくれました。
さぁ聞いた話を僕が噛み砕いて説明していきましょう!できるかな!?

まずhtmlとは、タグを用いて文章などに『属性や性質』を加える、マークアップ言語である。
タグは<>を用いて文章を挟み込むことで、範囲を確定する。例外もあり。

WordPressのビジュアルエディタ(Wordみたいなもの)は、自動でhtmlに変換するために、書いている人の意図とは違った文章形式になり得る。
しかし、テキストエディタにてhtmlで直接書くことで、そのズレを無くすことができるのである。

<p>先日、オーカワ氏に「htmlを学んで、ゆくゆくはブログをhtml形式で書いてほしい。」という要望を受けました。</p>
<p>僕たちが利用させていただいている、このWordPressというものは、書き込みの形式が</p>
<ul>
        <li>誰でも直感で書ける『ビジュアルエディタ』</li>
        <li>htmlで入力を進める『テキストエディタ』</li>
</ul>
<p>に分かれていて<br>
オーカワ以外はプログラム経験がほとんどないため、<strong>Microsoft Word</strong>のように書き進めることができる『ビジュアルエディタ』を利用しています。<br>
ですが両エディタを継続していると、その切り替えなどに伴い様々な弊害が生まれる、と彼は語りました。</p>

これが冒頭の文章の変換前です。
このように「<>と/」でタグを構成します。

それではどんなタグがあるのか、見ていきましょうか。

今日のタグたち

段落と改行

文章を構成するに当たって最も重要なのが段落と改行。htmlでは、段落と改行の設定も文字で行います。解説していきましょう。

段落は<p>を、改行は<br>を用います。

このWordPressにおいて、段落は『下に1行分スペースを空ける行』を示しているようです。
改行は、まぁもちろん普通の改行になります。

<p class="mb3">文章を構成するに当たって最も重要なのが段落と改行。htmlでは、段落と改行の設定も文字で行います。解説していきましょう。</p>
<p>段落は<p>を、改行は<br>を用います。</p>
<p>このWordPressにおいて、段落は『下に1行分スペースを空ける行』を示しているようです。<br>
改行は、まぁもちろん普通の改行になります。</p>

htmlだと、上の文章はこんな感じです。
『class="mb3"』という部分はhtmlに追加機能を付ける(ようなイメージである)CSSという範疇なので気にしないでください。

改行が大きくなっているのが追加機能の部分ですね。

htmlで文章を書く際、一番重要となるであろう二つです。簡単ですし、真っ先に覚えることができそうですね。

太字やサイズ・フォントの変更

文章の重要なポイントを見てもらう上で、文字のサイズや色はとても重要ですね。

例えばこんな感じこんな感じ。
なんか気になりますよね。そういうものです。htmlだとこんな感じ。

<p class="mb3">文章の重要なポイントを見てもらう上で、文字のサイズや色はとても重要ですね。</p>
<p>例えば<strong>こんな感じ</strong>や<font size="5" color="#00ffff" >こんな感じ。</font><br>
なんか気になりますよね。そういうものです。htmlだとこんな感じ。</p>

太字はシンプルです。段落と同じように<strong>で挟み込むだけ。しかしフォントを変えるのは少し厄介です。

まず最初の「font」により、フォントの変更であることを示し、一つスペースを空け「size」つまり大きさを「="(数字)"」で指定するわけです。さぁややこしくなってきた!(太字)

色の変更も同様です。「color="(カラーコードor色の名前)"」で色を変えることができます。

カラーコードは調べるのが一般的ですね。下記のサイトなどいかがでしょうか。

色の名前とカラーコードが一目でわかるWEB色見本

この辺まで覚えておくと、きっと文章を書く時はかなり楽になるでしょう。

リンクを作る

リンクもまた自由に扱えたほうがいいものですね。しかし、これまた少しややこしいです。

例えば√path(クリックするとHomeに戻ります。)やオサダ(クリックするとオサダの個人ページに行きます。)というように
任意の文字列に任意のURLへのリンクを付けるものだと思ってください。(URL以外のリンクを付けることもできますが。)

<p class="mb3">リンクもまた自由に扱えたほうがいいものですね。しかし、これまた少しややこしいです。</p>
<p>例えば<a href="http://routecompass.net/">√path</a>(クリックするとHomeに戻ります。)や<a href="http://routecompass.net/membar/osada/">オサダ</a>(クリックするとオサダの個人ページに行きます。)というように<br>
任意の文字列に任意のURLへのリンクを付けるものだと思ってください。(URL以外のリンクを付けることもできますが。)</p>

こんな感じになってます。何やら字が多くてめんどくさそう……?

でもご安心を!!フォントを理解できたら簡単です!

なんと!「a href="(リンク先のURLなど)"」でオッケーなんです!タグは<a>であるので閉じる時は</a>のみ!
おやおや。思ったより簡単でしたね!!

文章のリスト化

さて冒頭の文章で利用した箇条書きのリストの作り方です。これで今回の勉強は最後にしましょうかね。

例えば

  1. こんな
  2. リストや
  • こんな
  • リストを

パッと見少しhtmlっぽくなってきましたね。さぁこれはどうなっているのか??

<p>例えば</p>
<ol>
        <li>こんな</li>
        <li>リストや</li>
</ol>
<ul>
        <li>こんな</li>
        <li>リストを</li>
</ul>
<p class="mb2">パッと見少しhtmlっぽくなってきましたね。さぁこれはどうなっているのか??</p>

まずは<ol>と<ul>。イメージ的には『挟み込んだ範囲がリスト化する準備が整う』ものです。いつでもリストにできるぞ!という状態。

そして<li>。これが『実際にリスト化する項目』であるのです。どうやらhtmlには二つ三つのタグを入り混じらせて使うものもあるようですね。

ちなみに<li>の段落(スペース)はわかりやすくするために使うそうです。こっちの方がカッコイイ!!

感想

htmlやプログラムにかかわる言語は、最初のきっかけさえあれば、思っている以上に学びやすいものだなと思いました。
どうやら自分も含め、まだ触れてない人は『難しいもの、学ぶのは大変なもの。』という先入観が邪魔をしてしまっているのでしょう。

が、実際は教えてくれる人や知識となるサイトがあれば、すんなりと、自分の能力になっていくのでしょう。

こういった記事で、htmlへの壁がなくなったらうれしいのですが。そんなに甘くはないかな?

また僕と一緒に学んでいきましょうね。

The following two tabs change content below.

オサダ

様々なジャンルの記事を書いていきます。
興味がないのに読んでしまう。そんな記事を目指して。

言葉を介してあなたのもとに。言葉がなくともあなたと共に。

連絡先:osada@routecompass.net

スポンサーリンク







シェアする

フォローする