「HTMLって何?WEBサイトを作るってどうするの?」という方に、私たちがどんなことをしているのか知ってもらいたい。

  • このエントリーをはてなブックマークに追加

仕事柄、WEBに関することをプライベートでも聞かれることが多いです。
一番多いのが「WEBサイトってどうやって作るの!?」というものなのですが、説明する際にHTMLソースを見せて「ここに画像を表示して、ここに文章を書いて、って表示の指示を延々と書いていくの」と伝えると、大抵の方が「そっか…」と少し悲しそうな顔をします。

英数記号の羅列を見ると拒否反応を示してしまう方が多く、そこで話が終わってしまいます。
実際にHTMLタグを学ぼうとして他のサイトを見てみるも、何だか難しそうだったり、リファレンスばかりだったり。本当に途方もないものに見えます。

そこで、実際にタグを書いてみれば少し興味を持ってもらえるんじゃないかと思いつきました。
実際に表示されたり動くと、何だか嬉しくなるものです。
画像を表示する、など本当に初歩的なものですが、私たちがどんなことをお仕事でしているのか、試してもらいながら知ってもらえばなと、記事にしました。



つかいかた

①フォームに文字を入力して、②青い実行ボタンを押すと、③すぐ下の枠線の中に結果が表示されるようになっています。解説の通りに文字を入力して、実行ボタンを押してください。
初期表示に戻したい時は、ページを更新してください。

▽実行する

ここに結果が表示されます


※タグは全て半角英数で書きます。間に半角スペースが必要な場合もあるので、良く見てみて下さいね。

文字を強調する

文字を強調するには「strong」タグを使います。
強調したい文字を、「<strong>ここに強調したい文字</strong>」と囲みます。
後ろのタグに/を入れるのを忘れないでくださいね。

下のフォームの文字を、strongタグで囲んで、実行してみて下さい。

▽実行する

ここに結果が表示されます


結果が太字になれば正解です!

画像を表示する

画像を表示するには「img」タグを使います。imgタグには”どの画像を表示するのか”を書かなければいけません。

<img src=”#”>
src=”#” の、# の所に画像の名前を書き込みます。今回はこちらで画像を用意しました。

下のフォームの#を、[ /sample.jpg ]に変更して実行してみて下さい。

▽実行する

ここに結果が表示されます


結果に画像が表示されれば正解です!

リンクを貼ってみる

画像を表示するには「a」タグを使います。aタグには”どこにリンクさせたいのか”を書かなければいけません。

<a href=”#”>この文章にリンクをはります</a>
href=”#” の、# の所にリンクさせるURLを書き込みます。今回はGoogleにリンクしてみましょう。

下のフォームの#を、[ http://www.google.co.jp/ ]に変更して実行してみて下さい。

▽実行する

ここに結果が表示されます


文字をクリックして、Googleのページが表示されれば正解です!





—–

さて、3つ程試してみて頂きましたが、いかがでしたでしょうか。
ブログを書く時でも少しHTMLタグを触れるとより細かい設定ができるようになります。
これをきっかけに、HTMLタグからすこしでも恐怖感が無くなれば嬉しいです(実際に仕事にするとなると高度なことをどんどんできるようにならなければいけいないのですが。。。)

できればシリーズ化して、デバッグ版間違い探しとかもできるようにできたらいいなぁなんて思います。

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。