photo
photo
  1. トップ
  2. Webデザイン
  3. 【動画解説付!】はじめてのウェブページを20分で作成してみよう!

【動画解説付!】はじめてのウェブページを20分で作成してみよう!

現在ビジネスを行う上でウェブを使用したプロモーションやマーケティングは必須です。セールスやマーケティング担当者でもHTMLの知識が少々あると、外注したりエンジニアに依頼したりしなくても、商品や事例を紹介するコンテンツの公開や更新ができるようになります。

また、ウェブプログラミングをマスターする上で近年必須とされているのが、スマホやタブレットなど、さまざまな端末に対応するレスポンシブデザインです。

そこで今回はレスポンシブデザインを実現するために広く使用されているライブラリ、Bootstrap最新版(version 4 alpha)を用いてレスポンシブなウェブページの作成を体験してみましょう。また、Bootstrapの入手手順について動画で紹介しますので、はじめての方でもチャレンジしてみてください。

 

1.Bootstrap のサイトを開こう

 

以下のページをウェブブラウザで開きましょう。

 %ef%bc%91

https://v4-alpha.getbootstrap.com/

このサイトではBootstrapを構成するファイルをダウンロードしたり、マニュアルを参照したりできます。今回は、すばやくページを作成するために “Examples” にあるテンプレートを使用します。

 

2.一番上の行にある “Examples”のリンクを開こう

 %ef%bc%92

Examplesのページ

 

するとさまざまなテンプレート(Framework)が並んでいます。今回は、左上にあるStarter templateをアレンジしてみましょう。まず、Starter templateのスクリーンショットをクリックして表示しましょう。すると以下のようなシンプルなページが開きます。

 %e2%91%a2

 

Starter templateを表示したところウィンドウの横幅を狭くすると、Facebookなどのサイトでもおなじみのハンバーガーメニューが表示されます。ページ左上にあった各種リンクが右上のアイコン内に移動します。

このように表示している端末の横幅に応じて表示を自動的に切り替えて表示することを、レスポンシブデザインと呼んでいます。パソコンよりスマホからインターネットにアクセスするユーザーが多い現代には必須です。

%e2%91%a3

横幅を狭くして表示を切り替えたところ

3.テンプレートを確認してみよう

 

それでは、ページ上で右クリックして、ページのソース(レイアウトを指定しているファイル)を表示させてみましょう。このファイルをウェブプログラミングではHTMLファイルと呼んでいます。

 %e2%91%a4

ページのソースを表示したところ

 

今回は、このファイルを使用してはじめてのウェブページを作成してみたいと思います。そのために、さきほどのExamplesのページに戻り、”Download the Bootstrap source code” のリンク(https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.6.zip)をクリックしましょう。

すると、ファイルを保存するダイアログが出るので、いったんデスクトップに保存しましょう。

%e2%91%a5

Bootstrapのソースコードを保存

 %e2%91%a6

圧縮ファイルを確認

 

Windowsなら「すべて展開」をクリックして圧縮ファイルを展開します。Macの場合は、ダブルクリックすると展開されます。

 

 %e2%91%a7

展開すると、上の通りに展開した場合は、デスクトップにbootstrap-4.0.0-alpha.6というフォルダができます。この中の Docs/examples/starter-templateの中に先ほどチェックしたスターターテンプレートが入っています。

 %e2%91%a8

 

starter-templateを表示したところ

 

念のため、フォルダ内のindex.htmlというファイルをウェブブラウザで開いて表示されることを確認しましょう。

 %e2%91%ac

ダウンロード・展開したフォルダ内にあるテンプレートファイル(index.html

 

今回は、Navbarというメニューの名前と、本文(Bootstrap starter template)の2か所を改変してみます。

 

4.テキストエディターでindex.htmlを編集しよう

 

それでは、HTMLファイル(.htmlというファイル拡張子のついたテキストファイル)をテキストエディターで開いて編集していきます。

編集に使用するテキストエディターですが、余計な装飾をしないものがいいでしょう。Adobe Bracketshttp://brackets.io/)や、Atomhttps://atom.io/)などが無料で高機能なのでお勧めです。メモ帳やテキストエディットなどは余分なデータが入ってしまうことがあり、お勧めしません。

 %e2%91%aa

index.htmlをテキストエディター(Brackets)で開いたところ

 

まずはメニューバーのタイトルです。上の図では25行目にNavbarというタイトルがありますので、これを日本語にしてみましょう。たとえば、「メニュー」とします。変更したらファイルを上書き保存して、ページを再読み込みしてみましょう。

 %e2%91%ac

メニューバーのタイトルを変更

 

次は本文の見出しとテキストを変更してみましょう。<h1>というタグ(カッコつきの記号)で囲まれた部分が本文のタイトルです。たとえば、「はじめてのウェブページ」と変更して上書き保存し、再読み込みしてみましょう。

 %e2%91%ad

本文の見出しを変更して再読み込み

続いて本文を変更します。<p class=”lead”>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p><p class= “lead”> から </p>で囲まれた部分を変更してみましょう。

 %e2%91%ae

本文を変更して再読み込みしたところ

 %e2%91%af

スマホでの表示を確認したところ

 ここまでの内容の一部を動画でもご説明します。プログラミングは動画での学習がわかりやすくおすすめです。ぜひそのわかりやすさを体験してみてください。

 


いかがだったでしょうか?意外に簡単にページ作成ができたのではないでしょうか?さらに画像を配置したり、動画を埋め込んだり、ユーザーの入力に応じて結果を返すようなタグやプログラムを追加していくと、オリジナルのサイトやサービスを生み出すことができます。

興味を持った方はぜひUdemyのコースで一緒に学んでみましょう。あなたはウェブプログラミングをマスターしたらどんなサイトを作りたいですか?

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。

イラレの基本~実践的なテクニックを学ぶ

【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?

Photoshopの技術を身につける

最新Photoshop CC 23時間の動画と演習でPhotoshopの全てを完全マスター 初心者がプロを目指すコース
最新Photoshop CC 23時間の動画と演習でPhotoshopの全てを完全マスター 初心者がプロを目指すコース

初心者レベルの方でもWEB、出版などのデザイナーとしてスタートできるスキルを持つことができます。

動画編集をマスターしよう!

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。