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

classや変数のネーミングに悩んだら――便利ツール「codic」

Web制作をしていく上で、避けられないのがID、classや、プログラミングの変数などの命名作業。
よく使う「wrapper」や「main」だけで済めばいいですが、そうもいかないのが実情。かといって、スッと出てこない英単語は多いし、分かりにくい名前を付け過ぎるとあとで自分の首を絞めることにもなりかねない……
そんな時に便利なWebサービス「codic」が紹介されていたので、共有します。

紹介元(詳しい使い方)関数や変数のネーミングに悩んだら「codic」に日本語名を入力するとある程度解決するかも

日本語で名前を打ち込むと、英単語になって帰ってきます。複数の単語の接続方法も好みに選択可。
かなり多くの単語に対応しており、使い勝手はバッチリです。会員登録するとさらに機能が増えるようですが、ざっと使った感じでは未登録でも問題なさそうです。
今後対応単語数も増えると思われるので、ぜひ使ってみてください。

ファビコンの設定

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

ファビコンって何?

ファビコンはタブの左側(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にかけないように注意!
テーブルを使う機会は多いので、今回紹介したプロパティを使ってカッコイイテーブルを作ってみよう。

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

固定的なレスポンシブ

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

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

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

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

モバイル対応サイトのSEO

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

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が設定できる。