designaboutdesignvoiceblogfilmscassettecontactaboutdesignvoiceblogfilmscassettecontact↑topblogtopblog【初心者向け】webページをつくるためにHTMLを理解し、書けるようになるコツdesign_thingtopblog【初心者向け】webページをつくるためにHTMLを理解し、書けるようになるコツ【初心者向け】webページをつくるためにHTMLを理解し、書けるようになるコツ2020.01.21.スポンサーリンクスポンサーリンクいま皆さんがご覧になってくださっている(ありがとうございます)このブログのwebページも「HTML(エイチティーエムエル)」という言語で構成されています。ホームページを自分でつくってみたい、またはwebデザイナーになりたいと思っている人たちはまずはじめにこの「HTML」を勉強することになります。今はHTMLを知らなくてもホームページをつくれるツールもいろいろありますが、そのツールがなくなったとき、またはツールが使えない環境のときにはやっぱりHTMLを書けたほうがいい。ボクも仕事でwebサイトリニューアルの案件を受けることがよくありますが、HTMLを知らない人がつくったwebページのソースコードはほぼ100%めちゃくちゃです。散らかっている部屋をキレイにしてくださいと言われたような・・そんな感覚になります。便利なツールを使うことも大切ですが、基礎をしっかり理解しておくことも大切。何事にもいえることですよね。今日はwebページをつくる言語である「HTML」を理解して書けるようになるコツを紹介したいと思います。そもそもHTMLとは何か?まずはそもそもの話から。Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、webページをつくるために必要な一番基本となる言語です。webデザインを勉強するとき、一番はじめに通る道です。インターネット上に存在するwebページすべてがHTMLでつくられています。HTMLがないと意図したページをつくれず、ただの文字の羅列のみのページになってしまいます。HTMLの歴史を少しだけwebページ自体が元々研究などの論文を発表するためにつくられたもので、HTMLは論文をわかりやすく見せるために生まれたものでした。本来は文書なんですよね。この「HTMLは文書のためのものである」という考え方はあなた自身のwebデザインにすごく関わってくるので頭の片隅にでも入れておいて損はないかと思います。タグの種類を知るHTMLのことを「言語」といいましたが、そこまで構える必要もなく、かなり簡単な言語です。言語というレベルのものではないくらいです。HTMLは基本的に「タグ」というもので構成されていて、そのタグで「ここからここまではコレ」という風に書いていきます。そのタグの種類はいろいろあります。リスト項目といった風にそれぞれのタグに役割があります。それぞれのタグの種類と役割を知り、覚えます。タグを覚えておくと文書として書きやすくなるし、マークアップしてwebページをつくりやすくなりますよね。HTMLを手打ちしてwebページをつくってみるブログを書くツールなんか使っていると、HTMLのタグリストがあって、そこからタグを選択できたりするのですが・・ボクはまず、手打ちでHTMLを書くことを強くオススメします。それはなぜかというと、手で書かないと覚えないからです。タグにもいろいろ種類があって、いろんな属性があって、役割がある。それらを適切に使うためにはやっぱり自分で書く。アナログではありますがやっぱりこれが一番身につきます。簡単なものでいいのでHTMLを書きながらwebページをつくってみましょう。書いて書いて書きまくって、自分の体がHTMLを理解するまで書きましょう(笑)。webページをつくり方は、以前ボクが書いたwebデザイナーのブログも参考に読んでみてください。HTMLを書くとき、新聞をイメージして書くHTMLを書きやすくするコツをひとつ教えます。「HTMLは文書」と前述したかと思いますが、イメージしてもらいたいのは新聞です。新聞を読んだことのない人はいないと思いますが、いま一度新聞を見てみてください。新聞の各記事にはまずはじめに装飾された大きな見出しがあって、段落で区切られた文章があって、伝えるための写真があって、文章を要約したような中見出しがあって・・といった構成になっていることに気づくはずです。HTMLもこれと同じです。webページをつくるとき、見出しがあって文章があってという構成で考え、新聞をイメージして書きます。することでつくりやすくなりますし、頭でつくりたいwebページをイメージしやすくなりますよ。いろんなwebサイトのソースコードを見てみる「それでもよくわからん!」という人もいらっしゃると思います。ボクもはじめは全然わかりませんでした。そんなときはいまネット上で公開されているいろんなwebサイトのソースコードを見てみるのも有効です。webは自分の手を離れてネットに公開するものなので、HTMLならソースコードに大体答えが書いてあります。一応ソースの表示のしかたを書いてみますと、見たいwebページ上で右クリックします。すると右クリックしたあとに出てくる項目のなかにMacなら「ページのソースを表示」という項目があるので、そちらをクリック。すると新規ウィンドウでソースコードが表示されます。ここに書かれているソースコードがHTMLです。はじめは意味がわからないかもですが、理解してくるとどこに何が書かれているのか、わかるようになってきます。「このページのここを知りたい!」と思ったらソースを見て参考にすることはオススメですよ。できるだけ的確なHTMLを書けるようになろうビギナー向けではありましたがHTMLを覚えるコツを書いてみました。自分の手で書くから覚えるし、身につきます。これが面倒だなと思った人、残念ながらあなたはwebを仕事にすることはできないと思います(笑)。HTMLは基本中の基本のもので、もっと面倒だと思ってしまうものはさらに先にありますから・・とはいえ、自分で書いたHTMLが他の人にも見てもらえるようなものになったとき、感動すると思います。ボクはリンクを貼ってクリックして他のページに移動したときはすごく感動しました。そんな感動を味わってほしいです。webのことで疑問に思ってることがある方、知りたいことがある方もお気軽にフォームよりお問い合わせくださいね。問い合わせフォームはこちらからデザインの中身sharetweethatenapocketスポンサーリンクはじめましてBUROKIです。ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。moredesign統一感を意識してシンプルに。moredesign社内コミュニケーションをデザインで活性化させる。moreblog2020年1月の活動報告。moreデスクワークの天敵・肩コリや首コリに「円皮鍼(えんびしん)」がすごい効きます2019.12.15.かにカニ日帰りエクスプレスで城崎・円山川にある「旅館ひだまり」へ賃貸でもDIYできる。thingfavoriteprivatethinkdesign_thing元同僚が「しらすのフィリップ」のロゴを勝手にステッカーにして楽しんでいる件めちゃくちゃ面白い話なのですが・・昨年、元同僚のボビン(あだ名)さんからLINEでこんな写真が届きました。more2020.02.12.think2020年1月の活動報告。more2020.02.10.private兵庫県立美術館で開催中の「ゴッホ展」にてゴッホのツールを辿る6日の木曜日は一日仕事をセーブし、昼前からお出かけました。今や「プレゼンテーション」という行為は社会人なら誰もが行っていることですよね。more2020.02.06.privateJR寺田町駅から徒歩2分。どら」にてプチ同窓会を開催しました先週の話になるのですが、前職で一緒に働いていた人たちとプチ同窓会をしました。(1)制作のご相談・お問い合わせはフォームからデザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。問い合わせフォームはこちらBUROKI(ブロキ)大阪でweb・グラフィックデザイナーとして活動しています。design」としてフリーランスになりました。日々の制作活動の合間にデザインのこと、作品のこと、プライベートのことなどブログで発信しています。thingデザインのことfavorite好きなことprivateプライベートthinkブロキ的考えfilms制作動画travel旅行シリーズ動画vlogビデオログcassetteカセットテープtapeテープplayerプレーヤーcontactお問い合わせsnsソーシャルinstagramインスタグラムyoutube専用チャンネル。