初心者がHTMLを1日で書けるようにするためのレッスンをやってます!

こんにちは。気づけば、HTMLを書くようになって10年という月日が経ってしまっていました・・・。

とみっちです。

最初は学生時代に自分のバンドや電子音響グループのホームページを作るため、半ば嫌々始めたHTMLですが、今では仕事になっているので不思議なもんです。

夏にはおと風景という国内ではまだまだマニアックな、環境音に特化したWebサービスを個人でリリースしました。トップページのデザインのみ友達に依頼した以外、企画から開発、音源の録音・編集まで全部僕個人でやっています。

たまに有料で、HTMLの講師を主にマンツーマンでやっているんですが、HTMLを1日(6時間くらい)で理解してもらって、ある程度テキストエディタでタグ打ちまでできる感じになってもらえたいと思い、教えています。

レッスン中止中
現在、マンツーマンレッスンの申し込みは中止しています。記事の最後に当ブログでオススメしているスクールを紹介しています。

見てみる

場所は喫茶店やコワーキングスペースとかが多いです。埼玉の人なら僕の川越オフィスとかでも可能です。

僕はHTMLとCSSの概念を理解して、タグ打ちができるまで1年以上かかりましたw 独学でやり始めて、Dream Weaverのビジュアルエディタに全てお任せだったのがダメだったんですよね・・・。

その後、学校に通って覚えたんですが、やっぱ、HTMLコーディングは人から教えてもらうのが一番ですね。

必要な情報さえ教えてもらえれば、基本は1日で身につきます。

特に初心者は最初につまづくポイントが数多くあります。独学で始めても疑問点だらけだと思うので、もしよければ僕のマンツーマンレッスンを受けてくださいね笑

レッスンの内容自体も、これからどんどん進化させていきます。

今回はどうやったら初心者がHTMLを1日で書けるようになるのか、レッスンでやっている手順をまとめてみます。

あ、1日というのは8時間程度を想定しています。かなりみっちりなので、集中力が続かなさそうな方は、2日か3日に分けて受講して頂くのをお勧めします。

まずはテキストエディタをインストール

人によって、どうしてHTMLを使う必要があるのか違います。それぞれの用途に応じてテキストエディタを紹介しますが、文字コードが色々と変更可能なものが必要になります。

大抵の場合は、無料で使うことができるSublime Text 3を紹介しています。

※シェアウェアなので、無料で使っていると時々ライセンス購入のポップアップが出てきますが、消せば使い続けられます。

Sublime Text 3は僕も愛用しているテキストエディタなので、インストール方法から、カスタマイズ方法まで徹底的にアドバイスできます。

Sublime Text 3で必要な設定

Package Controlが超絶便利&しよう必須なのでインストール

初期設定に関して参考になるブログなど

LIGさんの記事は、Sublime Text 2の時のものですが、役に立ちます。

Sublime Text 3 のダウンロードと基本的な設定

HTMLって何?

小難しい話は興味がある人にだけして極力省いていきますが、HTMLの説明だけ少し。

多分、ホームページを作ったことのない人も、少し興味があればHTMLという言葉は聞いたことがあるんじゃないでしょうか。

HTMLとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略称です。

ハイパーテキストは複数の文書や画像、音声などの複数のオブジェクトをリンクさせたコンピュータ上の文章表現の一つです。

Markup Language つまりマークアップ言語ですが、これは

<p>何かしらの文章 あああああああ</p>

こんな風に、特定のテキストをタグ「< >」、つまり山括弧でマークアップ(目印を付ける)ための言語です。

ただのテキストファイルを単独で用意しても、コンピューターはどこが見出しで、段落で、リンクなのか理解できないんですよね。

そのため、コンピュータがテキストファイルを解釈して、文章を理解させるためにHTMLが必要になります。

要は、Google Chromeなどのブラウザで描画したり、Googleなどの検索エンジンが、ページ内容を把握するのに適切にマークアップされたHTMLが必要になるという

HTMLの例

こんな感じの文章があるとします。

左側に出ている数字は行数なので、今は気にしないでください。

ここが見出し

説明文章あああああああいいいいいいい・・・

そんでここも見出し

説明文章ごごごごごごごごごごごごごごごごごご・・・
説明文章ごごごごごごごごごごごごごごごごごご・・・

ここも見出し

説明文章ごごごごごごごごごごごごごごごごごご・・・
説明文章ごごごごごごごごごごごごごごごごごご・・・

また見出し

説明文章URYYYYYYYYYYYYYYYYYYYYYY!

でもこのままだと、どこが見出しで、どこが文章かコンピュータには伝わらないので、HTMLでマークアップすると・・・

<h2>ここが見出し</h2>

<p>説明文章あああああああいいいいいいい・・・</p>

<h2>そんでここも見出し</h2>

<p>
  説明文章ごごごごごごごごごごごごごごごごごご・・・<br>
  説明文章ごごごごごごごごごごごごごごごごごご・・・
</p>

<h2>ここも見出し</h2>

<p>
  説明文章ごごごごごごごごごごごごごごごごごご・・・<br>
  説明文章ごごごごごごごごごごごごごごごごごご・・・
</p>

<h2>また見出し</h2>

<p>説明文章URYYYYYYYYYYYYYYYYYYYYYY!</p>

こんなふうに書きます。ファイル名は、index.htmlといった感じになります。

h2で括られた(くくられた)箇所は見出し、pで括られた箇所は段落、brは単独で改行を表します。

このマークアップされたものをChromeやinternet ExplorerなどのWebブラウザで表示すると・・・

ドーーーーン!

HTMLでマークアップしちゃった☆

こんなふうになります。

HTML5で使えるタグの一覧はこちらです。

全部覚える必要はないので、よく使うものだけレッスンでお伝えします。

CSSって何?

先ほど、適当にマークアップした文章の例をWebブラウザで表示したものをお見せしたんですけど、物足りない感じしませんか?

そう、見た目にもっとこだわりたい!そんな時に必要となるのがCSSなんです!

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略です。

また出ましたね、難しい横文字。

日本語訳があればいいんですけどね。HTMLは札言語とか、CSSは描画言語とか。

横文字ばかり並ぶから、とっつきにくい人は多いだろうなーと思いながらも、世界中で使われるものなので、横文字の乱発にも慣れていきましょう。

さっきのHTMLファイルにCSSを適用すると、

ドーーーーン!

CSSで装飾しちゃった☆

こんなふうになりました。CSSさえあれば、どんなふうにでもいじれます。もっと綺麗なサンプルを用意すれば良かったですね・・・

CSSを適用するって?

CSSを適用するっていう言い方をしたんですけど、CSSを使うやり方は3種類ほどあります。

実際のCSSの記述例です。こんなものを、style.cssといった名前で別ファイルとして用意したり、

  h2 {
    padding: 0 0 5px 10px;
    border-bottom: 1px solid #dadada;
    border-left: 5px solid #666;
    font-size: 20px;
    font-weight: normal;
  }

HTMLファイル内に、styleというタグを使って記述したり、

<style type="text/css">
  h2 {
    padding: 0 0 5px 10px;
    border-bottom: 1px solid #dadada;
    border-left: 5px solid #666;
    font-size: 20px;
    font-weight: normal;
  }
</style>

もしくは、直接HTMLタグ内に書いてしまうこともできます。

    <h2 style="font-weight:normal;font-size:20px;">
      ここが見出し
    </h2>

僕のHTMLレッスンでは、最初から別ファイルとして記述するやり方を伝授します。

あとは実践あるのみ

省いていることは多いのですが、ここまでの内容が理解できていたら、あとは実践あるのみです。

実際にどんどん組んでもらいながら、こんな手順で理解を進めます!

  1. 文章型宣言の説明
  2. HTMLでマークアップ
  3. 代表的なHTMLタグの確認
  4. インライン要素ブロック要素の違い
  5. CSSを使って表示変更してみる
  6. 入力を簡易化できるEmmetの導入(必要があれば)
  7. CSSのfloatを使って段組してみる
  8. 画像編集ソフトの説明(PhotoShopなど)
    個人差は出てきますが、ここまでの説明で4時間くらいを目安にしています。
  9. 1ページのサイトを作ってみます!
    2時間ちょっとくらいで1ぺージ、サイトを作ってみます。

マンツーマンHTMLレッスンの申し込み

銀行振込メインですが、クレジットカード決済も可能です

1時間5,000円でレッスンをしています!

the Saibase名義の銀行口座宛に料金を振り込んで頂くか、決済サービスを使用してクレジットカード払いが可能です。
※今のところ、当日ご持参頂く感じでもOKにしています。

僕が10年間かけてやってきたことを全力で詰め込みます。

レッスン後も月に数回程度、Web制作でつまづいたりした際に無料で相談に乗りますよ!
※別途料金で実作業も可能です。

もちろんレッスンの内容で分からなかった部分は、とことんフォローします。

あ、HTMLの理解は個人によってかなり差があるので大人数での講習形式は考えてないんですが、3人くらいまでだったらご友人もお誘いの上どうぞ。割引します(笑)

お問い合わせフォームからお気軽にご連絡くださいね。

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

プログラミング 無料体験

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。@tomicci 詳しいプロフィール【運営サイト】 ザ サイベース おと風景