今さら聞けない!スマホ、PC対応サイトが小一時間で作れるようになる(動画説明付き)

昨今のスマートデバイス端末普及により、スマートフォン、タブレット対応のサイトを作ってみたいと思っている方は多いのではないでしょうか。
しかし何となく難しいイメージなどから制作に至っていない方などいらっしゃるのではないでしょうか。そんな方に今回の記事は必見です。
Twitter社が提供するBootstrapというテンプレートを使用することで、そんなに難しい知識を必要とせず構築することができます。

 

今回のゴール

 

この記事を読んでいただくと、パソコン、スマートフォン、タブレットなど、アクセスする端末によって、レイアウトが変わるサイトが作れるようになります。

この「サンプルサイト」がゴールとなります。

 

 

 

必要な環境

  • パソコン
  • テキストエディタ
  • Webサーバー( あればWebに公開することができます )

 

使用する技術

  • Twitter Bootstrap ( 使い方含めて説明します )
  • HTML5、CSS3 ( テンプレートを修正し学びます )

 

Twitter Bootstrapとは、米ツイッター社が開発、提供している、スマートフォン、パソコン両方に適応するためのテンプレートです。
無償で提供されていますので、誰でも無料で利用することができます。

特徴

  • 簡単
  • 広く使われているので、無料、有料テンプレートが多い
  • デザイナーが居なくても、それとなくお洒落になる

 

作成方法

  1. Twitter Bootstrapのダウンロード
  2. ナビゲーションメニューを設定
  3. メインビジュアルを追加する
  4. メインコンテンツを追加する

 

ソースコード

今回作成するサンプルサイトは以下のサイトよりダウンロードすることができます。

https://github.com/abechiyo/bootstrap-basic

 

 

 

 

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

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。