カテゴリー別アーカイブ: CSS3

11月14日(木) スマートフォンサイト制作基礎③

固定的なレスポンシブ

今日まで、画面のサイズに合わせて徐々に変化していく流動的なレスポンシブデザインのページを制作した。
こちらが主流ではあるが、徐々に幅が変わってしまうので、半端な部分での対応が必要になってしまう場合があり、ブレイクポイントを増やさなければならなくなる事も多い。もちろん、その分作業数は跳ね上がる。

そこで、段階ごとに固定の三段階で切り替わる固定的なレスポンシブデザインが採用されることがある。
流動的な場合は全体を囲うWrapperを%で指定したが、それを固定のpxにしてしまう。
それにより、中途半端な画面サイズの時の見た目崩れがなくなる。
ただし想定したサイズとずれている時は、どうしてもスクロールバーが出てしまう欠点がある。

  見栄え 作業量(ブレイクポイント)
流動的 細かく綺麗に設定可 多い
固定的 大雑把な設定のみ 少ない

「どちらがいい」とは一概には言えないので、仕事次第。
クライアントの予算に応じて決める場合が多い。

モバイル対応サイトのSEO

SEOとは、検索順位を決定する基準のこと。
昨年夏ごろ、Googleから、「モバイル対応サイトを優遇する」という発表があった。
時代的にモバイル対応を加速する狙いがあったものと思われるが、実際にモバイル対応サイトの需要は高まった。
その為、より安価にモバイル対応が出来るレスポンシブサイトの制作、或いは既存サイトの書き換えの仕事は増加傾向にある。

ブレイクポイントの考え方

レスポンシブデザインは、CSSのメディアクエリ―(media screenの事)を使って制作する事を学んだ。
この時、メディアクエリ―で設定するサイズ(min-widthなど)のことをブレイクポイントという。

このブレイクポイントをどこで設定するか、いくつ設定するかはその時次第ではあるが、基準はある程度存在する。

基本的に、ブレイクポイントは多ければ多い程どんなデバイスにも対応したページを制作できるが、
その分修正点は増えてしまい、作業労力は増えていく。

その為、大抵の場合は2~4個程度のポイントに抑える。

デバイスの大きさが多様過ぎる為、数値は一概には言えないが
スマートフォン:480px以下
タブレット:768px以下
を基準にするのが一般的。
480pxは大体一番大きなスマホ対応で、768pxはipadの対応サイズになる。
※あくまで現環境のざっくりした対応です。今後メジャーな端末が増えたら変更される可能性もありますし、特定のデバイスへの対応を求められたらそれに合わせて設定する必要があります
様々なデバイスの画面サイズ等の情報を一覧化した・「Device Metrics」

参考:
レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ
レスポンシブCSSで使うブレイクポイントの決め方

11月12日(火) スマートフォンサイト制作基礎①

jQueryの古い命令を読み込む

jQueryは日々更新され、バージョンもどんどん新しいものが出ている。
大まかな構造は変わらないが、仲には新しくなって意味の変わった機能新しく追加された機能がある。
前者は最新のjQueryでは上手く動作せず、後者は逆に古いjQueryで動かない。
これがプラグインが動かない原因の一因になることがある。

そこで登場するのが、migrate.jsである。
これはjQuery公式が提供しているもので、古い命令を復活させることが出来るプラグイン。
公式ページからダウンロードして読み込むか、本体と同じように

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

上記の形で外部から読み込む方法がある。人によっても好みがあるので、どちらでもいい。(僕は外部から読み込んでしまう事が多いです)

ただし、スライダーなどのよくあるプラグインにおいて起きた問題であれば、他の物を代用する選択肢もあるので、状況によって使い分けること。
また、これはあくまで原因の一つなので、動かない時には色んな理由が考えられる。

新しくなって仕様変更になった機能で頻出するのは「toggle、live」くらいなので、コンソールでエラー確認したときにこいつらが表示されていたら疑った方がいい。

モバイルサイトの制作

ケータイ電話でネットを閲覧し始めて以降、PC用ページと携帯用ページを別につくるのが主流だった。
しかし実質2つ以上のページを作らなければならない事、また、URLが変わってしまうせいでアクセス者数がばらけてしまい、検索順位が上がりにくいという欠点があった。更にタブレット等新デバイスの登場により、2パターンで収まらなくなってしまった。
自由にデザインできる性質上、現在でもモバイル専用のサイトを別に作る仕事はあるが、以上のデメリットとCSSのmedia queryの発展により、
今では一つのサイトが画面サイズに応じて変形する、レスポンシブデザインが主流になりつつある。

最近はGoogleがモバイル対応ページの検索順位を上げる事を発表しており、また、レスポンシブの方がモバイル専用ページを作るよりも安価である事から、需要が高まっているという背景もある。

レスポンシブデザイン

上述のように、「画像サイズに応じて表示を変える」デザイン。一つのサイトであらゆるデバイスに対応し得る(もちろん、全てに合わせるとキリがないので、ある程度の妥協は必要)。
CSSのmediaQueryによって変更点(ブレイクポイント)を設定し、それ以上ないし以下の時の変更点を、CSSで指定する。
使用する際、metaタグによるviewportを設定する必要がある(唯のモバイルページにも必要)。

viewport

metaタグのname属性値の一つで、画面による表示方法を設定する。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

↑こんな感じで記述する事が多い(google先生の推奨設定だそうです)。
まずnameでviewportを指定し、contentで設定する。分かりにくいが、大体はコピペで事足りる。
metaタグなので、headタグの中に記述する。

viewportの設定

width
読み込み時の表示領域。初期値(指定していない時)は980px。
width=1000px
と書くと、1000pxが表示領域になり、スマホで見ても倍率が変わらず、320pxの画面に収まる様にそのまま縮小された形で表示される。
width=device-widthは、「見ているデバイスに応じて」の意味になる。
viewportの指定はどうするのが適切なのかいろいろ検証してみた
initial-scale
ページのズーム倍率。数字が大きければ元の表示より拡大、小さければ縮小の形で表示される。
initial-scale=1.0は1倍なので、見たまま表示するという事。余程の理由がなければ他の指定はしない。(実際見たことないです)
minimam-scaleという最低倍率も設定できる。モバイル用だと1を入れた方が安定するらしい。
user-scalable
ユーザーが任意に拡大できるかどうかの設定。
初期値はyesで拡大許可。user-scalable=noを指定すると拡大できなくなる。
スマホだと拡大する人も多いので、こちらも余程の理由がなければ指定しないほうがいい。
media-screen
CSS3から登場した新技術。
ざっくりいうと、特定のウィンドウサイズの時だけ読み込むCSSを書ける。
詳しくは後日。

@media screen and (min-width) (min-width: 321px) and (max-device-width: 920px) {
  //CSSを記述
}

上記はウィンドウサイズが321pxから920pxの間の時にだけ効くCSSが設定できる。

フォントを増やしていこう

Illustrator、PhotoShopでは、パソコンにインストールされているフォントが使われる。
デフォルトでは数が少ないので、いろんなフォントを探して自分のPCに入れてみよう。

無料のフリーフォント集 フリーフォントケンサク
【2015年】デザイナーなら必ず入れておきたい25のフリーフォント!
画像と同じくフォントにも著作権があるが、フリーのフォントも多い。

フォントには有料のものも数多くある。デザイン会社などでは、複数のフォントを購入し、使用している。
フォントは日本語に対応しているものとしていないものがあるので、検索時は「日本語」をキーワードに含めるといい。

しかしWebにおけるフォントは厄介で、インストールしたフォントは基本的に自分の画面でしか見られない。
画像として表示すれば見られるが、テキスト部分もフォントを変更したいことはままある。

そこで、今はWebフォントと呼ばれる技術が使われる。
実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ
Webフォント(日本語/欧文)サイトまとめ9選!変更方法もご紹介します
大きく、googleに登録されているフォントを使う方法と、自分のダウンロードしたフォントをサーバーにアップして利用する方法がある。
今後サーバーへのアップロードの講義をするので、その後試してみるといいかも。

12月1日(火)
HTML5・CSS3演習⑩
CGコンテンツ制作演習④

CSSの技術

aタグの擬似クラス
aタグには擬似クラスがいくつか存在し、色々な設定が出来る。

CSS

	/*通常時*/
	.loveheart:link{
		color:#069;
	}
	/*一度押した後*/
	.loveheart:visited{
		color:#666;
	}
	/*マウスを乗せたとき*/
	.loveheart:hover{
		color:#CFC;
	}
	/*クリックしている間*/
	.loveheart:active{
		color:#F00;
	}

HTML

<a href="#" class="loveheart">擬似クラスで変化が指定できる</a>

実行

擬似クラスで変化が指定できる

プラスポイント

あまり機会はないが、全てを設定するときは、順番に注意しよう。
link→visited→hover→active
の順番に書かないと、一部が上手く動作しないことがある。
「love heart」で覚えられると、何かの本に書いてありました。

CSSスプライト
ホバー時にbackground-positionで背景画像を切り替える技術。俗にCSSスプライトと呼ばれる。
切り替え前後をくっつけた一枚の画像を用意し、位置指定で見える範囲を変える。
まず、↓のような画像を用意する。サイズは幅100px × 縦120px。実際に表示する縦の長さは半分の60px。
spright

CSS

	.sprite{
		display:block;
                /*表示したい範囲を設定*/
		width:100px; 
		height:60px;
		background-image:url(images/spright.jpg);
                /*表示位置を横0、上0に設定*/
		background-position:0 0;
		text-indent:-9999px;/*中の文字を跳ばす指定*/
	}
	.sprite:hover{
		background-position:0 60px;/*縦軸を60pxずらして表示*/
	}
<a href="#" class="sprite">リンクテスト</a>

リンクテスト
画像が切り替わっていることが分かる。
background-positionは、スペース区切りで二つ数値を指定すると、左が横軸、右が縦軸の設定が可能。

リンクのフォントやデザインが凝っていて、hover後にもこだわりたいときに使われる。
上の例であれば、background-colorでも対応可能だが、もっと複雑なデザインであれば、画像が必要な場合も少なからずある。
今は先日学習したCSS3でかなり自由な指定が可能になってきているので、使用機会は減っているが、ブラウザの対応状況などによってはこちらが採用されることもあるので覚えておこう。

上記は二つだが、アイコンなどを複数用意して一枚の画像にし、positionで指定することで任意の画像を表示し、アップロードする画像枚数を減らすこともある。

CSSのセレクタ
CSSのタグ、ID・classなど、要素を指定する部分をセレクタと呼ぶ。
このセレクタには様々な指定方法があり、使いこなせると、コードをより短く&分かりやすく&書き換えやすくなるので覚えておこう。A>B{ 指定 }>で区切ると、A直下のBという意味になる。直属の子要素にだけ反映されて、孫以下には効かない。

指定方法 効果
*{ 指定 } *は全称セレクタとも呼ばれる。全てのタグに対応する
A B{ 指定 } スペースで区切ると、Aの中のBだけを指定できる。
A,B{ 指定 } カンマで区切ると、AとB双方に指定できる。何個でも連結可
A.class{ 指定 } 或いは、A#id{ 指定 } 特定のクラスないしIDがついたAだけを指定できる
A+B{ 指定 } +で区切ると、Aに隣接するBに適応される。他ほど使う機会はないが、覚えておくと便利。

以下はサンプルコード。

CSS

	/*複数のセレクタに適応*/
	.box1,.box2{
		background-color:#F93;
		padding:10px;
		margin-bottom:10px;
	}
	/*box2だけ背景色を変更*/
	.box2{
		background-color:#9FF;
	}
	/*midashiクラスの指定*/
	.midashi{
		font-size:24px;
		color:red;
	}
	/*midashiクラスの付いたh3だけにかかる指定*/
	h3.midashi{
		padding-left:10px;
		border-left:#0F6 5px solid;
	}
	/*sectionの中のpタグにかかる指定*/
	section p{
		font-weight:bold;
	}
	
	/*section直下のpタグだけにかかる指定*/
	section > p {
		color:blue;
	}
	/*h3に隣接したpタグ*/
	h3+p{
		background-color:#BFF;
	}

HTML


<section class="box1">
    <h3 class="midashi">クラス.midashiの付いたh3</h3>
    <p>ボックス1直下のp(クラス.midashiに隣接)</p>
    <p>ボックス1直下のp</p>
</section>

<section class="box2">
    <h4 class="midashi">クラス.midashiの付いたh4</h4>
        <div class="oya">
            <p>ボックス1の孫にあたるp</p>
       </div>
</section>

実行

クラス.midashiの付いたh3

ボックス1直下のp(クラス.midashiに隣接)

ボックス1直下のp

クラス.midashiの付いたh4

ボックス1の孫にあたるp

同じ大きさやpaddingの指定をしたいbox1とbox2に、カンマ区切りで大きさを同時指定。
box2のみ、背景色を追加で指定し、色を変更している。
また、h3とh4には同じクラス「.midashi」を設定しているが、h3の方にだけ左側に飾り線を入れたかったので、
「h3.midashi」と記述。
pタグは「中の」「直下の」「隣接する」といった指定それぞれで書いているので、確認してみるといい。

プラスポイント

セレクタを指定する箇所では、上記のように半角スペースを入れるだけで意味が変わってしまうので注意しよう。
表示がおかしいときは、疑ってみてみるといいかも。

他にも様々な指定があるので、参考にしてください。
意外と知らない!?CSSセレクタ20個のおさらい

リストのスタイル
以前紹介したが、もう一度掲載。

属性値 効果
list-style-type:none なにもつけない
list-style-type:disc; 黒丸点(ulの初期値)
list-style-type:circle; 中抜き丸点
list-style-type:square; 黒四角点
list-style-type:decimal; 1~の数字(ol初期設定)

他にも(どこで使うの? というものも含めて)様々な種類がある。
参考リンク:
http://www.htmq.com/style/list-style-type.shtml

また、list-style-image:url(パス);で画像を入れることも可能。

プラスポイント

list-style-typeと一緒に稀に使われるものとして、list-style-positionがある。
点などを内側に出すか外側に出すかを指定できる。具体的には以下を参照。

CSS

ul.inout li{background-color:#FBB;}
ul.inout li.inside{list-style-position:inside;}
ul.inout li.outside{list-style-position:out-side;}

HTML


<ul class="inout">

<li class="inside">内側</li>


<li class="outside">外側</li>

</ul>

実行

  • 内側
  • 外側

背景色がつくと、範囲の内側と外側が分かりやすい。

display:none;
displayは、要素の状態を変更させるプロパティ。インラインやブロックの変更は既に講義した。
display:none;
を指定すると、要素を読み込まず、消すことが出来る。
今はまだピンとこないかもしれないが、レスポンシブデザインの制作や、プログラムとの連動で使われることが多いので、覚えておこう。
visivility
visible ボックスを表示します。
hidden ボックスを非表示にします。
collapse テーブル(表)の行や列にこの値を指定すると、その部分を詰めて表示します。

主にvisivility:hiddenの指定で使われる。
displayが「消す」という認識なら、こちらは「隠す」あるいは要素の中身だけを消すイメージ。
こちらだと、背景色や範囲は残る。

overflow
boxに高さを指定していると、内容がエリアを突き抜けてしまう。
そんなときにどうするかを指定するプロパティ。

visible 初期値。エリアから出た部分をそのまま表示する。この部分は高さに派含まれない
hidden 初期値。エリアから出た部分を消す。本来の使い方より、古いブラウザでのバグ対策などに使われることがある。
scloll はみ出していたらスクロールバーを表示する。
overflow-x:scroll、overflow-y:scroll;という指定もあり、横軸・縦軸どちらかだけにバーを表示することも可能。

以下はサンプルコード。

CSS

	.overflow div{
		background-color:#CCF;
		width:100px;
		height:50px;
		padding:5px;
		float:left;
		margin-right:10px;
	}
	.overflow .of1{
		overflow:visible;/*初期値なのでかけなくても同じ*/
	}
	.overflow .of2{
		overflow:hidden;/*はみ出した部分を非表示*/
	}
	.overflow .of3{
		overflow:scroll;
	}
	.overflow .of4{
		overflow-y:scroll;
	}

HTML

<div class="overflow clearfix;">
		<p>overflowは、内容がコンテンツのサイズをはみ出てしまった時に指定します。</p>
    <div class="of1">
    	<p>overflow:visible;が初期値で、はみ出して表示されます。</p>
    </div>
    <div class="of2">
    	<p>overflow:hidden;は、はみ出した部分を消してしまいます。</p>
	</div>
    <div class="of3">
	    <p>overflow:scroll;を指定すると、スクロールバーが表示されます。</p>
    </div>
    <div class="of4">
	    <p>overflow-x:scroll;で横だけ、overflow-y:scroll;で縦だけスクロールバーを出せます</p>
    </div>
</div>

表示

overflowは、内容がコンテンツのサイズをはみ出てしまった時に指定します。

overflow:visible;が初期値で、はみ出して表示されます。

overflow:hidden;は、はみ出した部分を消してしまいます。

overflow:scroll;を指定すると、スクロールバーが表示されます。

overflow-x:scroll;で横だけ、overflow-y:scroll;で縦だけスクロールバーを出せます

Photoshopテクニック

シズル感

食欲や購買意欲を刺激するような食品の活きの良さや瑞々しさと言った「おいしそうな感じ」のこと。五感を刺激するような感覚のこと。そこから転じて、現場の「臨場感」を表す際に使われることもある。

はてなダイアリーより引用

主に食品画像などを加工することも多い。
かなりいろいろな手法があるが、一般に色調補正だけでもかなり見栄えはよくなる。
今回の講義では、レイヤースタイルとフィルターとマスクを使用して、湯気の演出を追加した。

描画モード:スクリーン
描画モードには乗算、覆い焼きなど様々なプロパティがある。
今回使用したスクリーンはやや結果が予想しにくいモードだが、「黒を透明として、色が重なるほど白に近づく」モードである。
今回の使用感としては、「黒い部分が透明になっている」事が重要。
参考リンク:【Photoshop】描画モードを理解するその① ~スクリーンモード編~
フィルター→描画→雲模様1・波形
フィルターは、一気に見た目を変更できるフォトショップの機能。
こちらもかなり色々なタイプが用意されているが、今回は雲模様1と波形を使用した。
今回のように、描画モード、フィルターなどを組み合わせると、様々な演出ができる。
参考リンク:ひと目で分かる!Photoshopフィルターギャラリーの効果一覧
雲模様1は、描画色の雲を、背景色の背景の上に出力するもの。
今回は黒い背景の上に白い雲を出現させ、黒部分を前述の描画モード:スクリーンで透明にすることで、湯気を演出した。
その後波形フィルターを重ねがけすることで、見え方を調整している。

合成

PhotoShopでは写真の合成ができる。
まずは上に張りたい画像の背景が邪魔になってしまうので、切り抜く。
まずは選択範囲を作成する。背景が同系色で統一されている場合は自動選択ツールが便利。許容地を調整した上で、選択範囲を切り替えてみよう。
背景色が同一でないときは、クイック選択ツールをshiftキーと併用すると、かなり正確に選択できる。
外側を選択した場合は、選択系のツールが選ばれている状態で右クリックすると、「選択範囲の反転」ができる。
人物だけ選ばれたら、コピーや切抜きが可能になる。
切り抜き後、背景となる画像に貼り付けた後、大きさや位置の調整を行った。
レイヤー内や選択範囲内の画像サイズを変更するときは、右クリック→自由変形で修正可能。
自由変形はctrl+Tでショートカットも出来る。

参考リンク:意外と簡単?Photoshopで画像を切り抜く方法
今回はざっと合成したが、もう少し踏み込むと、更に細かい画像の切抜きが可能になる。