ザ・サイベース心動く、デジタルデータを創造する。2015年12月4日ツイートシェアはてブPocket1こんにちは。気づけば、HTMLを書くようになって10年という月日が経ってしまっていました...。最初は学生時代に自分のバンドや電子音響グループのホームページを作るため、半ば嫌々始めたHTMLですが、今では仕事になっているので不思議なもんです。夏にはおと風景という国内ではまだまだマニアックな、環境音に特化したWebサービスを個人でリリースしました。トップページのデザインのみ友達に依頼した以外、企画から開発、音源の録音・編集まで全部僕個人でやっています。有料で、HTMLの講師を主にマンツーマンでやっているんですが、HTMLを1日(6時間くらい)で理解してもらって、ある程度テキストエディタでタグ打ちまでできる感じになってもらえたいと思い、教えています。現在、マンツーマンレッスンの申し込みは中止しています。記事の最後に当ブログでオススメしているスクールを紹介しています。見てみる場所は喫茶店やコワーキングスペースとかが多いです。埼玉の人なら僕の川越オフィスとかでも可能です。Weaverのビジュアルエディタに全てお任せだったのがダメだったんですよね...。その後、学校に通って覚えたんですが、やっぱ、HTMLコーディングは人から教えてもらうのが一番ですね。必要な情報さえ教えてもらえれば、基本は1日で身につきます。初心者は最初につまづくポイントが数多くあります。独学で始めても疑問点だらけだと思うので、もしよければ僕のマンツーマンレッスンを受けてくださいね笑レッスンの内容自体も、これからどんどん進化させていきます。今回はどうやったら初心者がHTMLを1日で書けるようになるのか、レッスンでやっている手順をまとめてみます。あ、1日というのは8時間程度を想定しています。集中力が続かなさそうな方は、2日か3日に分けて受講して頂くのをお勧めします。プロから直接学べるプログラミングスクールの紹介!PHPコースあり!まずはテキストエディタをインストール人によって、どうしてHTMLを使う必要があるのか違います。それぞれの用途に応じてテキストエディタを紹介しますが、文字コードが色々と変更可能なものが必要になります。※シェアウェアなので、無料で使っていると時々ライセンス購入のポップアップが出てきますが、消せば使い続けられます。3は僕も愛用しているテキストエディタなので、インストール方法から、カスタマイズ方法まで徹底的にアドバイスできます。2の時のものですが、役に立ちます。ダウンロードと基本的な設定HTMLって何?小難しい話は興味がある人にだけして極力省いていきますが、HTMLの説明だけ少し。ホームページを作ったことのない人も、少し興味があればHTMLという言葉は聞いたことがあるんじゃないでしょうか。ランゲージ)の略称です。ハイパーテキストは複数の文書や画像、音声などの複数のオブジェクトをリンクさせたコンピュータ上の文章表現の一つです。>」、つまり山括弧でマークアップ(目印を付ける)ための言語です。ただのテキストファイルを単独で用意しても、コンピューターはどこが見出しで、段落で、リンクなのか理解できないんですよね。そのため、コンピュータがテキストファイルを解釈して、文章を理解させるためにHTMLが必要になります。Chromeなどのブラウザで描画したり、Googleなどの検索エンジンが、ページ内容を把握するのに適切にマークアップされたHTMLが必要になるというHTMLの例こんな感じの文章があるとします。左側に出ている数字は行数なので、今は気にしないでください。説明文章ごごごごごごごごごごごごごごごごごご...&lt;/p&gt;&lt;h2&gt;また見出し&lt;/h2&gt;&lt;p&gt;説明文章URYYYYYYYYYYYYYYYYYYYYYY!&lt;/p&gt;こんなふうに書きます。ファイル名は、index.htmlといった感じになります。h2で括られた(くくられた)箇所は見出し、pで括られた箇所は段落、brは単独で改行を表します。ExplorerなどのWebブラウザで表示すると...ドーーーーン!こんなふうになります。HTML5で使えるタグの一覧はこちらです。全部覚える必要はないので、よく使うものだけレッスンでお伝えします。Sheets(カスケーディング・スタイル・シート)の略です。出ましたね、難しい横文字。日本語訳があればいいんですけどね。HTMLは札言語とか、CSSは描画言語とか。横文字ばかり並ぶから、とっつきにくい人は多いだろうなーと思いながらも、世界中で使われるものなので、横文字の乱発にも慣れていきましょう。さっきのHTMLファイルにCSSを適用すると、ドーーーーン!こんなふうになりました。CSSさえあれば、どんなふうにでもいじれます。綺麗なサンプルを用意すれば良かったですね...CSSを適用するって?CSSを適用するっていう言い方をしたんですけど、CSSを使うやり方は3種類ほどあります。実際のCSSの記述例です。}&lt;/style&gt;もしくは、直接HTMLタグ内に書いてしまうこともできます。&lt;/h2&gt;僕のHTMLレッスンでは、最初から別ファイルとして記述するやり方を伝授します。あとは実践あるのみ省いていることは多いのですが、ここまでの内容が理解できていたら、あとは実践あるのみです。実際にどんどん組んでもらいながら、こんな手順で理解を進めます!文章型宣言の説明HTMLでマークアップ代表的なHTMLタグの確認インライン要素とブロック要素の違いCSSを使って表示変更してみる入力を簡易化できるEmmetの導入(必要があれば)CSSのfloatを使って段組してみる画像編集ソフトの説明(PhotoShopなど)個人差は出てきますが、ここまでの説明で4時間くらいを目安にしています。1ページのサイトを作ってみます!2時間ちょっとくらいで1ぺージ、サイトを作ってみます。Saibase名義の銀行口座宛に料金を振り込んで頂くか、決済サービスを使用してクレジットカード払いが可能です。※今のところ、当日ご持参頂く感じでもOKにしています。僕が10年間かけてやってきたことを全力で詰め込みます。レッスン後も月に数回程度、Web制作でつまづいたりした際に無料で相談に乗りますよ!※別途料金で実作業も可能です。レッスンの内容で分からなかった部分は、とことんフォローします。あ、HTMLの理解は個人によってかなり差があるので大人数での講習形式は考えてないんですが、3人くらいまでだったらご友人もお誘いの上どうぞ。割引します(笑)お問い合わせフォームからお気軽にご連絡くださいね。プロから直接学べるプログラミングスクールの紹介!PHPコースあり!Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。【参考記事】WebCampなら1ヶ月の短期集中でWebデザイナーを目指せる自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。行っており、フリーランス独立する道を探すこともできそうです。「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。HTMLこの記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブPocket1feedly6HTMLのマンツーマン講師に行ってきました!【MAZDA】新型ロードスター(ND)に試乗しました!RECOMMENDこちらの記事も人気です。PNGGauntlet(PNGガントレット)を使っ...HTML2016.2.24え!?まだimgタグのwidthとheightを手入力してるの?imgタ...HTML2016.1.13インターネットエクスプローラー(IE)対応に追われた日々よ、さようならHTML2015.12.5HTMLのマンツーマン講師に行ってきました!HTML2017.1.13WordPressの導入やカスタムなど、初心者〜中級者を対象にサポートし...HTML2015.2.17ショートカット一発!圧縮(min化)されたCSSやJavaScriptの...ABOUTこの記事を書いた人とみっち数年前までバンド活動してました。活動するよ!現在はブログを運営して暮らしています。サウンドクリエイター、Webクリエイター。)とし、現在は本庄市に住み法人化しました。6人で会社やってます。※自然の音からデスメタルまで聴きます。2018.02.06このブログの管理者とみっち数年前までバンド活動してました。活動するよ!現在はブログを運営して暮らしています。サウンドクリエイター、Webクリエイター。)とし、現在は本庄市に住み法人化しました。6人で会社やってます。※自然の音からデスメタルまで聴きます。