「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 デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

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

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

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

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