Lopan.jp

Webサイトの作り方のまとめ!トップページ完成まで。

about Web design 3

サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3(+α)回めです。
トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。
「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。

以下目次。

その前に、ちょっと修正

前回の「Webサイトの作り方のまとめ!コーディングまで。」という記事を書いた後も粛々とコーディングを進めてたんですが、コーディングを進めるにつれてぽろぽろとミスや新たな発見があったりしたので、ところどころ修正しました…X(。ので、まずはそのおさらい(しりぬぐい)から!
前回制作したページはこちらです。

一番上のナビゲーション(グローバルナビ)のところ

下記の2点、修正します。

  1. アイコンやテキストの部分をクリックすればちゃんとリンクするのに、その周りはクリックしても何も起きません…。できればボタン全体をクリックできるようにしたいです。

  2. CSSスプライトについてあれこれ。という記事で画像置換は「アイコン」とか「マーク」だけ!とか書いておいて、Lopan cafeではぜんぜん実践できてなかったのでX(、ちゃんと実践します。

画像の修正

まずはCSSスプライトの件を実践するため、画像から作り直します(下図参照)
この際なので、他のアイコンとかもひっくるめて一枚画像にしちゃいます。その方がスプライト冥利に尽きるというものです:)。

アイコンとテキストを分けてスライスです

HTMLの修正

テキストを<img>に換えて、その手前にアイコン表示用に<i>を置きます。(補足:なんで<i>なの?)

(※ここでははしょってますが、サイドの「お問い合わせ」のところも然りです。)

グローバルナビの修正(index.html)

<!-- 修正前 -->
<nav>
  <ul>
    <li class="info"><a href="/info/">Lopan's info</a></li>
    <li class="pan"><a href="/pan/">Lopanのパン</a></li>
    <li class="cafe"><a href="/cafe/">Cafeメニュー</a></li>
    <li class="about"><a href="/about/">店舗について</a></li>
    <li class="blog"><a href="/blog/">パンカフェBlog</a></li>
  </ul>
</nav><!-- 修正後 -->
<nav>
  <ul>
    <li class="info"><a href="/info/"><i></i><img src="img/nav_info.gif" alt="Lopan's info" width="100" height="14"></a></li>
    <li class="pan"><a href="/pan/"><i></i><img src="img/nav_pan.gif" alt="Lopanのパン" width="100" height="14"></a></li>
    <li class="cafe"><a href="/cafe/"><i></i><img src="img/nav_cafe.gif" alt="Cafeメニュー" width="100" height="14"></a></li>
    <li class="about"><a href="/about/"><i></i><img src="img/nav_about.gif" alt="店舗について" width="100" height="14"></a></li>
    <li class="blog"><a href="/blog/"><i></i><img src="img/nav_blog.gif" alt="パンカフェBlog" width="100" height="14"></a></li>
  </ul>
</nav>

CSSの修正

  1. <li>要素に指定していたpadding<a>要素に指定し直すことで、ボタン全体をリンクエリアにすることができます。「paddingは庭(敷地内)=領域内」と考えると分かりやすいですね:)。こちらの記事参照です。

  2. そして、CSSスプライトの件。<a>要素に指定していた画像置換は削除して、代わりに<i>に画像置換でアイコンを表示させます。(下図参照)

こうだったのを→こうします

(※ここでははしょってますが、サイドの「お問い合わせ」のところも然りです。)

グローバルナビの修正(style.css)

/* 修正前 */
nav ul li {
  float: left;
  padding: 43px 19px 27px 20px;
  border-right: 1px #eee solid;
  background: #eee url(../img/bg_nav.gif) 0 0;
  cursor: pointer;
}
nav ul li:hover {
  background-color: #ffd959;
}
nav ul li a {
  display: block;
  width: 100px;
  height: 54px;
  background: url(../img/nav.gif) 0 0;
  text-indent: -999em;
}
	⇓
/* 修正後 */
nav ul li {
  float: left;
  border-right: 1px #eee solid;
  background: #eee url(../img/bg_nav.gif) 0 0;
}
nav ul li:hover {
  background-color: #ffd959;
}
nav ul li a {
  display: block;
  position: relative;
  height: 14px;
  padding: 83px 19px 27px 20px;
  text-align: center;
}
nav ul li i {
  display: block;
  position: absolute;
  top: 43px;
  left: 55px;
  width: 30px;
  height: 30px;
  background: url(../img/ico.gif) 0 0;
}
nav ul li img { display: block; }

目次に戻る

Lopan's infoと新作パン/おすすめパンのところ

「Lopan's infoのとこ(dl.articleList)」と、「新作パン/おすすめパンのとこ(dl.menuList)」の「<dl>の組み方」を変更しました。

Lopan's infoのとこ(dl.articleList)

<dd>を、画像用<dd class="img">タイトル用<dd class="ttl">本文用<dd>に分けてたんですが、この3つは同じ内容なので、<dd>で個々に括るのは違うような気がします。
ここは、<dd>をひとつにして、その中に<img><strong><span>で分けました。

あと、日付ごとに<dl>が何個も並ぶため、リスト(一覧)とは言えない感じになっちゃってます。
ちょっとソースが盛り盛りになっちゃいますが、<dl>をさらに<ol>で括って、class="articleList"<dl>から<ol>に移しました。(下図参照)

こうだったのを→こうします

新作パン/おすすめパンのところ(dl.menuList)

こちらも上記に合わせて、<dl>を商品ごとに分けて、<ul>で括るように変更しました。

上記を反映したソースは下記の通り:)。

<dl>の組み方の変更(index.html)

Lopan's infoのところ
<!-- 修正前 -->
<dl class="articleList">
  <dt><i class="info">お知らせ</i><time>2011.7.20 Fri</time></dt>
  <dd class="img"><img src="img/img_dummy_s.jpg" alt="夏季休業日のご案内" width="80" height="80" /></dd>
  <dd class="ttl"><a href="#">夏季休業日のご案内</a></dd>
  <dd>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</dd>
</dl>
<dl class="articleList">
  <dt><i class="pan">パン教室</i><time>2011.7.20 Fri</time></dt>
  <dd class="img"><img src="img/img_dummy_s.jpg" alt="第3回 パン教室のご案内 「ブレッツェル」" width="80" height="80" /></dd>
  <dd class="ttl"><a href="#">第3回 パン教室のご案内 「ブレッツェル」</a></dd>
  <dd>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</dd>
</dl>
	⇓
<!-- 修正後 -->
<ol class="articleList">
  <li><dl>
    <dt><i class="info">お知らせ</i><time>2011.7.20 Fri</time></dt>
    <dd><img src="img/img_dummy_s.jpg" alt="夏季休業日のご案内" width="80" height="80">
    <strong><a href="#">夏季休業日のご案内</a></strong>
    <span>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</span></dd>
  </dl></li>
  <li><dl>
    <dt><i class="pan">パン教室</i><time>2011.7.20 Fri</time></dt>
    <dd><img src="img/img_dummy_s.jpg" alt="第3回 パン教室のご案内「プレッツェル」" width="80" height="80">
    <strong><a href="#">第3回 パン教室のご案内「プレッツェル」</a></strong>
    <span>これはカンプ・ダミー用の文章です。書体、級数のサンプルとしてご覧ください。文章の内容はダミーとさせて...</span></dd>
  </dl></li>
</ol>

おすすめパンのところ(新作パンのところも然り)
<!-- 修正前 -->
<dl class="menuList">
  <dt>サクサクラスク</dt>
  <dd><img src="img/img_dummy_m.jpg" alt="サクサクラスク" width="180" height="130">
    <ul>
      <li><i class="yen">¥</i>180</li>
      <li><i class="set">袋詰め</i>6個入</li>
    </ul></dd>
  <dt>フレンチトースト</dt>
  <dd><img src="img/img_dummy_m.jpg" alt="フレンチトースト" width="180" height="130">
    <ul>
      <li><i class="yen">¥</i>240</li>
    </ul></dd>
</dl>
	⇓
<!-- 修正後 -->
<ul class="menuList">
  <li><dl>
    <dt>サクサクラスク</dt>
    <dd><img src="img/img_dummy_m.jpg" alt="サクサクラスク" width="180" height="130">
      <ul>
        <li><i class="yen">¥</i>180</li>
        <li><i class="set">袋詰め</i>6個入</li>
      </ul></dd>
  </dl></li>
  <li><dl>
    <dt>フレンチトースト</dt>
    <dd><img src="img/img_dummy_m.jpg" alt="フレンチトースト" width="180" height="130">
      <ul>
        <li><i class="yen">¥</i>240</li>
      </ul></dd>
  </dl></li>
</ul>

<dl>の組み方の変更(style.css)

/* :::::: article list ::::::
 * 日付+サムネイル+タイトル+概要文のフォーマット。
 */
dl.articleList だったところは全部ol.articleList dl に変更。

--
/* 修正前 */
dl.articleList dd.img {
  /* 中略 */
}
dl.articleList dd.ttl {
  height: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-bottom: 3px;
}
dl.articleList dd.ttl a {
  padding-left: 18px;
  font-size: 14px;
  background: url(../img/ico_arrow_link.gif) left center no-repeat;
}
	⇓
/* 修正後 */
ul.articleList dl dd img {
  /* 中略 */
}
ul.articleList dl dd strong {
  height: 1.6em;
  font-size: 14px;
  font-weight: normal;
}
ul.articleList dl dd a {
  display: block;
  margin-bottom: 3px;
  padding-left: 18px;
  background: url(../img/ico_arrow_link.gif) left center no-repeat;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

/* :::::: menu list ::::::
 * パン名+パン画像+パン情報(値段とか)のフォーマット。
 */
dl.menuList だったところを全部ul.menuList dl に変更。

「画面を縮めると変」だったところ

最後に、前回の記事で最後に見つけたでっかい不具合ですが、わざわざ別の構想を考えなくても、<div id="wrapper">min-width: 940pxと指定するだけで、回避できたんでした。
こうなるとbox-shadowのままでも大丈夫だった訳ですが、ここはもうこのままいく事にしますX(。

修正箇所は以下の通り。

min-widthを使う(style.css)

/* :::::: common :::::: */
#wrapper {
  min-width: 940px;
}

/* :::::: header :::::: */
header,
header .inner {
	height: 129px;
	background: url(../img/bg_header.gif) repeat-x;
}
	⇓
header {
	height: 129px;
	background: url(../img/bg_header.gif) repeat-x;
}

/* :::::: footer :::::: */
footer,
footer .inner {
	background: url(../img/bg_nuno.png) center top repeat-x;
}
	⇓
footer {
	background: url(../img/bg_nuno.png) center top repeat-x;
}

/* :::::: contents :::::: */
body#index #contents,
body#index #contents .inner {
	background: url(../img/bg_nuno.png) center -5px repeat-x;
}
	⇓
body#index #contents {
	background: url(../img/bg_nuno.png) center -5px repeat-x;
}

以上、3箇所を修正したページはこちらになります。

目次に戻る

ちょっと脇道:サーバーの話

前回、記事の最後に書いた、「一応、「Lopan cafe」のサイトはここにあります。」の「ここ」や、上記の「修正したページはこちらになります。」の「こちら」をクリックすると、Lopan cafeのトップページが表示されると思います。
制作した「index.html」を「http://cafe.lopan.jp/index.html」といったURLで見ることができるのは、「index.html」がWebサーバーにアップロードしてあるからなんです。
※「サーバー」、「サーバ」、「サバ」、「鯖」など、表記の仕方に揺れがありますが、Lopan.jpでは「サーバー」で統一します。

Webサーバーとは

Webサーバーとは、WWWを通じて受けた要求HTTPリクエスト)に応じて、HTML文書をはじめとする情報を提供するシステムのことである。

Webサーバーは通信プロトコルの一種であるHTTPを用いて情報のやり取りをしている。クライアントであるWebブラウザからリクエストを受けると、リクエストに応じたHTML文書や画像などの情報を送信する。Webサーバーは、Webサイトの構築における必須要素の一つである。

単にWebサーバーと言った場合、Webサーバーの機能を実現するためのソフトウェアサーバーソフトウェア)を指す場合もあるが、サーバーソフトウェアインストールされてWebサーバーとして稼動しているハードウェア(サーバーコンピュータ)を指す場合もある。 - IT用語辞典バイナリ

なんだかむつかしい言葉がちりばめられてますが、要するに「みんなが覗けるコンピューター」という事です:)(ほんとに要するに)。もうちょっと丁寧に言うと「インターネットを通じていつでも誰でもアクセスできるコンピューター」という事です。
とはいえ、自分のコンピューターを、いつでも誰でもアクセスできるようにするには、専用のソフトをインストールしたり、固定のIPアドレスが必要だったり、ずっと起動してないといけなかったり、セキュリティを気にしなきゃいけなかったり…、いろいろ大変な手続きが必要なんです…X(。
なので、Webサイトを作るときには、一般的にはレンタルサーバーを利用する事になります。
レンタルサーバー(サーバーを賃貸してる会社)には、例えば以下のようなところがあります。※「レンタルサーバー」でGoogle検索して出てきた順(2012年11月9日現在)。

レンタルサーバーの一例(2012年11月現在)

レンタルサーバーの借り方については、それぞれのサイトのお申し込みページを参照のこと。

サーバーにファイルをアップロードする

「index.html」などのファイルをWebサーバーへアップロードするには、FTPを使います。

File Transfer Protocol(ファイル・トランスファー・プロトコル、FTP、ファイル転送プロトコル)はネットワークファイルの転送を行うための通信プロトコルである。 - Wikipedia

FTPを使ってファイルをアップロードするにはFTPクライアントFTPを使用してファイルの送受信を行うクライアントソフトウェアを使用します。フリーの(無料で使える)ソフトがたくさんあるので、気軽に使えますね:)。

FTPクライアントの一例(2012年11月現在)

  • FileZilla(Windows XP/Vista/7, Mac OS X 10.5/10.6, Linux)
  • Cyberduck(Windows XP/Vista/7, Mac OS X 10.5/10.6)
  • FFFTP(Windows 2000/XP/Vista/7(32bit))
  • NextFTP4(Windows 95/98/Me/NT/2000/XP/Vista/7(32/64bit))

その他にもたっくさん、こちらの一覧が参考になるかと。

ここではFetchを使った例

使い方は大体どれも同じだと思いますが、右図のように、アップロードしたいファイルを、(Webサーバーに接続した)FTPソフト上に、ドラッグ&ドロップするだけです。

僕はというと、右図の「Fetch」というソフトを使ってます:)。

目次に戻る

トップページにツイートを表示する。

Lopan cafe on Twitter

上図のように、依頼主(lopan店長)がつぶやいたツイートをトップページに表示させたいです。
Twitterが提供してくれているTwitter ウィジェットを利用することにします。

Twitter ウィジェット

Twitter / ウィジェット→Embedded Timelines

デザインの段階では、下記のTwitter ウィジェットを使うつもりだったんですが、作ってる最中になくなっちゃいました…。

Twitter / ウィジェット(http://twitter.com/about/resources/widgets)

2012年9月以降、サイトにツイートを表示させるためのウィジェットはすべて、ユーザー設定の「ウィジェット」という項目で管理する仕様になったみたいです。
そして新たに用意されたのが、「Embedded Timelines(埋め込みタイムライン)」というウィジェット(下記記事参照)

Embedded Timelines(埋め込みタイムライン)

Twitter API 1.1リリース 開発者の対応リミットは2013年3月5日に(2012.9.6)
Search API+APIバージョン1.0ベースのウィジェットは2013年3月5日にサポートが終了するので、それまでに「Embedded Timelines」に置き換える必要がある。

今までのウィジェットは2013年3月に使えなくなっちゃう(かもしれない)…。なのでここはひとつ気持ちを入れ替えて、新しいウィジェットに差し替えることにします。
新しいウィジェットEmbedded Timelines(埋め込みタイムライン)の設置方法は以下の通りです(2012年11月現在)

  1. Twitterのホームから、設定ウィジェット→「新規作成」と進んで、ウィジェットの設定ページへ。

    ウィジェットを新規作成します
  2. タイムラインお気に入りリスト検索の4つのタイプからひとつを選択。詳しくは後述します。
    もろもろ設定したら「ウィジェットを作成」ボタンをクリック。

    ここでは「タイムライン」を選択、高さは200pxに設定
  3. 生成されたコードを、「index.html」内の、ウィジェットを置きたい場所にコピペすれば設置完了。
    ※高さは350pxより小さくできないみたいですね:(。

    1ソースコピペするだけ

    <div class="twtr-widget">Twitter ウィジェットの時の名残です。

「index.html」をサーバーにアップロードして表示確認(下図左)。ちゃんと設置できてますね:)。
フォローするボタンが被ってますがまぁ、良しとしましょう。良しとします。

Twitterのウィジェットページにも、作成したウィジェットが追加されています(下図右)。作成したウィジェットは、ここから、設定を再編集したり、削除したりすることができます。ここで編集した内容は、数分後に、サイトに設置したEmbedded Timelinesに反映されます(コードのコピペし直す必要はないです)

Embedded Timelinesが設置されてる様子

高さが350pxになっちゃった所為でとなりの「Lopan's info」と段差ができちゃったので、「Lopan's info」の高さもそれに合わせて修正。そのままだと、Embedded Timelinesの下に妙なスペースができちゃってたので、Embedded Timelinesの<iframe>display: block;を指定(下図参照)。で、設置完了です:)。

段差を修正

あと、下の「+フォローする」ボタンのhrefにも、Embedded Timelinesの「@Lopancafeさんをフォロー」ボタンのリンクと同じものを入れてみました(※一応title="View your profile on Twitter"も)

該当コードは以下の通り。

<!-- 設置前 -->
<section id="twitter">
  <h2><img src="img/ttl_twitter.gif" alt="Lopan cafe on Twitter" width="139" height="29"></h2>
  
  <p class="btn"><a href="#">フォローする</a></p>
</section>
	⇓
<!-- 設置後 -->
<section id="twitter">
  <h2><img src="img/ttl_twitter.gif" alt="Lopan cafe on Twitter" width="139" height="29" /></h2>
  <div class="twtr-widget">
    <a class="twitter-timeline"  href="https://twitter.com/Lopancafe" data-widget-id="269420283910307840">@Lopancafe からのツイート</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </div>
  <p class="btn"><a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fcafe.lopan.jp%2Findex10-2.html®ion=follow_link&screen_name=Lopancafe&source=followbutton&variant=2.0" title="View your profile on Twitter">フォローする</a></p>
</section>

「style.css」はこんだけ。

/* :::::: twitter widget :::::: */
#main #twitter iframe {
  display: block;
}

目次に戻る

トップページにLike Boxを設置する

Lopan cafe on Facebook

Like Boxは、Facebookが提供してくれているソーシャルプラグインのひとつで、任意のFacebookページの情報を、別のWebサイトやブログに表示する事ができます。
これを使えば、上図のように、Facebookページを「いいね!」してくれた人たちのアイコンを表示して、賑々させることができます。

Facebookページを作る

まずはFacebookページの作成手順から。
Facebookページとは、企業や著名人、アーティストやブランド、同好会などが、ユーザーとの交流のために作成・公開したページのこと。
ここでは、依頼主(lopan店長)のアカウントから、「Lopan cafe」という名前のFacebookページを作ります。

  1. Facebookのページの一番下にある「ページを作成」というテキストリンクをクリック。

    Facebookページを新規作成します
  2. ジャンルを選んで、基本情報(カテゴリ・店名・住所・電話番号)を入力。
    Lopan cafeの場合は、ジャンルは「地域ビジネスまたは場所」、カテゴリは「ショッピング/小売業」にしました。
    ※「レストラン/カフェ」と迷いましたが、レストランは大それてるし、イートインカフェなので、「ショッピング/小売業」だろうと。
    あとの設定は、Facebookページ完成後に編集できるので、ここではスキップしても大丈夫。

    諸設定は今のところとりあえずスキップ
  3. 基本データを編集したり、プロフィール写真とか、カバー写真を追加して、オリジナリティアップ。

    パン屋さんアピール

以上でFacebookページは一旦完成です。
もっと詳しいFacebookページの作り方は、下記のFacebook公認ナビゲーションサイトを参照のこと。

Like Boxを設置する

Like Boxは、Facebookの開発者ページで作成する事ができます。
下記ページで、カンタンな設定を行うだけで、Like Boxを表示するためのコードをゲットできます。

Like Box - Facebook開発者

Facebook開発者ページのLike Boxを作れるページ

  1. 上記ページで、FacebookページのURLと、Like Boxのサイズを指定します。
    高さと幅は、実際に設置するサイズより2px大きく指定しときます(理由は後述
    設定が決まったら「Get Code」をクリック。

    ここではStreamとHeaderのチェックは外しました
  2. 生成されたプラグインコードを、「index.html」内の該当箇所にコピペ。

    コピペは2箇所

枠線が隠し切れてない

「index.html」をサーバーにアップロードして表示確認してみると、こんな感じ(Like Boxの上辺と左辺にだけ枠線がある状態)で表示されます(右図)

実は前回のコーディング時に、しれっと下記のような指定をしていました。

#facebook .frame {
  overflow: hidden;
  width: 680px;
  height: 180px;
  margin: 0 5px;
}

枠線を隠す仕組み

サイズを横幅680px、高さ180pxに固定して、そこからハミ出した部分は非表示にする、という指定です。
Like Boxには枠線がつきものなんですが、今回は枠線を表示させたくなかったので、Like Boxのサイズを、実際の表示サイズよりも縦横2pxずつ大きく作っておいて、枠線の部分だけハミ出させて非表示にする、という思惑です(右図参照)

下記のようにLike Box自体<div class="fb-like-box fb_iframe_widget">に、マイナスマージンを指定して左上へズラせば、上辺と左辺の枠線も隠れます:)。

#facebook .frame .fb-like-box {
  margin: -1px 0 0 -1px;
}

枠線が綺麗に隠れました

改めて「index.html」をサーバーにアップロードして表示確認します。
枠線が消えましたね(右図)

該当コードは以下の通り。

bodyのすぐ下あたりに追加するもの
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Like Boxを設置したい場所に追加するもの
<!-- 設置前 -->
<section id="facebook">
  <h2><img src="img/ttl_facebook.gif" alt="Lopan cafe on Facebook" width="157" height="29"></h2>
  <div class="frame">
  
  </div>
</section>
	⇓
<!-- 設置後 -->
<section id="facebook">
  <h2><img src="img/ttl_facebook.gif" alt="Lopan cafe on Facebook" width="157" height="29"></h2>
  <div class="frame">
    <div class="fb-like-box" data-href="http://www.facebook.com/Lopancafe" data-width="682" data-height="182" data-show-faces="true" data-stream="false" data-header="false"></div>
  </div>
</section>

「style.css」はこんだけ。

/* :::::: facebook like box :::::: */
section#facebook {
  clear: both;
}
#facebook .frame {
  overflow: hidden;
  width: 680px;
  height: 180px;
  margin: 0 5px;
}
#facebook .frame .fb-like-box {
  margin: -1px 0 0 -1px;
}

その他、Facebookのソーシャルプラグイン全般については、下記記事が詳しいです。

今さら人に聞けないfacebookの”Social Plugins”を全解説します。<前編> | ACTZERO - 株式会社アクトゼロ(2011.5.17)

目次に戻る

Webサイトに動きを加える。

ここで言う動きとは、ボタンを押すと画像がスライドしたり、フェードインしたりフェードアウトしたり、目で追えるスピードでアニメーションするような動きのこと。
Webサイトにこういった動きが加わる事で、サイトの内容をより分かりやすくしたり、より使いやすくする事ができるかもしれません。

CSS3での動き

CSSだけでも、動きを実装することができます。
ここでは、CSS3のtransitionプロパティを使って、「ボタンのフェード効果」、「わずかなスライド」といった、さり気ない動きを追加します。
と言っても追加する指定は下記だけ。

nav ul li,
ul.contact li,
#category ul li,
#gallery ul.nav li a,
.btn,
#totop p  {
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0;
}
#gallery p a  {
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0;
}

transitionで動きを加えたページはこちら
ロールオーバーすると「カチッ」と切り替わっていたものに、時間的変化(transition効果)を与えて徐々に切り替わるようにしただけなんですが、これだけでも随分印象が変わったと思います。変化するスピードが変わると、操作する感触も変わるんですね。transitionプロパティについて詳しくはこちらを参照のこと。

※上記コード中の-webkit-ベンダープレフィクス(接頭辞)といって、各ブラウザ固有の識別子です。詳しくはこちらを参照のこと。

Webの新しい技術や機能について「なにをどこまで使えるか」を調べるには下記サイトが便利です:)。

Can I use... Support tables for HTML5, CSS3, etc

JavaScript、jQuery

JavaScript

JavaScriptは、Webサイトに動き(振る舞い)を与える事ができるスクリプト言語。スクリプト言語とは、簡易的なプログラム言語ってことで、プログラミングの知識があまりない人でも、レシピに従えば簡単に使えてしまうような設計になってるらしいです。

jQuery

そんなJavaScriptでも、まだとっつきにくいなぁと感じている人のために開発されたのが、jQueryというライブラリ。

ライブラリとは、あるスクリプトのよく使われる機能などを部品化して、簡単に使えるようにまとめたもの。Javascript のライブラリである jQuery を使えば、複雑になりがちな Javascript のコードを書かかなくても、もっと簡単なコードで Javascript を実行することができるようになります! - Webデザインレシピ

jQueryを導入すれば、JavaScriptがより一層カンタンに書けちゃいます!
前回Initializrからダウンロードした一式の中にも「jquery-1.7.2.min.js」が入ってましたよね。
JavaScriptといったらjQueryで書くってのがデファクトスタンダードになってるんです(2012年11月現在)

HTML要素の指定の仕方がCSSそっくりなので、Webデザイナーさんなら、より直感的に書くことができます。

それに、jQueryはとっても人気なJavaScriptライブラリなので、リファレンスサイトや、解説してるサイト、様々なレシピがいたるサイトで紹介されてます。困ったら調べればなんだって解決できそうです。
さらに、プラグインソフトウェアに機能を追加する小さなプログラム)もたっくさんあるので、Webサイトによくある定番な機能なら大抵プラグインを探せばなんとかなる事がしばしばです。Lopan cafeでもGoogle検索大活用でした。

目次に戻る

JavaScriptを実装する。

Lopan cafeのサイトには、JavaScriptを実装する事を前提にデザインしたところがいくつかあります。
トップページでは以下の3箇所。

JavaScripJavaScriptしたいところ

  • グローバルナビの下の大きめの画像のところ
    ここは、左右の赤い矢印もしくは、下の3つの白丸をクリックした時に、中の画像がするーっとスライドしてローテーションするようにしたいです。
  • Lopan's infoのところ
    ここは、ブラウザの標準のスクロールバーじゃなくて、iPhoneとかスマホみたいなシンプルでスタイリッシュなスクロールバーにしたいです。
    あと、概要文が長い場合には、3行めまでで切って、文の末尾に「…」を付けたいです。
  • 一番下の「ページトップへ」ボタン
    これをクリックすると、ページの一番上までするする〜っと滑らかにスクロールするようにしたいです。

では、早速実装して行きましょう。もちろんjQueryで!

一番下の「ページトップへ」ボタン

まずは簡単そうなのから。
これは「スムーススクロール」とか「するするスクロール」とか言われてるヤツですね。最近はどのサイトにもある定番な機能なので、いろんなサイトでスニペットが紹介されてます。ので、ちょちょっとググッてコピペすればよいかと!

最初に見つけた記事はこちら。

今さら感たっぷりだけどスムーススクロールプラグイン作った「jQuery Smooth Scroll JS」(2012.11.2)

こちらのプラグインは今まで見てきた中でおそらくいちばん理想的なするする!決定版なんじゃないかと!
スクロール中に、クリックしたりマウスホイールを転がしたりするとスクロールがキャンセルされるトコロとか、スクロール開始時、スクロール中、キャンセル時、完了時に関数を実行できるトコロが素敵です。上記サイトではそれを使ってミニゲームとかも用意されてたりしてたのしいですね:D。

しかし今回は「ページの一番上へ戻りさえすればいい」ので、こちらのプラグインはちょっと贅沢すぎるかも…。できれば既存の「script.js」にさらっと書けてさらっと実装できるものがいいな。ということで、下記記事のタイトルが、なんかピッタリな気がしました。

【そろそろjQueryのスムーズスクロールを自作したいと思わないか】とっかかりを理解すれば楽しくなるはずのjQuery | 今村だけがよくわかるブログ(2012.7.19)

やっていることは、スクロールさせているだけです。と、ご希望通りの機能です:)。
それでは早速コードをコピペさせていただきます!(もとはこちらの記事で紹介されていたものみたいです。)

$(function() {
  $('#totop p').click(function() {
    $('body, html').animate({ scrollTop: 0 }, 1000);
  });
});

コピペとはいえ、Lopan cafeの仕様に合わせて、$('#totop p')に変えたり、return falseは削除したりしてます。

他にも調べていたら、こんな記事も見つけました。

ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 | モンキーレンチ(2012.2.14)

詳しくは、上記記事の「裏話とか…」の項を参照のこと。

曰く、現状(2012年11月現在)Webkit系では$(‘body’)でしか動かず、Webkit系以外では$(‘html’)でしか動かないため、$('body, html')という記述で対処することが多いけど、これだとコールバックがダブるとか、operaで表示がちらつくとか、いろいろ懸念なのだそう。
なので、scrollTopの値を取得(設定)する対象が「$('body')のもの」には$('body')を指定し、「$('html')のもの」には$('html')を指定してやる必要があります。

var targetElement = $('html');
$('#totop p').click(function() {
  if ($('html').scrollTop() <= 0) {
    targetElement = $('body');
  }
  targetElement.animate({ scrollTop: 0 }, 1000);
});

とりあえず最初はtargetElement = $('html')としておいて、ボタンをクリックした時に、$('html').scrollTop()が「0」以下だったら、targetElement = $('body')にすり替える、という風にしてみました;D。

これにて「ページトップへ」ボタン実装完了です

目次に戻る

グローバルナビの下の大きめの画像のところ

これは「スライドショー」とか「スライドギャラリー」とか言われることが多いですね。あと「カルーセル(メリーゴーランド)」と言われることもあります。
これも結構いろんなサイトで見かけるものなので、チョっとググればドバッとヒットしますね。

下記にまとめがありました!どれもすっごいかっこいいのでどれにしようか迷っちゃいます。

【jQuery】かっこいいスライドショーまとめ(2012.11.9)

しかし、今回はすでに下記のようなhtmlを用意しているので、このhtmlに合わせて、さらっと書いてさらっと実装できるものを作ってみることにします。

<div id="gallery">
  <div class="slideFrame">
    <ul>
      <li><a href="#"><img src="img/gallery_dummy1.jpg" alt="gallery_dummy1" width="520" height="280"></a></li>
      <li><a href="#"><img src="img/gallery_dummy2.jpg" alt="gallery_dummy2" width="520" height="280"></a></li>
      <li><a href="#"><img src="img/gallery_dummy3.jpg" alt="gallery_dummy3" width="520" height="280"></a></li>
    </ul>
  </div>
  <ul class="nav">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
  <p class="prev"><a href="#"></a></p>
  <p class="next"><a href="#"></a></p>
<!-- /#gallery --></div>

CSSは以下。

#galleryの部分(style.css)

/* :::::: gallery ::::::
 * #gallery内の指定
 */
#gallery {
  position: relative;
  float: right;
  width: 700px;
  height: 300px;
  margin: 20px 0 40px;
  padding: 10px 0;
  background: url(../img/bg_gallery.jpg);
}
#gallery .slideFrame {
  position: relative;
  height: 280px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* slide images */
#gallery .slideFrame ul {
  position: absolute;
  top: 0;
  left: 90px;
  width: 1620px;
  margin: 0;
}
#gallery .slideFrame ul li {
  float: left;
  width: 520px;
  margin-right: 20px;
}
#gallery .slideFrame ul li:last-child {
  margin-right: 0;
}
#gallery .slideFrame ul li a {
  background: none;
}

/* slider items */
#gallery ul.nav li,
#gallery ul.nav li a,
#gallery p,
#gallery p a {
  background: url(../img/gallery_item.png);
}

/* gallery list button */
#gallery ul.nav {
  width: 62px;
  margin: 0 auto;
  padding: 0;
}
#gallery ul.nav li {
  float: left;
  margin-right: 16px;
  background-position: -260px 0;
}
#gallery ul.nav li:last-child {
  margin-right: 0;
}
#gallery ul.nav li a {
  display: block;
  width: 10px;
  height: 10px;
  background-position: -260px -20px;
}
#gallery ul.nav li a:hover { opacity: 0; }

/* slider arrow button */
#gallery p {
  position: absolute;
  top: 0;
  margin: 0;
  width: 110px;
  height: 320px;
  cursor: pointer;
}
#gallery p.prev {
  left: 0;
}
#gallery p.next {
  right: 0;
  background-position: -110px 0;
}
#gallery p a {
  display: block;
  width: 26px;
  height: 26px;
  margin: 140px 0 0 40px;
  background-position: -230px 0;
}
#gallery p:hover a {
  margin: 140px 0 0 32px;
}
#gallery p.next a {
  margin-left: 44px;
  background-position: -230px -30px;
}
#gallery p.next:hover a {
  margin-left: 52px;
}

HTMLとCSSとJavaScriptの役割分担について

グローバルナビの下の大きめの画像のところの構造

<div class="slideFrame">の中の<li>(画像群)を全て横並びにするために、<ul>の横幅を、(画像幅(520px)+右側のマージン(20px))×3枚1620pxに。
初期状態では一番左の画像を枠の真ん中に配置したいので、<ul>left: 90px;を指定してます。
<ul>position: absolute;を指定して、その親の要素<div class="slideFrame">position: relative;を指定する事で、<ul><div class="slideFrame">を基準とした絶対配置にすることができます。

では、画像がスライドして2番目の画像が表示された時にはどうなるか。
この時<ul>の位置は、画像幅(520px)右側のマージン(20px)余白(90px)分、左方向への移動なので、left: -450px;となります。

2番目の画像が表示された状態

では3番目は…ってこれをいちいち毎回計算するのはめんどくさいですよね。
JavaScript/jQueryは、そんなめんどくさい計算を一手に引き受けてくれます。

var slider = $('#gallery .slideFrame ul');
var img = $('#gallery .slideFrame li');
var imgW = img.width();
var imgM = parseInt(img.css('margin-right'));
var sliderWidth = (imgW + imgM) * img.length;
slider.css('width', sliderWidth);

上記のvarから始まるものは変数と言って、例えば、sliderという変数の中には$('#gallery .slideFrame ul')という代入してます。スライドさせる要素なので「slider」と名付けました。
変数を使うと、長ったらしい要素の指定も、短い名前で登録しとけます。それに、頻繁に参照する要素は変数にしとくことで、パフォーマンスの向上にも繋がるんだとか。使わない手はないです:)。
変数について詳しくはこちらを参照のこと。

width()css()は、jQueryのメソッド

  • width()を使うと、指定した要素の横幅を取得できます。括弧の中に数値を入れれば、指定した要素の横幅を設定することもできます。ここでは<li>の横幅を取得してます(3行め)
    詳しくはこちらを参照のこと。
  • css()を使うと、指定した要素のスタイルを取得することができます。括弧の中に取得したいCSSのプロパティを指定します。ここではmargin-rightの値を取得してます(4行め)
    ただ、取得した値は「20px」という文字列になってしまうので、perseInt()で括って、文字列→数値に変換しています。これを「型変換(キャスト)」と言うそうです。かっこいいですね、キャスト。
    また、括弧の中のプロパティの後に、「,(コンマ)」で区切って値を入れると、指定した要素のスタイルを変更することもできます。ここでは<ul>の横幅を(画像の横幅+マージン)×画像の数に設定しています(6行め)
    詳しくはこちらを参照のこと。

lengthはJavaScriptのプロパティで、指定した要素の数を取得できます。ここでは<li>の数を取得しています(5行め)
詳しくはこちらを参照のこと。

JavaScript/jQueryを使えば、HTML内にある要素の大きさや数や色などの情報を動的に取得して、その都度、設定し直すことができます。
基本的なところ(揺るぎないところや初期状態)はCSSでレイアウトして、上記みたいに値が変動するところは、JavaScriptで要素の値を取得して設定するのが便利です。

jQueryで使えるメソッドは他にもたっくさん、下記サイトに網羅されています:D。

目次に戻る

目次に戻る

Lopan's infoのところ

ここは「概要文の末尾に「…」を付ける」のと「スクロールバーをかっこよくする」という、2つの実装があります。

概要文の末尾に「…」を付ける

現状「index.html」に直接「…」を書いて、途中で文章が終わってるように見せかけてましたが、これを動的に表示させるようにしましょう、ということです。この実装については上記までのと違って、何をどうすればいいのか見当がつかないので…X(、ググってみます。

長い文字列を省略するjQueryプラグインを作った - ほげほげ(仮)(2012.3.3)

早速見つけた上記記事のプラグインが素敵に動作したので、これをそのまま使わせてもらおうと思います!

  1. 上記記事中の「GitHub」のリンク先から、「Download」タブをクリックし「Download as zip」したら、ダウンロードしたデータの中の「ellipsis.js」を「js/libs/」の中へ入れる。

  2. 「index.html」の</body>の上あたり(「jquery-1.7.2.min.js」を読み込んでる下)に下記を記述。

<script src="js/libs/ellipsis.js"></script>
  1. 「script.js」に、下記を記述。なんてカンタン!

$('.articleList dd span').ellipsis({ row: 3 });

これにて、概要文の末尾に「…」を付ける、実装完了です

目次に戻る

スクロールバーをかっこよくする

これについてはもう皆目さっぱりなので、プラグインを探します!
けっこうたくさん見つかりましたが、中でも下記のプラグインが一番(Lopan cafeに合ってて)いい感じでした。

[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll | コリス(2011.11.9)

  1. こちらから「Download」タブをクリックし「Download as zip」したら、ダウンロードしたデータの中の「jquery.nicescroll.min.js」を「js/libs/」の中へ入れる。

  2. 「index.html」の</body>の上あたり(「ellipsis.js」を読み込んでる下)に下記を記述。

<script src="js/libs/jquery.nicescroll.min.js"></script>
  1. 「script.js」に下記のように記述。

$('#info .frame').niceScroll();

これだけでも動くんですが、いろいろオプションがあるので、Lopan cafeに合わせてちょっと書き足します。

$('#info .frame').niceScroll({
  cursorcolor: '#ffd959',
  boxzoom: false,
  hwacceleration: false,
  preservenativescrolling: false,
  mousescrollstep: 10
});

設定できるオプションについて、概要を記載しておきます(よく分からなかったオプションについては文末に「(?)」を付けてます)

nicescrollのオプション概要 - READ MEより

. cursorcolor - カーソルの色を16進数で指定できます, デフォルトは "#000000"
. cursoropacitymin - 最薄時の透明度を1〜0の間で指定できます, デフォルトは 0(=非表示)
. cursoropacitymax - 最濃時の透明度を1〜0の間で指定できます, デフォルトは 1(=不透明)
. cursorwidth - カーソルの太さをpxで指定できます, デフォルトは 5(コーテーションで括れば「"5px"」と書くこともできる)
. cursorborder - カーソルの縁取り線CSSのborderで指定できます, デフォルトは "1px solid #fff"
. cursorborderradius - カーソルの角丸加減をpxで指定できます, デフォルトは "4px"(cursorwidth同様「4」と書くこともできる)
. zindex - スクロールバーのz-indexを指定できます, デフォルトは 9999(実際はこれに+2した値が指定されるみたい)
. scrollspeed - スクロールの速度を指定できます, デフォルトは 60
. mousescrollstep - マウスホイールでスクロールしたときの速度(ステップ距離)を指定できます, デフォルトは 40(px)(「"40px"」とは書けない)
. touchbehavior - タッチデバイス(iPhoneとかiPadとか)みたいにスクロールエリア全体をドラッグできるようにするかしないか, デフォルトは false(しない)
. hwacceleration - スクロールを加速するかしないか(サポートしている場合), デフォルトは true(する)
. boxzoom - スクロールエリアの内容を拡大表示できるようにするかしないか, デフォルトは false(しない)
. dblclickzoom - boxzoomがtrueの時に、ダブルクリックで拡大表示できるようにするかしないか, デフォルトは true(する)
. gesturezoom - boxzoomがtrueの時にタッチデバイスで、ピンチイン/アウトで拡大表示できるようにするかしないか, デフォルトは true(する)
. grabcursorenabled - touchbehaviorがtrueの時に、マウスカーソルをグラブアイコンにするかしないか, デフォルトは true(する)
. autohidemode - カーソルを自動で非表示にするかしないかどうするか, デフォルトは true / 「"cursor"」にするとカーソルだけ非表示に(背景はそのまま) / 「false」にすると非表示にならない
. background - スクロールバーの背景をCSSのbackgroundで指定できます, デフォルトは ""(指定なし)
. iframeautoresize - ロード時にiframeを自動リサイズするかしないか, デフォルトは true(する) (?)
. cursorminheight - カーソルの最小値(高さ)を指定できます, デフォルトは 20(px)(「"20px"」とは書けない)
. preservenativescrolling - ネイティブなスクロールエリアをマウスホイールでスクロールできるようにするかしないか, デフォルトは true(する) (?)
. railoffset - スクロールバーの位置を指定できるようにするかしないか, デフォルトは false(しない)
. bouncescroll - 携帯電話みたくコンテンツの末尾でバウンスするスクロールを可能にするかしないか, デフォルトは false(しない) (?)
. spacebarenabled - スペースキーを押した時にスクロールダウンするかしないか, デフォルトは true(する)
. railpadding - スクロールバーのパディングを指定できます, デフォルトは {top:0,right:0,left:0,bottom:0} (?)
. disableoutline - nicescrollを実装したdiv要素を選択した際のアウトラインを非表示にするかしないか(for chrome), デフォルトは true(する)

これにて、スクロールバーをかっこよくする、実装完了です

目次に戻る

店舗画像や商品画像差し替え

そうこうしてるうちに、先方(依頼主)から店舗画像や商品画像が届いたので、ダミー画像と差し替えました
あとはブラウザチェックしなきゃいけないんですが…、
ちょっと長くなってしまったので、続きは次回!(←ドットインストール風)

あとがき

とりあえず、モダンブラウザで見る分には、トップページ完成!です:D。
現在、下層ページも粛々と制作中です。時々書き足したり直したりして、日々進化していくつもりなので、たまに覗いてやってください。ひょっとすると表示が崩れてたり、変な動きをしてしまうことがあるかもしれませんが、そんな時はそっと教えてくれると嬉しいです。
次回は古いブラウザでの見え方と、古いブラウザとの付き合い方についてまとめれたらと思います。

前回同様、記事の内容はあくまで僕の個人的なやり方なので、たぶん世の中にはもっと賢く、効率的な制作手順や、テクニックがあるはずです←とくにJavaScriptのところ!
「こんな書き方もできるよ」とか「このプラグイン素敵だよ」とかありましたら、ぜひ教えてください!

以上、最後まで読んで頂きありがとうございました!参考になれば幸いです!

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

Comment & Pingback

7 Comments! for Webサイトの作り方のまとめ!トップページ完成まで。

  1. にゃんこ

    先のコメント、文章の途中が最後に移動しちゃって意味不明な文章になってるとこありますね。すみません。

    Reply

    • _watercolor

      はーい、大丈夫です!
      すごく伝わりました。嬉しいですよーXD!

      Reply

  2. にゃんこ

    はじめまして~。
    サイト制作手順で検索してこちらに辿り着きました、ひよっこwebデザイナーです。
    サイト制作手順も親切な説明で分かりやすかったのですが、_watercolorさんが描かれてるんですよね?
    私も水彩画が好きなので、webサイトも作れて、おまけにこんなきれいな絵まで描ける人がいるなんて、神様は不公平だーーーとか思っちゃいました。
    また新しい記事、楽しみにしています。
    それよりもなによりも・・・
    こんなきれいなデザインを男性(ですよね??)が作ってるなんてぇぇえええ
    ビックリ、ひっくり返りそうでした。^^;
    パン屋さんのサンプルサイトにある水彩画も

    Reply

    • _watercolor

      > にゃんこさん、初めまして!
      記事を読んでいただきありがとうございます。
      そしてコメントもとっても嬉しいですXD!
      すっごいベタ褒めいただいちゃって、照れ過ぎます…、ありがとうございますー!

      デザインに関してはキャラクターなんです。どうしてもこうなっちゃうというか。
      水彩のにじみと、暖かみのある感じが大好きなので、どちらも完全好みに任せてつくってますX)。

      Lopan cafeも引き続きおたのしみにぃ!

      Reply

  3. pino

    すごい技術で羨ましいです!
    この書き方で書籍化してほしいです!
    絶対買いますよ!
    いま勉強中ですが、大阪でどこかいいスクールないかなぁ・・

    Reply

    • _watercolor

      > pinoさん
      コメントありがとうございますー;)!
      ショ、ショセキカだなんて、すごい嬉しいですーXD!
      Lopan cafe粛々と制作中なので引き続きお楽しみにぃ!

      Reply

  4. Pingback: 2012年の人気記事と、今年ブックマークして心に残ってる記事総まとめ! *Ateitexe

コメントを残す

*がついている欄は必須項目です。