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

web開発

2017/06/01

web開発

現在ビジネスを行う上でウェブを使用したプロモーションやマーケティングは必須です。セールスやマーケティング担当者でも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のコースで一緒に学んでみましょう。あなたはウェブプログラミングをマスターしたらどんなサイトを作りたいですか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事