HTMLスイスイ〜

基礎編　予備知識 - A

HTMLをご紹介いたします。書き方の基本を覚えたい人のために教科書と動画サイトを作りました。まず最初にHTMLで何ができるのかをお話しいたしましょう。

私の部屋にはたくさんのCDや本 / ノートなどがあります。すべてのリストをHTMLで管理しているので、必要なときに検索してすぐ取り出すことができます。HTMLをほんの少し書いておくだけでCDとかレコードなどのタイトルと曲名をデータ・ベースにすることができます。つまり市販されているソフトは一切使わずにデータ・ベースを自作することができるわけですが、例えばそれはこんな感じです。

私の場合はこれまで自分が書いた楽譜がたくさんありますから、楽譜を探すときはいつもこの便利なアイテムを使っています。それでは、この中から何かの曲を検索してみましょう。例えば「オータムン・リーブス」というを曲名をここに書き入れます。ジャズ・スタンダードの「枯葉」ですね。オウタムン・リーブス、、、と書き入れて検索のボタンを押します。検索ボタンを押すと、[click] あっ！ ヒットしました。このカードを開いてみましょう。開くのボタンを押すと、[click] 枯葉のページが開きます。ここで楽譜を確認したり、ダウンロードしてみんなに配ったり、このページをプリントして使うことができます。もちろん、ここで音を聴くことができます。[click] [guitar sound] こんな感じですね。そして、また、もとのデータベースに戻れます。カード式のデータ・ベースなのでボタンを押せば曲名や作曲者の情報をアイウエオ順で並べ替えることができます。カードの順番を整えたり、必要に応じてジャンルごとに分けたり、また元にもどしたり、HTMLは本当に便利ですね。

次に、地図や写真の一部分に細かいリンク・ボタンを埋め込んで、そこをクリックすると目的の情報にたどりつける例をご紹介いたしましょう。そうなんです、HTMLを使うとページ内の好きな部分をボタンにしておくことができるわけです。私は東京都や神奈川県、埼玉県、千葉県のライブ・ハウス情報をまとめて、自作ツール作って、この中からいろいろな情報を得ています。例えば、新宿区をクリックすると、新宿区内のお店の地図や営業時間などが表示される仕組みです。これも便利ですね。

それから、HTMLにCSSやCGIを加えると、それはホームページとして使える立派なフォト・ギャラリーやメール・フォームを自作することができます。これは写真を選んでクリックすると、大きく拡大されるように作ってあります。こちらはデザインで使うカラーの見本です。25枚の写真の場合はこんな感じになります。メール・フォームを作っておくと、何かを申し込みたい人に名前やメール・アドレスを入力していただいて、その情報を転送することができます。

さらに、HTMLにJavaScriptを組み込めば、カレンダーやスケジュール帳を作ることができます。こんなふうに自分のカレンダーを自分で作れたらいいですね。HTMLとCSS / JavaScript を組み合わせると、プロ仕様のウエブ・サイトを作ることができます。私が作ったこのサイトはスマートフォンの画面にも対応しています。自分に必要なホームページは自分で作るのが一番。このページでは作曲とアレンジを個人指導している教室であることがすぐにわかりますね。

HTMLはホームページを作るときの基礎なのですが、必ずしもHTMLでホームページを作らなければいけないわけではありません。ここがポイントです！ 「HTMLを利用して自分だけの便利なツールを作って活用してみる」これはいかがでしょうか？ 古いパソコンがあれば、あとは何も必要ありません。インターネットに接続する必要もありません。すべて無料です。とっても簡単で、1日で覚えられますよ。早い人は15分でマスターできますね。

それでは今から、HTMLの書き方をお教えいたしましょう。メモのご用意、、、ではなくて、まずグーグルかヤフーでこの言葉を検索してください。htmlの後にすいすいと入力します。すいすいはカタカナ(スイスイ)でもOKです。検索すると、このページがトップに出てきますから、そこをクリックします。すると「HTMLスイスイ」という私の教科書が出てきます。

このサイトのURLは https://html-suisui.com/なのですが、こんなに長く読む必要はありません。最初と最後は省略できますね。最初と最後の文字の色をうすくしてみます。はい、ここだけを読みます。読み方はわかりますか？ では、一緒に読んでみましょう。h t m l ハイフン すい すい どっと　コム。html-suisui.com ですね。このサイトのトップのロゴ・マークは秘密のボタンになっています。ここをクリックしますと、これから勉強するHTMLの実験ができるページに移動いたします。このページが実験のページです。

ウェブ・サイトと一緒に使用する教科書が二冊あります。前半と後半ですね。教科書は基礎編と応用編の二冊になっています。入手したい方はメールか電話でミュージックスクール・アップロードハウスにお問い合わせください。住所は東京都中野区中野なのでお近くの方は取りに来ていただいても結構です。私は作曲とアレンジの講師をしていますナグネ中川卓也と申します。よろしくお願いいたします。それでは、教科書をお持ちの方は1ページを開いてください。

基礎編　予備知識 A　この教科書の使い方

レッスンはhtmlスイスイというサイトのカリキュラムを上から順に読めばすべてを習得できるように作られています。二冊の教科書と連動していますから先に本を取り寄せておいてください。このレッスンには動画を閲覧できるサイトと、教科書をネット上でも確認できるこのサイトと、必要なファイルをダウンロードできるダウンロード・サイトが用意されています。そして、トップに設置されている実験用のページも使うことができます。レッスンに関する質問がある方はアップロードハウスのナグネ中川まで送ってください。

はい、以上が今回のレッスンでした。次の動画ではHTMLについて、もう少し詳しくお話しいたします。ナグネ中川でした。