2017/04/23SHAREツイートシェアはてブGoogle+PocketLINEあなたはHTMLという言葉を聞いたことがありますか?「ウェブサイト作成」などと検索すると、よく目にするキーワードです。ウィキペディアによるとHTMLは以下の次のように説明されています。ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。引用:Wikipediaうーん。正直なところよくわからないと思います。簡単に説明すると、インターネットエクスプローラやchrome等でテキストや画像などの情報を見やすく表示するために使われる言語です。私も初めてHTMLを学んだときには、イメージできないところや理解できないところが多く大変苦労しました。当時のことを思い出しながら、今回の3日コースは「こんな風に教えてもらえたらよかった。」という点を踏まえて構成を練りました。私が個人の方を対象としたプログラミングのプライベートレッスンでも実際に教えているカリキュラムにそってご説明いたします。今回の3dasyコースを通してHTMLについての理解が少しでも深まればと思います。今日のレッスンはここまでいまさらHTMLを学ぶ必要あるの?あなたはもしかすると、「HTMLっていまさら勉強する必要あるのかな?」と思われるかもしれません。近年、ウェブ制作ソフトや、インターネット上でマウスの簡単な操作だけでウェブサイトが作れる時代になっています。勉強しなくてもパソコンのちょっとした操作で自分のウェブサイトが作れればそれで十分かもしれません。あなたが次のような目的でウェブサイトを必要としているのなら、一からHTMLを勉強されることをオススメします。集客や情報発信用にブログを運営したい経営するお店のウェブサイトを作りたいウェブサービスで一発あてて稼ぎたいなぜ、一から勉強されることをオススメするかというと「作り始めるようになると、必ずこだわりがでてくる」からです。便利なツールを使えば、簡単なマウス操作で気軽にウェブサイトが作れるのですが、実際にカタチになってくると、だんだんと愛着が湧いてきます。なると「ここのボタンもうちょっと丸っこくしたい」とか「画像のサイズをもう少し大きくしたい」などの「こだわり」が必ずでてきます。それらのソフトは誰でも簡単に使えるように設計されているため、細かい修正ができないという問題があります。このような場合にあなたがHTMLの書き方を知っていたらどうでしょうか?あなたの手で、HTMLファイルを直接いじって、微妙な修正を加えることが可能になるのです。このようにゼロからウェブサイトを作らなくても、既に作成されたウェブサイトをあなた好みにカスタマイズする場合などには絶対にHTMLの基礎的な知識が必要とされるのです。ウェブサイトの中身を見てみよう!HTMLを自分の手で実際に書く前に、まずはウェブサイトがどのようにできているのかをやんわり理解するためにウェブサイトの中身を見てみましょう。これはヤフージャパンのウェブサイトです。この色とりどりのウェブサイト、実際は下のようにHTMLを使って記述されているのです。赤枠で囲った「html」という記述から始まり、その中に要素に合わせたタグを組み合わせて記述することで、複雑なウェブサイトを表現しています。この画像で表示されている部分はほんの一部分で、実際はとても長い行数になります。タグってなに?もう少し、ウェブサイトの中身を見てみましょう。JAPAN!というロゴに注目してみましょう。このロゴの部分ですが、実際には次のように<img>タグという画像を表示するためのタグを使っています。width="213">この<img>タグに表示したい画像のパスやサイズ、説明文などを加えてhtmlファイルに記述します。chromeなどのウェブブラウザで閲覧すると、ウェブブラウザが<img>をを読み込んだ時に、「これは<img>タグだから、画像を表示するんだな!」と認識して私達の目に画像を表示してくれるようになります。HTMLにはこの画像を表示するタグの他に、文章や見出し、箇条書きのリストなどを表示するのに最適なタグが色々と用意されています。一見すると複雑に見えるウェブサイトもこれらのタグの組み合わせで出来ているのです。HTMLの基本構造を学ぼう!ウェブサイトはHTMLで記述された複数のウェブページを繋げることで成り立っています。ウェブページを構成するHTMLは<html><head><body>の3つの基本の要素タグを骨格としています。各要素タグの役割を理解してみましょう。</body></html>htmlタグなんといってもこのhtmlタグがないと何も始まりません。ウェブブラウザに対して「ここの中には、様々なタグを使ったHTML文章が書かれています」ということを教えるためのタグです。そのため、htmlタグの外に要素タグが記入されることはありません。headタグウェブブラウザは上から下に順に文章を読み込んでいきます。そこで、headタグにはhtml文章についての情報が記述されます。ページ内で扱う言語についてや、検索される時に必要なキワードやタイトルの情報などです。その他にも、外部のファイルを読み込むための設定などもここでされます。bodyタグここに記述した要素タグによって生成された、テキストや画像などがサイト訪問者に対して表示されます。ユーザに見せたいコンテンツそのものを記述する場所になります。タグを使ってみようこれまでHTMLについてや、今からHTMLを学ぶことのメリット、骨組みとなる基本構造について紹介していきました。ここからは実際に手を動かして、htmlの要素タグを記述してみましょう。1日目は本当にさわりの部分なので、「こんな、感じなんだな」というイメージを少しでも持っていただけるだけで十分です。要素タグの始まりと終わりHTMLで扱う要素タグには一部の例外を除いて、始まりと終わりのタグがあります。見出し要素のhタグはこのように<h5>から始まり、</h5>で終わります。終わりのタグには必ず/(スラッシュ)が先頭に追加されます。このタグの中に、見出しとして表示したいテキストを記述することで、ウェブブラウザは「なるほど、このテキストは見出しとして表示したいんだな」と認識します。<h5>これは見出しです</h5>このブログでは上のh5タグは次のように表示されます。これは見出しですhtmlファイルをつくってみようそれでは実際にhtmlファイルを作成してみましょう。このブログではMac環境での例を説明いたしますが、Windowsをお使いの方はメモパッドなどをお使いください。2日目ではオススメの開発ツールについてもご紹介いたしますので、WindowsでもMacでも同じ手順で作業ができるようになりますのでご安心ください。テキストエディット(Windowsの方はメモパッド)を起動してみましょう。初期設定では入力モードがリッチテキストになっています。クリックして標準のテキストモードにします。続いてhtmlの基本構造となる<html><head><body>の3つのタグを入力してください。いずれも終わりのタグを忘れずに入力してください。基本構造のタグが入力できたら、<body>タグの中に見出しを意味する<h1>タグを追加します。<h1>タグの中に見出しとして表示したいテキストを入力してみましょう。保存用のウィンドウが現れるので、お好きな場所にfirstpage.htmlという名前で保存します。.htmlと言うのは拡張子と呼ばれるものです。コンピュータでは画像やテキスト、ビデオなど様々なファイルを扱います。そこで、それぞれのファイルの種類を区別させるために.◯◯◯という形式で拡張子が付けられます。今回のように.htmlという拡張子をつけることで、コンピュータは「これは、html文章で記述されたファイルなんだな」と認識できるようになります。つくったHTMLファイルを確認してみよう作成したfirstpage.htmlというファルはテキスト・エディターなどで開くとただの文字列の塊です。このファイルをインターネット・エクスプローラやChromeなどのようなウェブブラザで開くことで、初めてウェブページとして閲覧出来るようになります。作成したファイルには既に.htmlという拡張子がついているのでファイルをダブルクリックすることで、自動的にコンピュータがファイルを開くために最適なソフトウェアを起動してくれます。ウェブブラウザが起動すると、このように「ようこそ初めての見出しです」というテキストが見出し要素として太字で大きく表示されていると思います。今日のレッスンはここまでお疲れさまでした。1日目のレッスンはここで終わりです。今日はHTMLの基本的なことや、今から学ぶメリット、土台となる基本構造などについて勉強しました。本当にシンプルではありますが実際にあなたの手でHTMLファイルを作成してウェブブラウザで確認できるようにまでなりました。今日やった事があまりに簡単なので拍子抜けしてしまい、「そんなに、大したことやってないなー」と思うかもしれません。これはあなたにとって大きな一歩です。インターネット上で自ら情報発信するための発信基地(ウェブページ)をつくるためのスタート地点に立てたからです。CLOUDはビジネスをされている方をデザイン面でサポートする定額制のデザインサービスです。デザイナーが完全定額・無制限で、あなたに代わって、広告やバナーなどビジネスに必要なデザイン関連の業務をプロのクオリティで行います。面倒な年契約はなく、業務に応じて柔軟にご利用いただけます。苦手なデザイン業務に時間を割く必要はありません。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。デザインについてのご相談はこちらのフォームからお問い合わせください。タグに慣れよう!デザインコースアプリ日々のデザイン業務で困っていた事を解決するために、タスクとフォルダを同時に管理できる超シンプルなタスク管理アプリを作りました。思いついたアイデアをサクッとメールに送信できるiPhone専用のメモアプリです。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。フリーランスのデザイナーさん向けに超シンプルなタスク管理アプリDesignBoxを作っています。デザインについてのご相談はこちらからお問い合わせください。