webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

モバイルファーストを意識したレスポンシブデザインサイトの制作 1

モバイルファースト

モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。

とありますが、モバイルファーストとは単にスマホレイアウトから作っていく、という作業手順の事では無く、ユーザーにとって必要なコンテンツや情報をスマホサイトにしっかりと入れ、見易さや使い易さも考慮して作っていく事が大切です。簡単に言うとスマホサイトで完結出来ているか、という事で、それをPCでみた際にも違和感が無いように手直しして行く事です。

業種にもよりますが、最近はPCよりもスマホからのアクセス数が多いwebサイトも珍しくありません。そもそもPCを持っていない人にとっては、スマホでネットを見る、という選択肢しか無いですし、PCを持っていても「ファーストスクリーン」がスマホ、というユーザーも少なくありません。なので、スマホサイトでもしっかりとユーザーのニーズに応える必要が出て来ます。

✕ PCサイトから余分な部分を削る
◯ スマホサイトで必要な物をしっかりと入れ、PCレイアウトで見ても違和感の無いように調整する

yachin29.hatenablog.com


使用する画像
http://yachin29.webcrow.jp/netsmart.zip


使用するテキスト
株式会社ネットスマート

メニュー

サービス紹介
実績紹介
会社概要
採用情報


メンテナンスのお知らせ


サービスピックアップ

CMS

SEO

ソーシャル

低価格&高機能なCMS導入。
充実の管理画面でサイト運用を効率的に。

検索ワードを短期間で上位表示。
スマートフォンサイトにも対応します。

Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。



サービス紹介

実績紹介

会社概要

採用情報





セミナー

2017年2月11日
テキストテキストテキストテキストテキスト

2017年1月19日
テキストテキストテキストテキストテキスト

2016年12月14日
テキストテキストテキストテキストテキスト

2016年10月10日
テキストテキストテキストテキストテキスト

2016年9月29日
テキストテキストテキストテキストテキスト



お知らせ

2017年2月18日
採用情報を更新しました

2017年2月11日
実績紹介を更新しました

2017年2月1日
サービスが紹介されました

2017年1月25日
社内ブログを開設しました



サイトマップ
プライバシーポリシー
サイトのご利用について
免責事項


©2017 Net Smart Co., Ltd. All rights Reserved.



ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モバイルファーストで作るRWD</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/rwd.css" media="only screen and (min-width:768px)">
</head>

<body>
<div id="container">
<header>
<h1>株式会社ネットスマート</h1>
</header>
<nav>
<p>メニュー</p>
<ul>
<li><a href="#">サービス紹介</a></li>
<li><a href="#">実績紹介</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
</ul>
</nav>

<div id="alert">
<p>メンテナンスのお知らせ</p>
</div>

<div id="pickup">
<h2>サービスピックアップ</h2>
<ul>
<li><a href="#">CMS</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">ソーシャル</a></li>
</ul>

<div class="tabContents current" id="cms">
<div class="round">
<p><a href="#">
<img src="img/img_pickup_cms.png" alt="CMS">
</a></p>
</div><!--/round-->
<p class="text">低価格&amp;高機能なCMS導入。<br>
充実の管理画面でサイト運用を効率的に。</p>
</div><!--/tabContents-->

<div class="tabContents" id="seo">
<div class="round">
<p><a href="#">
<img src="img/img_pickup_seo.png" alt="SEO">
</a></p>
</div><!--/round-->
<p class="text">検索ワードを短期間で上位表示。<br>
スマートフォンサイトにも対応します。</p>
</div><!--/tabContents-->

<div class="tabContents" id="social">
<div class="round">
<p><a href="#"><img src="img/img_pickup_social.png" alt="ソーシャル"></a></p>
</div><!--/round-->
<p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
</div><!--/tabContents-->
</div><!--/pickup-->


<div class="indexBoxes">
<ul>
  <li><a href="#"><div>サービス紹介</div></a></li>
  <li><a href="#"><div>実績紹介</div></a></li>
  <li><a href="#"><div>会社概要</div></a></li>
  <li><a href="#"><div>採用情報</div></a></li>
</ul>
</div>

<div class="seminar">
<h2>セミナー</h2>
<dl class="infoLink">
<dt>2017年5月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年4月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年3月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年2月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年1月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</div><!--/seminar-->

<div class="information">
<h2>お知らせ</h2>
<dl class="infoLink">
  <dt>2017年3月18日</dt><dd><a href="#">採用情報を更新しました</a></dd>
  <dt>2017年3月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd>
  <dt>2017年3月1日</dt><dd><a href="#">サービスが紹介されました</a></dd>
  <dt>2017年2月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd>
</dl>
</div><!--/information-->

<footer id="globalFooter">
<nav>
<ul>
  <li><a href="#"><div>サイトマップ</div></a></li>
  <li><a href="#"><div>プライバシーポリシー</div></a></li>
  <li><a href="#"><div>サイトのご利用について</div></a></li>
  <li><a href="#"><div>免責事項</div></a></li>
</ul>
</nav>
<p id="copyright"><small>&copy;2017 Net Smart Co., Ltd. All rights Reserved.</small></p>
</footer>
</div>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,
address,ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*モバイルのみ*/
header {
  width:100%;
  height:100px;
  background: linear-gradient(to bottom, #efefef, #ffffff); /*W3C*/
}
h1 {
  background:url(../img/logo.png) no-repeat center/contain;
  width:120px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}


完成例
http://yachin29.webcrow.jp/sp2/