DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • 【初心者向け】webページをつくるためにHTMLを理解し、書けるようになるコツ

【初心者向け】webページをつくるためにHTMLを理解し、書けるようになるコツ

design_thing

  • top
  • blog
  • 【初心者向け】webページをつくるためにHTMLを理解し、書けるようになるコツ

【初心者向け】webページをつくるためにHTMLを理解し、書けるようになるコツ

2020.01.21.

スポンサーリンク

スポンサーリンク

いま皆さんがご覧になってくださっている(ありがとうございます)このブログのwebページも「HTML(エイチティーエムエル)」という言語で構成されています。

ホームページを自分でつくってみたい、またはwebデザイナーになりたいと思っている人たちはまずはじめにこの「HTML」を勉強することになります。

今はHTMLを知らなくてもホームページをつくれるツールもいろいろありますが、そのツールがなくなったとき、またはツールが使えない環境のときにはやっぱりHTMLを書けたほうがいい。ボクも仕事でwebサイトリニューアルの案件を受けることがよくありますが、HTMLを知らない人がつくったwebページのソースコードはほぼ100%めちゃくちゃです。散らかっている部屋をキレイにしてくださいと言われたような・・そんな感覚になります。

便利なツールを使うことも大切ですが、基礎をしっかり理解しておくことも大切。何事にもいえることですよね。なので今日はwebページをつくる言語である「HTML」を理解して書けるようになるコツを紹介したいと思います。

index

このブログの目次

1. そもそもHTMLとは何か?

まずはそもそもの話から。
HTMLとは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、webページをつくるために必要な一番基本となる言語です。webデザインを勉強するとき、一番はじめに通る道です。

インターネット上に存在するwebページすべてがHTMLでつくられています。HTMLがないと意図したページをつくれず、ただの文字の羅列のみのページになってしまいます。

HTMLの歴史を少しだけ

webページ自体が元々研究などの論文を発表するためにつくられたもので、HTMLは論文をわかりやすく見せるために生まれたものでした。つまり本来は文書なんですよね。この「HTMLは文書のためのものである」という考え方はあなた自身のwebデザインにすごく関わってくるので頭の片隅にでも入れておいて損はないかと思います。

2. まずはタグの種類を知る

HTMLのことを「言語」といいましたが、そこまで構える必要もなく、かなり簡単な言語です。言語というレベルのものではないくらいです。

HTMLは基本的に「タグ」というもので構成されていて、そのタグで「ここからここまではコレ」という風に書いていきます。そのタグの種類はいろいろあります。代表的なところをいくつか書いてみると・・

  • h1からh6 … 見出し(大きいほうから降順)
  • p … 段落
  • img … 画像
  • a … リンク
  • div … 領域
  • ul、li … リスト項目

といった風にそれぞれのタグに役割があります。まずはそれぞれのタグの種類と役割を知り、覚えます。タグを覚えておくと文書として書きやすくなるし、マークアップしてwebページをつくりやすくなりますよね。

3. HTMLを手打ちしてwebページをつくってみる

ブログを書くツールなんか使っていると、HTMLのタグリストがあって、そこからタグを選択できたりするのですが・・

ボクはまず、手打ちでHTMLを書くことを強くオススメします。それはなぜかというと、手で書かないと覚えないからです。タグにもいろいろ種類があって、いろんな属性があって、役割がある。それらを適切に使うためにはやっぱり自分で書く。アナログではありますがやっぱりこれが一番身につきます。

簡単なものでいいのでHTMLを書きながらwebページをつくってみましょう。書いて書いて書きまくって、自分の体がHTMLを理解するまで書きましょう(笑)。webページをつくり方は、以前ボクが書いたwebデザイナーのブログも参考に読んでみてください。

4. HTMLを書くとき、新聞をイメージして書く

HTMLを書きやすくするコツをひとつ教えます。
「HTMLは文書」と前述したかと思いますが、イメージしてもらいたいのは新聞です。

新聞を読んだことのない人はいないと思いますが、いま一度新聞を見てみてください。新聞の各記事にはまずはじめに装飾された大きな見出しがあって、段落で区切られた文章があって、伝えるための写真があって、文章を要約したような中見出しがあって・・といった構成になっていることに気づくはずです。

HTMLもこれと同じです。webページをつくるとき、見出しがあって文章があってという構成で考え、新聞をイメージして書きます。そうすることでつくりやすくなりますし、頭でつくりたいwebページをイメージしやすくなりますよ。

5. いろんなwebサイトのソースコードを見てみる

「それでもよくわからん!」という人もいらっしゃると思います。ボクもはじめは全然わかりませんでした。

そんなときはいまネット上で公開されているいろんなwebサイトのソースコードを見てみるのも有効です。webは自分の手を離れてネットに公開するものなので、HTMLならソースコードに大体答えが書いてあります。

webサイトのソースコードの確認手順

一応ソースの表示のしかたを書いてみますと、見たいwebページ上で右クリックします。

ソースコードの確認手順

すると右クリックしたあとに出てくる項目のなかにMacなら「ページのソースを表示」という項目があるので、そちらをクリック。すると新規ウィンドウでソースコードが表示されます。

表示されるhtmlソースコード

ここに書かれているソースコードがHTMLです。はじめは意味がわからないかもですが、理解してくるとどこに何が書かれているのか、わかるようになってきます。「このページのここを知りたい!」と思ったらソースを見て参考にすることはオススメですよ。

まずは手打ち。できるだけ的確なHTMLを書けるようになろう

ビギナー向けではありましたがHTMLを覚えるコツを書いてみました。自分の手で書くから覚えるし、身につきます。これが面倒だなと思った人、残念ながらあなたはwebを仕事にすることはできないと思います(笑)。HTMLは基本中の基本のもので、もっと面倒だと思ってしまうものはさらに先にありますから・・

とはいえ、自分で書いたHTMLが他の人にも見てもらえるようなものになったとき、感動すると思います。ボクはリンクを貼ってクリックして他のページに移動したときはすごく感動しました。そんな感動を味わってほしいです。

webのことで疑問に思ってることがある方、知りたいことがある方もお気軽にフォームよりお問い合わせくださいね。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

design_thing

ペンタブが苦手な人向け。illustratorでイラストを制作する方法

デザイン制作でイラストが必要になることはよくありますよね。 僕の場合はイラストレーターさんに依頼することがほとんどなのですが、案件によっては…

2024.02.14.

think

2024年1月の活動報告。1月はこんなデザイン制作をしていました

もうすぐ確定申告はじまるなぁ・・とこの時期になると毎年思います。 しかも今年からは昨年10月より開始したインボイス制度により消費税を申告する必…

2024.02.06.

private

北新地にある「鮨 かうと」で42歳の誕生日を祝ってもらいました

先日のことですが、1月16日は僕の誕生日ということで・・ 今年も相方に祝ってもらいました。 実は年末に欲しがっていたカセットデッキを誕生日プレゼ…

2024.01.19.

private

豊中市民なので2024年から服部天神宮の豊中えびすにて商売繁盛祈願

年が明けて、1月9日から11日までの3日間は商売人にとって毎年恒例の十日戎ですよね。 今までは大阪市民だったので今宮戎神社の十日戎で毎年商売繁盛…

2024.01.13.

private

【謹賀新年2024】明けましておめでとうございます。新年のご挨拶

はじめに、元日に起こった石川県能登半島地震におきまして、被災された方々へお見舞い申し上げます。1日も早い復興を願っております。 新年明けまし…

2024.01.05.

think

【2023年の振り返り】今年もBUROKI designをありがとうございました

2023年ももうすぐ終わりますね。 今年も一年お世話になりました。いつもありがとうございます。 今年は春にようやくコロナがひと段落し、マスクなし…

2023.12.31.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル