May 2018  |  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Internet(インターネット)

インターネット(英: Internet)は、インターネット・プロトコル技術を利用してコンピュータネットワーク間の相互接続を行うことにより実現されるネットワークのことである。

Wikipedia

World Wide Web(ワールド ワイド ウェブ)

World Wide Web(ワールド ワイド ウェブ、略名:WWW)とは、インターネット上で提供されるハイパーテキストシステム。W3(ダブリュー スリー)あるいは単に Web(ウェブ)とも呼ばれる。インターネットは、コンピュータネットワーク自体を指す言葉であり、ウェブはその応用技術のひとつである。また、分散システムの一形態である。

Wikipedia

Web Browser(ウェブブラウザ)

ウェブブラウザ(インターネットブラウザ、web browser)とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ(ブラウザー)と呼んだ場合、多くはウェブブラウザのことを指す。

WWW 上の情報リソースを扱うアプリケーションであり、ウェブページ・画像・動画・音声等の情報リソースの識別には Uniform Resource Identifier (URI) を使用する。

ウェブブラウザは WWW への接続を第一の目的としているが、プライベートネットワーク内の Web サーバやファイルシステム内のファイルが提供する情報への接続にも利用できる。主なウェブブラウザとして、Internet Explorer, Microsoft Edge, Mozilla Firefox, Google Chrome, Opera, Safari 等がある。

Wikipedia

Electronic Commerce(電子商取引)

電子商取引(でんししょうとりひき、英: electronic commerce)とは、コンピュータネットワーク上での電子的な情報通信によって商品やサービスを売買したり分配したりすること。略称は「eコマース」(イーコマース)「イートレード」など。消費者側からは「ネットショッピング」とも呼ばれている。

この記事では特に、インターネットを通じての企業と消費者との商品売買(通信販売の一形態)について記述する。商取引を行うためのウェブサイトについては、ここでも説明の途中で若干は触れるが、別記事が立てられているので詳しくは「ECサイト」や「電子商店街」の記事を参照のこと。

Wikipedia

PING(ピング)

ほとんどのブログの更新は不定期です。ブログをブックマークに入れて毎日訪問してもらえば、新しいエントリーが増えたときに読んでもらう事はできますが、毎日更新できない場合は何度訪問しても新しい記事が無く読者をがっかりさせてしまいます。また一日に何度も更新する人は、新しい記事を登録したらすぐに読んでもらいたくなるでしょう。読者にブログを更新したことをすぐに知らせる方法はないでしょうか?

ひとつは別ページで説明したRSSです。JUGEMではエントリーを入力したときRSSを自動的に生成するので、自分のブログをRSSリーダーに登録してくれている読者にはすぐに更新を知らせることができます。しかし当然この方法では、RSSを登録してくれている読者にしか届きません。

そこで活用してほしいのが 「Ping」 です。インターネットには色々なブログの更新情報を収集し、誰でもそれを見ることができるようになっているサイトがあります。そういったサイトを 「Pingサーバ 」 もしくは 「Pingサイト」 と呼びます。このPingサーバに対して、更新したことを通知することを 「Pingを打つ」 と言います。

PingサーバにPingを打っておけば、そのサイトを訪れるひとすべてに、自分のブログの更新情報を知らせることができるのです。新しい読者も増えるかもしれません。Pingを打つ行為には「XML-RPC」という新しい技術が利用されているのですが、利用するのはとても簡単です。

Wikipedia

確認事項(01) ※Google

【  Q001  】現在、使用してらっしゃるプラットフォームをお答え下さい。



【  Q002  】現在、Googleのアカウントを持っていますか?



※上記で「持っている」とお答えの場合、Googleアカウントをご利用のプラットフォームをお答え下さい。

持っている方は Q004 へ進んで下さい。持っていない方は Q003 へ
 

【  Q003  】Google Chromeのインストール方法をご存知ですか?

 

 Q003 Googleアプリ上で複数でのアカウントの管理方法をご存知ですか? 





、まずご自身のGoogleアカウントを取る為に「Google Chrome」をインストールして、ご自身のアカウントを取って下さい(こちらはあくまで私的なアカウントでWEBサイト用ではありません。個人のアカウントを取った後に、WEBサイト用を別に作りますので、アカウントの命名を最初から切り分けて下さい)。
 
» read more

ご予約

鯖(ca va?)屋へのご用命は下記のカレンダーからお願いいたしますm(_ _)m

〇ご要約受付中/△時間により空き有/×受付終了

※18時以降のご予約に関しましては、リモート対応のみとさせて頂きます。

※打合せ等のアポイントに関しましては、開始時間のみご指定頂き、所要時間等を「要望」にご記入下さると当方にて後の時間帯を調節させて頂きます。

※既存の予約システムを使用しておりますので、1時間単位での予定組しか出来ませんが、細かい時間のご要望等ありましたらこちらも「要望」の方にご記入下されば当方にて調節させて頂きます。

※コワーキングスペース(新大阪)をご利用の場合は、場所確保の為、2日前までのご予約をお願いいたします。又、別途場所指定、ご自宅訪問をご希望の場合は、移動等の時間調整が必要になりますので、お手数ですが予約時の「要望」欄に所在地をご記入頂けます様、よろしくお願いいたします。

※当方は現在1名のみで運営しておりますところから、同一日に別の方の予約が入った場合は、移動時間等の問題で、当方で時間の調整をさせて頂く場合がございますので、あらかじめご了承頂きたくよろしくお願いいたします。




フューチャーフォンの方は、こちらより承ります。
こちらをクリック頂くか、アプリのQRコードリーダーより以下のQRコードを読み取って下さい。




 

ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介

twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。

今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。

実物は別サーバーにアップしていますので、こちらでご確認ください。

今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。

で、まず最初にアイコン形式のフォントを読み込む設定をします。

01 @font-face {
02     font-family'WebSymbolsRegular';
03     srcurl('websymbols-regular-webfont.eot');
04     srcurl('websymbols-regular-webfont.eot?#iefix'format('embedded-opentype'),
05          url('websymbols-regular-webfont.woff'format('woff'),
06          url('websymbols-regular-webfont.ttf'format('truetype'),
07          url('websymbols-regular-webfont.svg#WebSymbolsRegular'format('svg');
08     font-weightnormal;
09     font-stylenormal;
10 }

次からは実際にアイコンを表示していく設定になります。

最初

まずは普通に並べてみます。

1 <div id="social-icon">f g k r v</div>

HTMLはこのようにアルファベットを並べただけになります。

1 #social-icon {
2     font-size:50px;
3     font-family'WebSymbolsRegular';
4 }

CSSで最初に読み込んだアイコン形式のフォントを指定すると、そのアルファベットに該当するアイコンが表示されます。

リンクにしてみる

リンクにしないと意味がないのでリンクを指定してみます。すると当然青くなって下線が入ります。

1 <div id="social-icon">
2   <a href="#">f</a>
3   <a href="#">g</a>
4   <a href="#">k</a>
5   <a href="#">r</a>
6   <a href="#">v</a>
7 </div>

先ほどと同じようにHTMLはこのようにアルファベットを並べただけになります。コードを見ただけだとアイコンだと分かりませんし、検索エンジン様に誤解を与えるかもしれません。解決方法は次で紹介します。

アイコンごとに色を付けてみる

アイコンごとに色を付けてみます。さらに、表示したいアイコンに該当するアルファベットをHTMLではなくCSSで記述します。

1 <div id="social-icon">
2   <a href="#" class="facebook"></a>
3   <a href="#" class="google-plus"></a>
4   <a href="#" class="twitter"></a>
5   <a href="#" class="feed"></a>
6   <a href="#" class="hatena"></a>
7 </div>

HTMLはこのように空のリンクになります。この先色々変形させていきますが、HTMLは変えずにCSSを変えていきます。

そして、それぞれのアイコンに該当するアルファベットはCSSで指定します。セレクタが長くなっていますが、別にクラス名だけでも大丈夫です。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     padding0 5px;
07 }
08 #social-icon a.facebook:before {color#3b5998content"f";}
09 #social-icon a.google-plus:before {color#c53727content"g";}
10 #social-icon a.twitter:before {color#00a1e9content"k";}
11 #social-icon a.feed:before {color#ff8c00;content"r";}
12 #social-icon a.hatena:before {color#0075c2;content"v";}

個人的にほとんど使うことがない「:before擬似要素」を使っています。「.facebook:before {content: "f";}」だとfacebookというクラス名がついた要素の前にアルファベットの「f」が挿入されることになります。

テキストシャドウを使ってみる

テキストシャドウを使ってみます。これがあるとかなり見栄えが良くなります。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 5px;
08 }
09 #social-icon a.facebook:before {color#3b5998content"f";}
10 #social-icon a.google-plus:before {color#c53727content"g";}
11 #social-icon a.twitter:before {color#00a1e9content"k";}
12 #social-icon a.feed:before {color#ff8c00;content"r";}
13 #social-icon a.hatena:before {color#0075c2;content"v";}

オンマウスで色を変えてみる

最初は白くてマウスを乗せたときに色が変わるようにします。アルファベットと色を別々に指定することになるので、ちょっと長くなります。

01 #social-icon a {
02     font-size:50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 5px;
08 }
09 #social-icon a.facebook:before {content"f";}
10 #social-icon a.google-plus:before {content"g";}
11 #social-icon a.twitter:before {content"k";}
12 #social-icon a.feed:before {content"r";}
13 #social-icon a.hatena:before {content"v";}
14 #social-icon a.facebook:hover {color#3b5998;}
15 #social-icon a.google-plus:hover {color#c53727;}
16 #social-icon a.twitter:hover {color#00a1e9;}
17 #social-icon a.feed:hover {color#ff8c00;}
18 #social-icon a.hatena:hover {color#0075c2;}

transitionを使ってみる

先ほどとほぼ一緒ですがtransitionを使って滑らかに色が変わるようにします。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 5px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10 }
11 #social-icon a.facebook:before {content"f";}
12 #social-icon a.google-plus:before {content"g";}
13 #social-icon a.twitter:before {content"k";}
14 #social-icon a.feed:before {content"r";}
15 #social-icon a.hatena:before {content"v";}
16 #social-icon a.facebook:hover {color#3b5998;}
17 #social-icon a.google-plus:hover {color#c53727;}
18 #social-icon a.twitter:hover {color#00a1e9;}
19 #social-icon a.feed:hover {color#ff8c00;}
20 #social-icon a.hatena:hover {color#0075c2;}

transitionについては、ChromeやSafariのWebKit系とFirefoxがベンダープレフィックス付きで対応しています。また、WebKit系は一括指定できますが、Firefoxは一括指定できませんので、「-moz-transition-duration」で指定しています。

transitionについてはこの画像をご参考に。

RGBaカラーを使ってみる

元の色にRGBaカラーを使っています。サンプルのように背景に画像を使っているときなどに効果的です。RGBaカラーに対応していないブラウザのために、「color: #fff;」は残しています。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     color: rgba(0,0,0,0.1);
06     text-decorationnone;
07     padding0 5px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10 }
11 #social-icon a.facebook:before {content"f";}
12 #social-icon a.google-plus:before {content"g";}
13 #social-icon a.twitter:before {content"k";}
14 #social-icon a.feed:before {content"r";}
15 #social-icon a.hatena:before {content"v";}
16 #social-icon a.facebook:hover {color#3b5998;}
17 #social-icon a.google-plus:hover {color#c53727;}
18 #social-icon a.twitter:hover {color#00a1e9;}
19 #social-icon a.feed:hover {color#ff8c00;}
20 #social-icon a.hatena:hover {color#0075c2;}

オンマウスで大きくしてみる

マウスを乗せたときにアイコンが大きくなります。単純ですがtransitionを使うと滑らかに大きくなり印象はぐっと良くなります。

01 #social-icon a {
02     font-size42px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #0002px 2px 2px #aaa;
07     padding0 3px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10     vertical-align:text-top;
11 }
12 #social-icon a.facebook:before {color#3b5998content"f";}
13 #social-icon a.google-plus:before {color#c53727content"g";}
14 #social-icon a.twitter:before {color#00a1e9content"k";}
15 #social-icon a.feed:before {color#ff8c00;content"r";}
16 #social-icon a.hatena:before {color#0075c2;content"v";}
17 #social-icon a:hover {
18     font-size60px;
19 }

オンマウスでくるっと回る

0.3秒かけてくるっと回ります。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 10px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10     displayblock;
11     floatleft;
12 }
13 #social-icon a.facebook:before {color#3b5998content"f";}
14 #social-icon a.google-plus:before {color#c53727content"g";}
15 #social-icon a.twitter:before {color#00a1e9content"k";}
16 #social-icon a.feed:before {color#ff8c00;content"r";}
17 #social-icon a.hatena:before {color#0075c2;content"v";}
18 #social-icon a:hover{
19     -moz-transform: rotate(360deg);
20     -webkit-transform: rotate(360deg);
21 }

もっと回してみる

先ほどと一緒ですが、今度は2秒かけて20回転します

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 10px;
08     -moz-transition-duration: 2s;
09     -webkit-transition: 2s;
10     displayblock;
11     floatleft;
12 }
13 #social-icon a.facebook:before {color#3b5998content"f";}
14 #social-icon a.google-plus:before {color#c53727content"g";}
15 #social-icon a.twitter:before {color#00a1e9content"k";}
16 #social-icon a.feed:before {color#ff8c00;content"r";}
17 #social-icon a.hatena:before {color#0075c2;content"v";}
18 #social-icon a:hover{
19     -moz-transform: rotate(7200deg);
20     -webkit-transform: rotate(7200deg);
21 }

めくってみる

最後はめくれるように回ります。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 10px;
08     -moz-transition-duration: 1s;
09     -webkit-transition: 1s;
10     displayblock;
11     floatleft;
12 }
13 #social-icon a.facebook:before {color#3b5998content"f";}
14 #social-icon a.google-plus:before {color#c53727content"g";}
15 #social-icon a.twitter:before {color#00a1e9content"k";}
16 #social-icon a.feed:before {color#ff8c00;content"r";}
17 #social-icon a.hatena:before {color#0075c2;content"v";}
18 #social-icon a:hover{
19     -moz-transform: rotateY(360deg);
20     -webkit-transform: rotateY(360deg);
21 }

CSSの@importはどれだけ悪影響なのか自分で試してみる

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。
問題となるのはパラレルロード(複数のリソースを同時にロードする)ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。
実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。

比較する3つの読み込み方

今回はこの3つで読み込みを比較してみます。

  1. CSSの@import url();で読み込む
  2. HTMLのlink要素で別々に読み込む
  3. Sassで@importして1つにまとめてlink要素で読み込む

対象ブラウザ

今回の検証ブラウザはChromeとInternet Explorerです。
どちらも備え付けの開発者ツールで検証します。

今回計測したサンプル

サンプルはこちらに公開しているので問題があれば指摘してください。

1,準備

HTMLのbody部分は共通になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <header>
    <h1>Site ID</h1>
    <nav>
      <ul>
        <li><a href="#">nav 01</a></li>
        <li><a href="#">nav 02</a></li>
        <li><a href="#">nav 03</a></li>
      </ul>
    </nav>
  </header>
 
  <section id="container">
    <header>
      <h1>Main title</h1>
      <p>Sub title</p>
    </header>
    <main class="editable">
      <h2 id="toc-title">title</h2>
      <p>this is dammy text.</p>
    </main>
  </section>
 
  <footer>
    <p>Copyright</p>
  </footer>
</body>

1.1,CSSの@import url();で読み込む

検証サンプル

以下のようなファイル構造にします。

  • css/
    • module/
      • header.css
      • container.css
      • footer.css
      • editable.css
      • button.css
    • common.css
    • style.css(import)
  • css_import.html

ポイントとなる読み込み部分:style.css

1
2
3
4
5
6
7
8
9
10
11
/* *****************************
 *
 * Import CSS file.
 *
 **************************** */
@import url('common.css');
@import url('module/header.css');
@import url('module/container.css');
@import url('module/footer.css');
@import url('module/editable.css');
@import url('module/button.css');

1.2,HTMLのlink要素で別々に読み込む

検証サンプル

こちらは上記の構造とほぼ同じですが、import用のstyle.cssを省きます。

  • css/
    • module/
      • header.css
      • container.css
      • footer.css
      • editable.css
      • button.css
    • common.css
  • css_import.html

ポイントとなる読み込み部分:css_link.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Link Tag Sample</title>
<link rel='stylesheet' href='css/common.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/header.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/container.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/footer.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/editable.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/button.css' type='text/css' media='all' />
</head>

1.3,Sassで@importして1つにまとめてlink要素で読み込む

検証サンプル

Sassを使いコンパイル後のまとめられたCSSのみをlink要素でHTMLに読み込みます。
モジュール化されたSCSSファイルはパーシャルという「_」を付けた読み込み専用ファイルにしてstyle.scssに読み込ませます。

  • scss/
    • module/
      • _header.scss
      • _container.scss
      • _footer.scss
      • _editable.scss
      • _button.scss
    • _common.scss
    • style.scss
  • output/
    • style.css
  • css_import.html

ポイントとなる読み込み部分:style.scss

1
2
3
4
5
6
7
8
9
10
11
/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "common";
@import "module/header";
@import "module/container";
@import "module/footer";
@import "module/editable";
@import "module/button";
1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SCSS @import Sample</title>
<link rel='stylesheet' href='output/style.css' type='text/css' media='all' />
</head>

2,読み込んだ結果を比較検証

結果は以下の比較表を見て貰えるとわかりますが、link要素で連続的に読み込むよりも@importが遅いことがわかります。
また、Sassでコンパイルしたものがリクエストも少なくロードしたサイズまで1/3程度になっています。

比較表

対象ブラウザ 読み込み方法 リクエスト数 サイズ 読み込み時間
Chrome CSS @import 8 1.75KB 607ms
link 7 1.53KB 437ms
Sass compile 2 448B 388ms
Internet Explorer CSS @import 8 1.23KB 924ms
link 7 1.07KB 390ms
Sass compile 2 315B 374ms

Chromeで検証したタイムライン

CSS @import

インポート用のstyle.cssを読み込んでから@import対象のファイルのリクエストを出しているのでその分読み込み完了時間が遅くなっています。
また、若干ですが@importしているファイルの読み込み時間に差があり、パラレルロードが行えていないように見受けられます。@import対象のファイルサイズが重くなるとロードの順序が顕著に表れてくるかもしれません。

Chrome CSS @import

CSS link要素

スムーズに読み込まれていますが、リクエスト数が多いため待機時間とリクエストヘッダの分ファイルサイズが大きくなっています。

Chrome CSS link要素

Sass compile

リクエスト数も少なくファイルサイズも小さいためとても理想的です。

Chrome Sass Compile

Internet Explorerで検証したタイムライン

CSS @import

Chromeと違い@import部分でも読み込みに大きな差がでています。
何が原因なのかはこれだけではわかりませんね。

IE CSS @import

CSS link要素

Chromeとほぼ変わらず安定して読み込んでくれます。

IE CSS link要素

Sass compile

Chromeと変わらず最速です。

IE Sass Compile

CSSもモジュール化・コンポーネント化するメリットとまとめ

実はこの記事で言いたいことは@importの問題というよりはCSSをモジュール化・コンポーネント化するメリットにあります。

最近公開されたこちらの記事「画面ではなく部品から始めてみよう」でも言われているように固定の画面サイズに合わせたCSSをだらだらと記述するより、モジュール・コンポーネントを必要に応じて読み込む方が変化に強いのではないかと最近思い始めました。
Bootstrapは顕著な例でしょう。

モジュール化やコンポーネント化はiOSやAndroid、Adobe Flexや大規模なWebサイト開発ではすでに行われているかと思います。
個人的な主観ですが、小規模なWebサイトを作る際は、ページ単位でCSSを記述することが多く作っている時は良いけれども、運用中に変更する事があると手間が多く作りにくいなと感じていました。(変更は可能だが不要なCSSの消し忘れや消して他のページにも影響したなど手間がかかる)

Sassが使えなかった時はモジュール化するには@importを使うしか方法がなく管理のしやすさとサイトの表示速度のどちらかしか実現できません(正確にはサーバー側で処理させるなど方法はある)。
これからは、Sassなどのメタ言語を利用しコンパイルを行うことで今回のサンプルのように管理のしやすさを維持しつつ、サイトの高速化も実現することができます。

今後はWeb Componentsも利用できるようになるとHTMLのコンポーネント化が可能になりよりモジュール化やコンポーネント化を意識した構築方法にく変化していくと思います。
考え方を今から少しずつ変えていきたいですね。

@importの問題についてはより詳しい検証を行っているこちらの記事も参考になります。
@importを使うべきでない理由

レスポンシブWebデザインの作り方(簡単設定方法)

レスポンシブWebデザインは、スマートフォンやタブレットに最適化されたホームページを簡単に実装できる技術です(CSSの知識が必要です)。

今やPCよりもスマートフォンでホームページを閲覧されるユーザーが多く、情報をしっかりユーザーに届けるにはスマホ対応が必要不可欠になってきました。

レスポンシブなスマホ対応は、WordPressやMovableTypeなどの”CMS”、CSSフレームワーク”Bootstrap”などのテンプレートを使わなくてもHTMLとCSSだけで実装できます。

スマホ対応必須!モバイルフレンドリーが始まったよ

2015年4月21日、世界で一斉にgoogle検索のアルゴリズムに「スマホ対応」が含まれました。スマホ対応にする事をモバイルフレンドリーと言います。

スマホ対応していないと検索結果順位が下がっちゃう?

モバイルフレンドリーが発表されて7週間の猶予がありましたが、皆さんは管理されているホームページのスマホ対応はお済ですか?

当記事で紹介するレスポンシブWebデザインは、CSSがわかれば簡単にできるので、参考にしていただければと思います。

プロとしてホームページ作成をしている我々も、androidやiPhone・iPadなどのスマートフォンやタブレットが普及してきて、スマートフォンやタブレット用にホームページを調整するお仕事が増えてきました。今は他のWebデザイナーさん方もスマホ対応のお仕事で忙しくしていると思います

一昔前は、m/だのi/だの携帯サイトを分散して作ってきてきましたが、別途携帯サイトやスマートフォン用に作られたHTMLを作る必要もなく、HTMLひとつとでスマホ用・タブレット用のCSSを用意すれば、端末のディスプレイサイトに合ったホームページを作る事ができるので、クライアントにとってレスポンシブWebデザインはコスト面でも優しい技術だと思います。

jQueryも使いませんし、CSS3のメディアクエリを利用するからといって、ホームページをHTML5で作らなきゃならないってことも無いですw

当記事では簡単に短く、ホームページをレスポンシブWebデザインにする方法を綴ります。

レスポンシブWebデザイン設定の記述方法

PC用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現できるという事で、まずはソースを記載します。
HTMLのmetaに以下を記載。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル(style.css) -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル(tablet.css) -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル(smart.css) -->

端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、Viewportを挿入します。

次に3つ(任意)のCSSを用意します(数値は任意です。色々試してみて下さい)
■ PC:横幅769px以上
■ タブレット(android):横幅768px
■ スマートフォン(android):横幅640px
PCとタブレットの横幅は1024以上でも769以上でも良いでしょう。

/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
〜以下、画面の横幅が768pxまでの場合のスタイル記入〜
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
〜以下、画面の横幅が768pxまでの場合のスタイル記入〜
}
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}
〜以下、画面の横幅が640pxまでの場合のスタイル記入〜
}

また、@importで各CSSを読み込む方法もあります。

@import url(style.css) screen and (min-width: 769px);
@import url(tablet.css) screen and (max-width: 768px);
@import url(smart.css) screen and (max-width: 640px);

画像の伸縮設定

そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
上記にも記載しておりますが、スマートフォン用・タブレット用のCSSに下記のように画像を伸縮するように指定をします。

img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

以上になります。

これでレスポンシブWebデザインが換装可能になりますので、細かく各CSSを調整していただければと思います。スマートフォンだけでもタブレットだけでも画像指定でそれぞれ独自のデザインにする事も可能です!
WordPressのプラグインを使わなくてもテーマに直接書き込めますし、MovabletypeやTYPO3などのCMSでも構築可能ですのでお試しあれ。

Internet Explorer(IE)対応について

レスポンシブWebデザインをIEに対応させる為の2つの方法を記載します。
⇒ Respond.jsを挿入する
★src⇒respond.js
⇒ Googleコードで公開されているcss3-mediaqueries.jsを挿入する
★2016.05.13現在、Googleはダウンロードを休止

上記2つのいずれかをHTMLに挿入すればOKです。

しかし、スマートフォンやタブレットのブラウザには、インターネットエクスプローラーはありません。
あるとしてもほぼ使われてないと思って良いです。ですからクライアントからIEにも対応して欲しいと言われたらその旨を伝えてみてはと思います。IEでのレスポンシブWebデザインの確認はほぼ無意味でしょう(笑)
エゴを主張されてきたら追加料金で対応しましょう!

SEOにも効果的なレスポンシブWebデザイン

googleが公式ブログでレスポンシブWebデザインでのホームページ作成を推奨すると発表しておりました。
⇒ Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

レスポンシブWebデザインの表示確認

レスポンシブWEBデザインで作成したホームページを端末を分けて一括表示で確認できるサービスたち。
⇒ The Responsinator
⇒ Codebomber // Resizer
⇒ Responsive Design Testing

レスポンシブWebデザインを仕事で導入するとなると

レスポンシブWebデザインは、一つのHTMLで換装可能ですから、クライアントに提案をすると安くでスマートフォンサイトが作成できると思われますが、うかつに口頭で費用はこのくらいと少額で言ってしまうと後から痛い目に合うことでしょう…。

やはり計画性が大事!

デザイン次第でCSSを0から書き下ろす事にもなるので、手間暇のかかるレスポンシブWebデザイン、出来上がりのイメージをしっかり持ち、見積りをしましょう。

これからはWindows8も普及してきてそうだし、タッチUI前提のWebデザインに移行しても良いですね。

何故、レスポンシブWebデザインを採用するのか?
それはやはり、HTMLが一つで済み、制作・管理・更新の効率が良いからでしょう。

.htaccessでの振分け方法もある

レスポンシブWebデザインは、一つのHTMLでPC用のCSS・スマートフォン用のCSS・タブレット用のCSSを切り替える訳ですが、.htaccessでの切り替え方法もあります。
⇒ .htaccessでスマートフォンサイトをアンドロイドやiPhoneで判別表示

<<back|<234567
pagetop