ファビコンの設定

グループワークもそろそろ佳境です。
完成が近づいてきて、なんとなく皆気になっていそうなのが「ファビコン」の設定です。
今回は講義で紹介し損ねたファビコンの設定方法を紹介します。

ファビコンって何?

ファビコンはタブの左側(titleの横)に出ている小さいアイコンの事。
デフォルトだと味気ない事もあり、多くのサイトで設定されています。

設定方法は、

  1. 画像を用意
  2. .icoファイルに変換
  3. headタグ内に書き込む

これだけです。

画像を用意!

まず重要なのは画像のサイズ。16px×16px、ないし32px×32pxで制作します。
ショートカットアイコンとして使われる事もあるので、32×32が無難です。
イラレなどを使ってかわいい素材を作ってみましょう。
作った素材は一度png等で保存します。

.icoに変換!

次に、作った素材を.icoファイルに変換します。
といっても、難しいことは特にありません。
ファビコン favicon.icoを作ろう!
上記リンクのようなサービスが幾つかあるので、画像を選択してボタンを押すだけでicoファイルが出来上がります。

headに張り付け!

最後に、headタグの中に張り付けて完成です。

<link rel="shortcut icon" href="[icoファイル]" />

hrefの中身は、作った素材までの相対パスになります。
サーバーにあげる場合はきちんと一緒にアップロードする必要があるので、作業フォルダ内に保存しておきましょう。

参考:無料ですぐできるfaviconの作成と設置のしかた

グループワークに関して。時間がなければ設定する必要はありません。完成最優先で、もし余裕があればやってみてください

table特有のCSSプロパティとレイアウト

テーブルのデザインはデフォルトだとあまり見栄えが良くない。
テーブル全体とth,tdにボーダーがかかると二重線になってしまう事もあり、少し野暮ったい形になる。

th th th
td td td
td td td

デフォルトのborderつきテーブル。あまりカッコよくはない。

実はtable要素のみに使用できる2つのプロパティがある。

	#table_test1{
                /*セルの隙間を無くす指定*/
		border-collapse:collapse;
	}
	
	#table_test1 th{
		background-color:#FF8635;
	}

        #table_test1 th,#table_test1 td{
		border:solid 1px #888;
	}
th th th
td td td
td td td

border-collapseは、テーブルのセルの隙間を開けるかどうかの設定。
値は「separate」と「collapse」の二種類。
separateはデフォルト値で、「隙間を開ける」指定。
collapseを指定すると隙間がなくなり、線が一本になる。

また、border-collapseを指定しない状態(separate)のセル間の隙間も変更可能。

#table_test2{
        /*セルの隙間を広げる指定(border-collapseをcollapseだと効かない)*/
	border-spacing:5px;
}
#table_test2 th{
	background-color:#7E98FF;
}
#table_test2 td{
	background-color:#DDD;
}
th th th
td td td
td td td

border-spacingは数値+単位(px,em,rem)で指定する。セル内の余白の大きさを変更する事が出来る。
テーブルのセルにはmarginが使えないので、この指定を覚えておこう。
chromeのデフォルトが2pxなので、少し広げるだけでも印象は変わる。
因みに

#table_test2{
	border-spacing:5px 10px;
}

上記の様に数値を二つ指定すると、「水平方向」、「垂直方向」を個別に設定する事も出来る。

borderも出来る限りCSSでつけ、場合によっては背景色とスペースだけにしたりすることでデザインの幅が広がる。

どちらもtableタグに直接書ける指定なので、tdやthにかけないように注意!
テーブルを使う機会は多いので、今回紹介したプロパティを使ってカッコイイテーブルを作ってみよう。

2015年総まとめ、jQueryのプラグインとスクリプト100選

昨年出てきたjQueryプラグインなどが100個厳選されて載っていたので紹介します。
最新環境にもあっていると思われ、面白いものも多いです。実際に使用するかはともかく、引き出し増やす感覚で見てみてください。色んなものを知っていると、デザインの段階で「あ、あれ使おうかな」という選択肢が増えます。

2015年総まとめ、jQueryのプラグインとスクリプト100選

上記の中から面白そうなものを選んで抜き出しました。タイトルは直接デモサイトにリンクしています。

bigfoot.js
注釈をクリックすると可愛く出てくるjs。
注釈はそこまで多様するものではないが、もし使用するページがあれば使ってみたい。注釈以外にも使えるかも。
jsの動きそのものもなのだが、デモページ自体が逐一可愛くまとまっている。
全体がフラットでメニューやボタンもいい感じに可愛いので、参考にしてみてください。
slick
カルーセルスライダーのjs。
オプションが非常に多く、レスポンシブにも対応している。
Zoom.js
ライトボックスなどよりシンプルに画像を拡大できるjs。
このブログの画像に適用されています。
iconate.js
沢山の種類のボタンアイコンを、色んなアニメーションで動かせるjs。
デモサイトではプルダウンメニューで「初期表示」、「クリック後の表示」、「アニメーション」がそれぞれ指定でき、動作確認が出来る。
Right Height
内容量に寄らず、指定した範囲内の要素の高さを合わせるjs。レスポンシブ対応なので結構便利。使う機会は多い。
おまけ:RPG.js
jsで頑張るとここまでできるよ、という一例。
Webでの実用性はまるで思いつかないが、頑張ればこれでゲームも作れるかも?
因みにゲーム制作用のjsプラグインもjQueryとは別に存在しています。興味のあるかたは調べてみてください。

他にもたくさんのプラグインが紹介されていますので、興味ある方は色々見てみると面白いと思います。

レスポンシブデザインでのjQueryプラグインの導入

レスポンシブに対応しているか確認

jQueryプラグインは便利だが、仕様上レスポンシブ対応していない(伸び縮みすると動作が狂う・そもそも伸び縮みできないなど)ものも多い。

使用したい動きがある場合先に伸縮する適当なテストページを作って動かしてみるか、使う前に「jQuery スライダー レスポンシブ」などのように検索ワードを絞ってから使用すると良い。

add_jQuery

面倒なようだが、検討していたプラグインがいざ実装段階で使えない方が100倍くらいダメージが大きいので、先行テストをお勧めします。

レスポンシブのメニュー

また、レスポンシブサイトだからこそ多様するjQueryプラグインもある。
よく使われるのが、ナビゲーションメニューである。
スマホ表示まで縮めた場合は横並びもできず、縦並びにしても幅を取るので、ボタンを押して表示する形式が多く採用されている。
ブレークポイントと組み合わせて、スマホ表示やタブレット以下の時にだけ利用する事が多い。

【まとめ】レスポンシブデザインで使えるメニュー3選+1
上記は一例です。また、そもそもこういう形式にしなくても構いません。検討はしてみてください。

【グループワーク】 美容室レスポンシブサイト制作課題 仕様書

期間
1月18日 ~ 1月30日
2月1日発表までに完成! 
目的
  • 美容室の広告と周知を目的としたサイトリニューアル。
  • モバイル対応のレスポンシブサイト制作。
ディレクトリー
  • TOP(index) : スライドのアイキャッチに店内やヘアスタイル等の写真。
  • メニュー:CUTや、パーマなどのメニューとプライス
  • ヘアスタイルギャラリー
  • スタッフ紹介(こちらは無くても構いません)
  • ACIDの紹介と、アクセス
  • コンタクト(機能はいらず。見た目だけ出来ればOK)
その他希望
  • 全体を通してグローバルナビを表示。
  • TOPページにはスライダーを設置し、各ページのヘッダーはお任せ。
その他希望
  • 全体を通してグローバルナビを表示。
  • TOPページにはスライダーを設置し、各ページのヘッダーはお任せ。
参考サイト
  1. カリダ(色使い・雰囲気など)
  2. リジェール(スライダー)
  3. EARTH(スライダー・コンテンツ)
  4. ove hair(スライダー・ナビゲーション)


これらはクライアントからの要望です。さらに詰めたい場合は各チームで質問してください。
質問はなるべくまとめてした方がやりやすいかと思います。

店舗情報(各項目を必ず掲載する事)

営業時間 :10:00~20:00

TEL : 012―345―6879

定休日  : 月曜日・第三火曜日
住所 : 神奈川県横浜市港北区3-19-14

神奈川県横浜市の美容室『*****』は手作り感が溢れる店内の中で、
お客様に自宅に居る様な感覚でリラックスして頂きたいと思っております。

お客様のライフスタイルに合わせたヘアスタイルを提案するため、
気取りの無いスタッフが
まずはカウンセリングからご相談に乗ります。

今までなりたいスタイルがなかなか見つからなかった方、一度、当店に
足を運んでみて
ください。
再現性が高くダメージを抑えたエアウェーブパーマやトリートメントも
おすすめです。

Price

■CUT(S・B) ¥4,300

■PERM(S・C・B) ¥11,100~

ALL ¥6,800~

POINT(S・B) ¥4,300~

SPIRAL(S・C・B) ¥13,500~

STRAIGHT(S・C・B) ¥16,800~

AIR WAVE(S・C・B) ¥15,750~

■COLORING ¥6,800~

RETOUCH ¥5,600

ACID ¥6,800~

HENNA ¥7,800~

T ZONE・ ¥2,300

FOIL WORKS ¥600~

■RAMERAME ¥4,500

■DESES ¥2,800

■SCALP ¥1,700

■HEADSPA ¥3,000

■SHAMPOO ¥1,300

■BLOW ¥2,000

■DRY ¥600

■UP ¥4,500~

※()表示以外のメニューは別途ブロー、ドライ料金がかかります。
学生割引・セット割引あります。詳しくはお問合わせください。