くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[CSS3]animationをつかった様々な動き

授業では、CSS3のアニメーションを3種類使ったページの制作。

①回転するバナー
②入れ替わり表示されるテキスト
③シャドウが変化して光っているように見えるボタン



①回転するバナー

1)2枚の同じサイズの画像をli要素で並べ、position等でピッタリ重ねる

ul#flip li {
  width: 500px;
  position: absolute;
  left: 50%;/*画像が中央にくる*/
  margin-left: -250px;
}

2)3Dアニメーションを有効にする

ul#flip li{
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

3)回転した画像の裏面が見えるかどうかの設定

ul#flip li{
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden;
}

4)li要素にアニメーションの動きの指定をする

i#front {
  animation: flipFront 5s infinite alternate;  /*flipFront・flipBackがキーフレーム*/
  -webkit-animation: flipFront 5s infinite alternate;
}
li#back {
  animation: flipBack 5s infinite alternate;
  -webkit-animation: flipBack 5s infinite alternate;
}

アニメーションプロパティのショートハンド
①keyframeにつけた名前②アニメーションの時間③ループの回数

alternateは、アニメーションの動きを反転させる為の指定。


alternateがない場合:
  0% → 50% → 100% → 0% → 50% → 100%
表    裏 (最初に戻る)表    裏 

alternateがある場合:
0% → 50% → 100% → 50% → 0% → 50%
表    裏 裏 表   裏


http://kuropanther.html.xdomain.jp/animation/


HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style.css"> 
</head>

<body>
<div id="bg">
<ul id="flip">
<li id="front"><img src="img/01.png" alt=""></li>
<li id="back"><img src="img/02.png" alt=""></li>
</ul>
</div><!--/#bg-->
<div id="news">
<ul class="anime-ticker">
<li>すっと肌に溶け込み、内側から輝く。</li>
<li>使うほどに、潤い肌。</li>
<li>ル・セラム  それはみずみずしく輝く肌へのパスポート</li>
</ul>
</div>
<p class="btn"><a href="#">ご購入はこちら</a></p>
</body>
</html>

CSS

@charset "UTF-8";

body, html, div, ul, li img, p {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
  vertical-align: bottom;
}
li {
  list-style: none;
}
body {
  background :#333;
}

#bg {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0; 
  bottom: 0;
  margin: auto;
}
ul#flip li {
/*2枚目の画像を1枚目にぴったり重ねる*/
  width: 500px;
  position: absolute;
  left: 50%;/*画像が中央にくる*/
  margin-left: -250px;
/*アニメーションで回転させる記述*/  
  transform-style: preserve-3d; /*3Dアニメーションを有効にする*/
  -webkit-transform-style: preserve-3d;
  
  backface-visibility: hidden;  /*回転した画像の裏面が見えるかどうかの設定*/
  -webkit-backface-visibility: hidden;
}
li#front {
  animation: flipFront 5s infinite alternate;  /*flipFront・flipBackがキーフレーム*/
  -webkit-animation: flipFront 5s infinite alternate;
}
li#back {
  animation: flipBack 5s infinite alternate;
  -webkit-animation: flipBack 5s infinite alternate;
}

@-webkit-keyframes flipFront{
 0% { transform: rotateY(0deg); }
 45% { transform: rotateY(0deg); }
 55% { transform: rotateY(180deg); }
 100% { transform: rotateY(180deg); }
}
@keyframes flipFront{
 0% { transform: rotateY(0deg); }
 45% { transform: rotateY(0deg); }
 55% { transform: rotateY(180deg); }
 100% { transform: rotateY(180deg); }
}

@-webkit-keyframes flipBack {
 0% { transform: rotateY(180deg); }
 45%{ transform: rotateY(180deg); }
 55%{ transform: rotateY(0deg); }
 100%{ transform: rotateY(0deg); }
}
@keyframes flipBack {
 0% { transform: rotateY(180deg); }
 45%{ transform: rotateY(180deg); }
 55%{ transform: rotateY(0deg); }
 100%{ transform: rotateY(0deg); }
}

#news{
  width: 500ps;
  height: 20px; /*1行目だけ見えるように高さを指定するのがポイント*/
  overflow: hidden; /*heightとoverflowはセット*/
  margin: 150px auto 0;
  font-size: 16px;
  text-align: center;
}
#news li {
  background: #333; /*Firefoxで背景が黒くなってしまうので、あえて指定する*/
  height: 20px; /*一番上の1行だけを表示し、下を隠す*/
  line-height: 20px;  /*一番上の1行だけを表示し、下を隠す*/
  color: #FFF;
  padding: 3px;
}
ul.anime-ticker {
  animation: ticker 10s infinite;
  -webkit-animation: ticker 10s infinite;
/* アニメーションプロパティのショートハンド
①keyframeにつけた名前②アニメーションの時間③ループの回数*/
}
/*Chrome用*/
@-webkit-keyframes ticker {
/*1行目*/
  0% { opacity: 0; -webkit-transform: translateY(0);}
  9% { opacity: 1; -webkit-transform: translateY(0);}
  21% { opacity: 1; -webkit-transform: translateY(0);}
  33% { opacity: 0; -webkit-transform: translateY(0);}
 /*2行目*/
 34% { opacity: 0; -webkit-transform: translateY(-26px);}
 43% { opacity: 1; -webkit-transform: translateY(-26px);}
 55% { opacity: 1; -webkit-transform: translateY(-26px);}
 66% { opacity: 0; -webkit-transform: translateY(-26px);}
/*3行目*/
 67% { opacity:0; -webkit-transform: translateY(-52px);}
 76% { opacity:1; -webkit-transform: translateY(-52px);}
 88% { opacity:1; -webkit-transform: translateY(-52px);}
 100% { opacity:0; -webkit-transform: translateY(-52px);}
}
/*Chrome用*/
@keyframes ticker {
/*1行目*/
  0% { opacity: 0; transform: translateY(0);}
  9% { opacity: 1; transform: translateY(0);}
  22% { opacity: 1; transform: translateY(0);}
  33% { opacity: 0; transform: translateY(0);}
 /*2行目*/
 34% { opacity: 0; transform: translateY(-26px);}
 43% { opacity: 1; transform: translateY(-26px);}
 56% { opacity: 1; transform: translateY(-26px);}
 66% { opacity: 0; transform: translateY(-26px);}
/*3行目*/
 67% { opacity:0; transform: translateY(-52px);}
 76% { opacity:1; transform: translateY(-52px);}
 88% { opacity:1; transform: translateY(-52px);}
 100% { opacity:0; transform: translateY(-52px);}
}
/*firefox用*/
@-moz-keyframes ticker {
/*1行目*/
  0% { opacity: 0; -moz-transform: translateY(0);}
  9% { opacity: 1; -moz-transform: translateY(0);}
  21% { opacity: 1; -moz-transform: translateY(0);}
  33% { opacity: 0; -moz-transform: translateY(0);}
 /*2行目*/
 34% { opacity: 0; -moz-transform: translateY(-26px);}
 43% { opacity: 1; -moz-transform: translateY(-26px);}
 55% { opacity: 1; -moz-transform: translateY(-26px);}
 66% { opacity: 0; -moz-transform: translateY(-26px);}
/*3行目*/
 67% { opacity:0; -moz-transform: translateY(-52px);}
 76% { opacity:1; -moz-transform: translateY(-52px);}
 88% { opacity:1; -moz-transform: translateY(-52px);}
 100% { opacity:0; -moz-transform: translateY(-52px);}
}

p.btn a {
  display: block;
  line-height: 60px;
  width: 180px;
  text-decoration: none;
  font-weight: bold;
  animation: shining 5s infinite;
  border-radius: 10px;
  background-color: #da2626;
	background-image: -webkit-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: -moz-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: -o-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: -ms-linear-gradient(bottom, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
	background-image: linear-gradient(to top, #b59a5f, #b7934e 25%, #c1984d 46%, #d6c286 67%, #f6f3c7);
  margin-left: 430px;
  margin-top: 300px;
  text-align: center;
  color: #333;
  box-shadow: 0 0 1px #FFFFFF;

}
p.btn a:hover {
  color: #FFF;
  margin-top: 301px;
}

@keyframes shining {
  0% { box-shadow: 0 0 1px #FFFFFF;}
  50% { box-shadow: 0 0 7px #FFFFFF;}
  100% { box-shadow: 0 0 1px #FFFFFF;}
}

7月11日

今日やれたこと

 

  • クライアントのサイト制作・・・トップページがほぼ完成
  • サイト100選ページの制作
     framework.js とGoogleImgSearch.jsを合体させたギャラリー風ページ。
     選んでいないカテゴリーの画像が出てきてしまうので、スクリプトを修正する必要がある。
    ⇒ 明日に持ち越し
     

 

 

[その他]Webアイコンフォント「Font Awesome」

.htaccessを使用したスマートフォン対応サイトで使ったwebアイコンフォントの使用方法について。

fortawesome.github.io

1.CDNを利用する場合

内に以下のCDNのリンクを埋め込む(現在の最新バージョンの場合)

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
2.「ICONS」の中から使いたいフォントを見つけ、クリック
3.アイコンをクリックして出てくるページのクラス名に注目

f:id:pleasure10501:20150708182131p:plain

<i class="fa fa-home"></i>

4.表示したいところにそのまま挿入する

クラス名を指定すれば、CSSで色々な指定ができる


こちらも参考になります
これは便利!アイコン型WebフォントのCDN「Font Awesome」|Webpark

[サイト制作]「.htaccess」を使ったサイト完成

以前作った、.htaccessを使ったスマートフォン対応サイトの改修が終わりました。


<修正点>

  • PC用のサイトのレイアウトを完成
  • audioタグを使って音声ファイルを埋め込み(PC用)
  • IE8以下でHTML5対応(html5shiv)(PC用)


サーバーにアップしたものはこちら
クラシック音楽名盤6選


f:id:pleasure10501:20150708175715p:plain:leftf:id:pleasure10501:20150708180200p:plain:left:w600

[SEO]SEO対策について

□□SEOについて□□

 

  1. Google Search Engineを入れて検索エンジンを呼び込む
  2. 「タイトル」「meta descriptionの1文め」「h1」「最初のp」は同一にすると検索に効果的
  3. 上位表示は、コンテンツの質を上げること以外に方法はない
    ちなみに、「コンテンツの質」とは・・・
    •  正しい文法、正しいツリー構造
    •  テキスト量の多さが大事(検索エンジンはテキストを拾う) 
  4. 上位表示できること=売上げが増えることではない。
    検索結果5位以内ならよしとするべし
  5. Google Map上で表示される住所の情報も「テキスト」として大事な情報になる

      ↓ これのことです

    f:id:pleasure10501:20150703230436p:plain

  6. meta情報は、無駄なものは入れなくて良い。
    最低限入れるべきはcharsetとdescription。
    keywordは、テキストにない単語を入れるのはマイナスにしかならない
  7. 順位が上がらないからといって、しばしば手を加えるのはよくない。
    結果に反映されるまでには時間がかかる。(サイト自体を変更した場合は特に。)
    以前のサイトが検索エンジンに認識されていた時間と同じ位の時間がかかる。
    しばらく放置しておくこと。

 

 

[RWD]レスポンシブウェブデザインのフォントの設定

□□本日の授業□□

  • レスポンシブウェブデザインでのフォントの設定について
  • 3月上旬に作った1カラムの課題をレスポンシブ対応に改造。

  1. 石垣島観光ガイド
  2. ガラスの靴を探しています

レスポンシブウェブデザインでのフォントの設定について

レスポンシブウェブデザインでは、フォントの単位をremにする


emは先祖要素の設定を継承するため、表示サイズは累乗の計算になる。

「rem」の意味は「root」+「em」で、root 要素(つまり、html要素)のフォントサイズを継承する。

ただし、remはCSS3で追加された単位なので、IE8以下は不対応のため
ピクセルに直したものと両方記述すべし。

とりあえずremのrootであるhtmlの基準を、
html { font-size: 62.5%;} つまり10pxと設定しておく。

PC用の記述
※これ以外にul、ol、など他の使用要素があれば、それに応じて追加すること

/* レスポンシブ対応 font-sizeの基準 */
html { font-size: 62.5%;} /* = 10px */
body { font-size: 16px; font-size: 1.6rem; } /* = 16px */
h1 { font-size: 32px; font-size: 3.2rem; } /* = 16px */
h2 { font-size: 24px; font-size: 2.4rem; } /* = 16px */
h3 { font-size: 20px; font-size: 2.0rem; } /* = 16px */
h4 { font-size: 18px; font-size: 1.8rem; } /* = 16px */
p { font-size: 16px; font-size: 1.6rem; } /* = 16px */

スマートフォン用の記述
スマートフォンではIEは使用しないと思われるので、remだけで良い

@media screen and (max-width: 640px) {
/* font-size */
html { font-size: 62.5%;} /* = 10px */
body { font-size: 1.6rem; } /* = 16px */
h1 { font-size: 3.2rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.0rem; }
h4 { font-size: 1.8rem; }
p { font-size: 1.6rem; }

これはそのページの基準なので、各要素の調整はその下に書いていけばよい。

レスポンシブ対応1カラムの課題

2つともブレイクポイントを640pxにしており、スマホ用とPC・タブレット用の2パターンのスタイルを書いています。
サーバーにアップしていなかったので、今回は公開しました。

  1. 石垣島観光ガイド
  2. ガラスの靴の持ち主を探しています