ノウハウコラム： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

iPhoneで傾きに合わせてスタイルを切り替えるjquery

iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。
そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptを紹介します。

サンプル

サンプル
※iPhoneで見てみてください。

ダウンロード

tilt.zip

使い方

ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。

用途

縦横でボックスの幅を切り替える
縦横で背景色を切り替える
縦（または横）の場合だけ表示する文章や画像を設置する
縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する

等々...

仕組み

仕組みはとても単純でwindow.orientationを使い、傾きを取得し、0の場合は「縦」それ以外の場合は「横」としてbodyのclassをlong（縦）とside（横）に切り替えています。

スマートフォンコーディング

スマートフォンで積極的に使いたい4つのCSS3

CSS3は通常のWebサイトでは、IE6～8が高いシェアを持っているため現状ではあまり使われません。
しかし、iPhoneとAndroidのブラウザはwebkitという同じHTMLレンダリングエンジンが使われているため、古いブラウザを気にせずCSS3(*1)を使うことが出来ます（IEを気にせずコーディング出来るなんてちょっとうれしいですね！）。

ということで、スマートフォンで積極的に使っていきたいCSS3を紹介します。

*1...全てのCSS3プロパティが使えるわけではありません。

ボーダーの角丸を指定する

border-radiusプロパティを使うことで簡単に角丸を作ることが出来ます。

4つ角の半径を一度に指定するショートハンド

サンプル01

左上の角の半径を指定する

サンプル02

※-webkit-と-moz-という指定を先頭に付けることでそのブラウザだけを対象にした指定となります。
※本来であれば4つ角をショートハンドで指定出来るのですが、webkitは対応していないため、個別に指定します。

続きを読む "スマートフォンで積極的に使いたい4つのCSS3"

スマートフォンコーディング

今から始めるiPhoneコーディング

何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。
それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。

iPhoneの特徴

まずは、iPhoneの特徴を見てみましょう。

一つの端末で複数の解像度を持つ
iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。
例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。

※縦持ちのとき

※横持ちのとき

そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。
※そのためには、デザインをしっかりと考えたものにしなければいけませんが...。
HTMLやCSSの実装状況はパソコンと同様
iPhoneに搭載されているブラウザ（Safari）では、パソコン版のSafariと同程度のHTML/CSSが実装されているため、パソコンサイトと同じ感覚でコーディングが出来ます。

大きく二つの特徴を挙げましたが、iPhoneサイト構築の際には1番目の特徴を考えて、デザイナーはリキッドなデザインをする必要があります。

続きを読む "今から始めるiPhoneコーディング"

スマートフォンコーディング

HTML5で短くなったDOCTYPE宣言

HTML5には「頻繁に書く必要のあるものは簡単に書けるように」という考えがあり、これまで書いていたコードがより簡単になります。たとえば、HTML5において、DOCTYPEは「標準モードへのスイッチ」という役割でしかありません。そのため、DOCTYPE宣言以下のように短くなっていきます。

これまでのDOCTYPEは上記のように長く、そのまま入力できる人は少ないと思います。
HTML5では上記のように長く、複雑だったものは以下のように簡略化されました。

なお、主要なブラウザはIE6も含め、このDOCTYPEで標準モードに切り替わります。

役に立つ！コーディングTips

preタグ内のテキストを自動改行させるスタイルシート

preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったり、越えないように overflow: auto などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます（縦横のスクロールバーでます！）。

そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpreタグに対して指定してあげるだけです。

役に立つ！コーディングTips

IE6で連続した が認識されないときの対処法

連続した がIE6では1つの として表示されることがあります。例えば、文章の行間を1行分空けたいときなどに を2つ指定したりしますが、ある条件が重なるとIE6では1つとして認識されてしまいます。
◆サンプル（別ウィンドウで開きます）

発生条件

を包括する要素に letter-spacing が指定されている場合に発生します。値はpxの絶対値指定でもemの相対値指定でも発生し、またネガティブ値（-5pxなど）でも発生します。

対処方法

に letter-spacing: 0 か letter-spacing: normal を指定することで対処できます。
◆サンプル（別ウィンドウで開きます）

サンプルでは 一つ一つに指定していますが、スタイルシートで br { letter-spacing: normal } と記述しても対処できますので、CSSファイルに取り合えず記述しておくのもいいかもしれません。

コーディングトラブルシューティング

スタイルの優先順位のまとめ～あなたはスタイルの優先順位について理解できてますか？～

CSSには様々な指定方法があり、この指定方法によって優先順が決められています。例えば、同じP要素に対してセレクタを下記のように指定したとします。

このように後ろに指定されたものが優先されるというだけではなく、スタイルセレクタの種類によっても優先順位に影響を与えます。

続きを読む "スタイルの優先順位のまとめ～あなたはスタイルの優先順位について理解できてますか？～"

役に立つ！コーディングTips

Thickboxをprototype.jsと共存させる方法まとめ

Thickboxの使い方 - 画像やHTMLのポップアップをお手軽に！の記事でThickboxの使い方をご紹介しましたが、prototype.jsとの共存ができないというごとが判明したので、今回はprototype.jsとの共存方法をご紹介します。

こちらのサイトを参考にさせていただきました。
【メモ】 prototype.jsとjQuery.jsを共存させてThickboxを動かす

重要なポイントは上記のサイトでまとめられていますので、それを踏まえた実際のやり方がこちら。

続きを読む "Thickboxをprototype.jsと共存させる方法まとめ"

役に立つ！コーディングTips

IE6で :hover を全要素へを適用させる方法

a:hover という記述はテキストのロールオーバーが良く使うことがあります。文字色を変えたり下線を消したりと、ユーザーの動きに合わせてデザインを変更することができるため、上手に使うことでユーザビリティの向上が計れます。

しかし、IE6では a要素にしか使えないため、どうしてもIE6のユーザーに対してはユーザビリティが悪くなってしまいます。そんなときに使えるのが csshover.htc というビヘイビアファイルです。これは、IE限定の拡張機能でJscriptを実行するものです。

続きを読む "IE6で :hover を全要素へを適用させる方法"

役に立つ！コーディングTips

CSSで文章の改行位置を揃える（禁則割付）

HTMLで長文があるときに、その文章の改行位置が揃っていないと見た目的にちょっと気になることないでしょうか。
ちょうどこんな感じに↓

HTMLコーダーとは、(X)HTML(※1)・CSS(※2)などを使用し、ウェブデザイナーがデザインしたものをブラウザ(※3)で見られるように、コードを書く(※4)人のことです。※1．ウェブページを作成成するためのマークアップ言語。.※2．ウェブページのデザイン・レイアウトを定義するための規格。※3．Internet ExplorerやFirefox・Safariなどの、インターネットを閲覧するために使うソフトのこと。※4．HTMLコーディングと言います。 HTMLコーダーの仕事仕事の種類と内容HTMLコーダーは普段どのような仕事をしているのでしょうか。ここからは仕事の種類と内容について紹介します。ウェブサイトのHTMLコーディング冒頭でも触れたように、ウェブデザイナーがデザインしたものをブラウザで見られるようにするためにHTMLコーディングしていきます。ここで、Internet Explorer・Firefox・Safariなど複数のブラウザへの対応が求められます。何故なら、ブラウザごとに表示の差違があり、 Internet Explorerで表示されたものがSafariでは表示されないということが起こる上に、ユーザーもInternet Explorerだけを使っているだけではないからです。この複数のブラウザへの対応がHTMLコーディングの一番難しいところであり、これが出来て一人前のHTMLコーダーと言えるところでもあります。

このようにウェブサイトでは改行位置が揃っていないことが多いと思いますが、やはり改行位置が揃っていた方が読みやすく、見た目的にも綺麗で気持ちがいい文章に見えます。

ということで今回は、CSSを使った文章の改行位置を揃える方法の紹介です。

続きを読む "CSSで文章の改行位置を揃える（禁則割付）"

役に立つ！コーディングTips

フローティングメニューの使い方（スクロールするメニュー）

今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。
あまり使う機会はありませんが、覚えておくといざというときに便利です。

それでは早速使い方のご紹介

必要なデータを揃える

まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。

ここではファイル名を下記の通り保存しました。

jquery.js
jquery-ui.js
jquery.easing.js
jquery.scrollfollow.js

ディレクトリはこのようになりました（ jsフォルダの中にダウンロードした jsファイルが全て入っています）。

続きを読む "フローティングメニューの使い方（スクロールするメニュー）"

役に立つ！コーディングTips

IE6でfloatを指定した要素の左右marginが大きくなる（倍になる）

写真をfloatさせてテキストを廻りこませたら、IE6だけ写真の位置が違う！なんて経験ないでしょうか。

ie6での表示 ie7での表示 Firefox3での表示 Safari3での表示

これは特定の条件が揃った際に起こるIE6のバグなのですが…はてさてその発生条件とは。

続きを読む "IE6でfloatを指定した要素の左右marginが大きくなる（倍になる）"

コーディングトラブルシューティング

text-indentが効かない?!

とある案件で text-indet: -9999px で背景を表示させるテクニックを使用したところ、text-indent が効かない現象が起こったため、発生条件・原因・対処法をまとめます。

発生条件

text-indet が指定されている親要素に text-align: right が指定されていると発生します。
恐らくtext-alignが効くブラウザ全てで発生するものと思います。発生を確認したブラウザは、IE6～8、Firefox2～3、Safari2～3、Google Cromeです。
◆サンプル

続きを読む "text-indentが効かない?!"

コーディングトラブルシューティング

Thickboxの使い方 - 画像やHTMLのポップアップをお手軽に！

ThickBoxとはjQueryを使用したAjaxライブラリの一つで、主に画像をページ上に大きく表示させるときに使われます。また、画像だけではなくHTMLファイルも表示することが出来るため、これ一つで画像とHTMLをポップアップ表示（正確には同じページ上にオーバーレイ表示される）させることができます。
◆サンプル

このライブラリの便利なところは、小難しい設定をしなくても使えることや、ポップアップした画像を自動的にブラウザに収まるサイズに縮小してくれるところです。
※HTMLを表示する場合にはサイズを指定する必要があります。

使ってみたい！と思った方のために使い方の手順を下記にまとめました。

必要なデータを揃える

まずは、配布元であるThickBox3.1に行き、Downloadから下記ファイルをダウンロードしましょう。

ファイル名

thickbox.js
thickbox.css
loadingAnimation.gif
jquery-latest.js

リンクを左クリックしてしまうと、ファイルが開かれてしまいますので、右クリックから「名前を付けてリンク先を保存」を選びましょう。
このとき、保存するフォルダは下記の用にしてください。

imagesフォルダの中にloadingAnimation.gifが入ります。この画像データはポップアップ画像を読み込んでいるときに表示されるローディングアニメーションです。

続きを読む "Thickboxの使い方 - 画像やHTMLのポップアップをお手軽に！"

役に立つ！コーディングTips

clearfixを使ってハッピーなコーディングライフを

clearfixってどんなもの？

CSSでコーディングしているときに、背景や線が途中で消えたり、floatした親要素の下マージンがおかしくなることがあると思います。

◆サンプルを表示する

※このサンプルは、floatした要素と回り込みテキストを背景と線が指定された親要素が囲うようにCSSを書いています。

これは、floatした要素が親要素の高さに反映されていないため起きる現象です。
clearfixはこういった現象を解決するための方法です。

続きを読む "clearfixを使ってハッピーなコーディングライフを"

役に立つ！コーディングTips

HTMLとXHTMLの違いはなんだろう？

HTMLとXHTMLについて

HTML4.01: Hyper Text Markup Languageの頭文字を取ったもので、文書を意味付け（マークアップ）しWWW上に発信する共通言語です。HTML4.01はその最新版です。
XHTML1.0: 上記のHTMLをXMLの文法に基づいて再定義したものでHTMLに比べ文法が厳密になっていています。現在では、HTMLに変わりほぼ主流となっています。

HTMLとXHTMLは同じハイパーテキストマークアップ言語であり、文法もよく似ています。そのためHTMLを知っている人なら今直ぐにでもXHTMLでWebページを作ることができます。しかし、似ているせいで「どこが違うのか・何が違うのか」があまり分かり易くありません。そこで、HTML4.01とXHTML1.0の相違点を比較します。

続きを読む "HTMLとXHTMLの違いはなんだろう？"

役に立つ！コーディングTips

IE6.0後方互換モードのまとめ

IE6.0後方互換モードとは

IE6.0後方互換モードとは、古いバージョンの独自仕様または誤った解釈で表示するモードのことです。
通常、この後方互換モードを意図して使うことはあまりないと思いますが、XHTMLの正しい文法としてXML宣言をするとIE6のバグ(※1)で後方互換モードになってしまいます。

※1．正しくは、XML宣言に限らずDOCTYPE宣言の前に、テキストなどが入ると後方互換モードになってしまいます。

続きを読む "IE6.0後方互換モードのまとめ"

役に立つ！コーディングTips

ボックスモデルを理解してコーディングしよう

ボックスモデルの概念

ボックスモデルとはブロックレベル要素がもつ短形領域の概念で、内容・マージン（margin）・パディング（padding）・ボーダー（border）から構成されます。
この概念を覚えておくことでCSSレイアウトがぐんと楽になります。

下図がボックスモデルを図に表したものです。

続きを読む "ボックスモデルを理解してコーディングしよう"

役に立つ！コーディングTips

コーディングスピードを上げるためにやっていることまとめ

コーディングスピードを上げるためにやっていること

コーディングスピードを上げるために、大きく分けて以下の三つに気をつけています。

環境を整える
正しい手順でコーディングする
経験を溜める

1. 環境を整える

何事も基本が大事です。自分がコーディングし易い環境を整えましょう。

◇コーディングツールを用意する: メモ帳一つでもコーディングは出来ますが、Dreamweaverなどのコーディングツールを使用することで、コーディングスピードを上げることができます。
しかし、Dreamweaverは高機能なため起動時間が遅かったり複数のファイルを開きすぎると動作が重くなってしまいます。そこでDreamweaverだけではなく、動作の軽いテキストエディタも用意しておくとベストです。
コーディングツールもテキストエディタも様々なものがあるため、試行錯誤しながら自分にあったものを探してみましょう。
◇ローカルWebサーバを構築する: PHPやCGIなどサーバサイドプログラムを使うときには、ローカルWebサーバがあると便利です。
Webサーバの構築というと大変そうですが、XAMPPを使うことで簡単に構築できます。

続きを読む "コーディングスピードを上げるためにやっていることまとめ"

役に立つ！コーディングTips

綺麗なコードの書き方

はじめに

綺麗なコードを書くためには、以下の二つに気をつけながらコーディングしましょう

統一感
シンプルで無駄のないコード

統一感を出すために

統一感を出すために、コードフォーマットのガイドラインを作ります。

改行の入れ方
タブの入れ方
コメントの入れ方
スタイルプロパティの順番

この4つをガイドラインとして定めることで綺麗なコードになります。

続きを読む "綺麗なコードの書き方"

役に立つ！コーディングTips

クロスブラウザ対応のために抑えておきたい5つのこと

クロスブラウザとは

ここでいうクロスブラウザとは、複数のブラウザでちゃんと見れるようにHTMLコーディングすることです。

1. Firefoxなどの標準準拠のブラウザに合わせてコーディングをする。: 始めに基準のブラウザを決めます。シェアが高く標準準拠したブラウザということでFirefoxがいいでしょう。
基本はFirefoxで見れるように作り、その他のブラウザとの表示の違いが出てしまった場合のみ、CSSハック・条件付コメントを使い、その差をなくします。と言っても表示に差がでるのは、ほとんどIEだけですが。
2. DTD、文字コード、ブラウザの表示モードを統一する。: そのサイトごとに必ず統一しましょう。特に表示モードは顕著に違いが現れるので注意が必要です。また、WinIE6.0ではXML宣言をすると後方互換モードになるバグがあるので注意しましょう。
3. ブラウザのデフォルトスタイルシートを無効化する。: 各ブラウザは独自スタイルを持っていて、それが原因で表示に違いが出てくることがあります。
そのため、全称セレクタなどを使用して margin や padding は 0 にしておきましょう。
4. CSSハック、IE条件付コメントの使い方を理解する: 各ブラウザで表示の違いがあるため、その違いを解消するためにCSSハックやIE条件付コメントを理解しておきましょう。
5. 子孫要素に float の解除に clearfix を使う。: これらを指定しないと、親要素の背景が表示されなかったり、直後の要素との余白などがおかしくなったりします。
clearfixについて詳しくはこちら

役に立つ！コーディングTips

CSSハックこれだけ覚えておけば大丈夫

CSSハックとは

ブラウザごとにスタイルシートの実装が違うことやバグを利用し、特定のブラウザにのみスタイルを指定する手法のことです。

CSSハックの書式

一言にCSSハックと言っても多数あり、それぞれ書式が違います。
しかし、これだけ覚えておけば大丈夫というものを以下にまとめました。

※対象のブラウザは、Win IE5～7、Mac IE5.2、Firefox、Safari、Operaです

◇Win IE5～6、MacIE 5.2

* html スタイル名 {
　　　スタイルプロパティ
}

◇Mac IE5.2

スタイル名 {
　　　/*\*//*/
　　　スタイルプロパティ
　　　/**/
}

◇Win IE7

*+html スタイル名 {
　　　スタイルプロパティ
}

続きを読む "CSSハックこれだけ覚えておけば大丈夫"

役に立つ！コーディングTips

IE条件付コメントまとめ

条件付コメントとはIEの独自仕様でそのコメントで囲われた部分の表示・非表示をバージョンによって分けることができるというものです。
例えば、IE用のCSSを別に用意した場合に、そのCSSを読み込む際に使われたりします。

IE条件付コメントの書式

条件付コメントの書式は、指定のバージョン・指定のバージョン以上・指定のバージョン未満に分かれます。

指定のバージョン:
指定のバージョン以上:
指定のバージョン未満:

6.0 というのがバージョンの指定です。ここの数字を変更することで、対象のブラウザを決めることができます。

続きを読む "IE条件付コメントまとめ"

役に立つ！コーディングTips

スタイルプロパティの記述順番ガイドライン

スタイルプロパティの記述順番にもガイドラインを作ることで、コードが更に読みやすくなります。

記述順番ガイドライン

要素の大きさ・領域・装飾に関するプロパティ

margin
padding
width
min-width
max-width
height
min-height
max-height
background-color
background-image
background-repeat
background-position
border-width
border-style
border-color
outline-width
outline-style
outline-color
list-style-type
list-style-image
list-style-position
display
visibility
overflow
clip

続きを読む "スタイルプロパティの記述順番ガイドライン"

役に立つ！コーディングTips

ブラウザデフォルトスタイルのリセット

コーディングの難しいところとして良く挙げられるものが、複数ブラウザへの対応です。

一口にブラウザと言ってもMicrosoftのInternet Explorer、AppleのSafari、MozillaのFirefoxなど様々なものがあり、そのブラウザごとに表示のされかたが異なってしまっているのが現状です。

その原因の一つとして各ブラウザにデフォルトスタイル（スタイルシート）が設定されているということが挙げられます。
例えば、H1タグで文章をマークアップした際に文字が大きく・太字になるのは、このデフォルトスタイルが設定されているためです。

このデフォルトスタイルをリセットすることで複数ブラウザへの対応が楽になります。

まず、もっとも簡単なものとしてユニバーサルセレクタ（* {style property}）を使用する方法があります。

続きを読む "ブラウザデフォルトスタイルのリセット"

役に立つ！コーディングTips

sIFRで画像を使わずアンチエイリアスが効いた綺麗なテキストを表示する

sIFRとは

sIFRとは(X)HTML内の文字をJavaScriptとFlashを使って画像のようにアンチエイリアスが効いた綺麗な文字を表示する技術です。
また、フォントの種類もこちらで指定したものがどの環境でも表示されるようになります。
対応ブラウザ：WinIE 5.0以上 / Firefox / Safari

この技術を使えば、フォントを何でも使えるようになり更にアンチエイリアスもかかるのでデザイナーの人は喜びます。しかし、無闇に使いすぎるのも容量の肥大化に繋がり、コンテンツの表示が遅くなってしまいます。
また、横並びにすると変な表示なったりブラウザによってフォントサイズが変わってしまいます。この他にも細かいバグみたいなものがあるので、使う箇所は見出しや、ワンポイントに限られます。

続きを読む "sIFRで画像を使わずアンチエイリアスが効いた綺麗なテキストを表示する"

役に立つ！コーディングTips

「後方互換モード」と「標準準拠モード」それに関わるIE6のバグまとめ

最近のブラウザは、その(X)HTML文書がどの仕様・バージョン・文法に従って書かれているかを示す「宣言」を解釈し「標準準拠モード」（W3Cの仕様に準拠）と「後方互換モード」（W3Cの仕様に準拠していない）とを切替えて表示しています。
宣言には「XML宣言」と「DOCTYPE宣言」とがあり、このブログを例にとって見ると以下の二つです。

XML宣言: <?xml version="1.0" encoding="EUC-JP"?>
DOCTYPE宣言: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML文書には「XML宣言」を記述することが推奨されていますが、IE6.0では「DOCTYPE宣言」の前に文字が存在すると、「後方互換モード」になるというバグがあります。
つまり、XHTMLでコーディングをするとIE6.0では「後方互換モード」、その他のブラウザでは「標準準拠モード」と必ず表示に違いがでます。
文字コードがXMLのデフォルト値である、UTF-8かUTF-16の場合「XML宣言」を省略できることになっていますが、HTML-lintだと点数を引かれたり、どうしてもXML宣言を外せないという場合を考え、「後方互換モード」と「標準準拠モード」のどちらで表示しても対応出来るコーディングテクニックを覚えましょう。

役に立つ！コーディングTips

IE5.5・IE6で半透明PNGを使いこなす

IE5.5・IE6が半透明PNGに対応してないために、半透明を使用したデザインのコーディングを諦める（または妥協）という苦い経験をしたことはないでしょうか。
そんな人のため（私のためでもありますが・・・）に、IE5.5・IE6で半透明PNGを使う方法をまとめました。
半透明PNGの使い方を覚えて頼れるコーダーを目指しましょう。

※サンプルを確認するためにはIE6でご覧ください。

IE独自拡張のfilterを使う

サンプル（使用前）

サンプル（使用後）

◇良いところ: ・Java Scriptを使わず手軽に使用できます。
◇悪いところ: ・CSSで背景に指定したものには使えません。
・クリッカブルマップが使えません。
・div などのタグで対象画像を囲うため、場合によっては無駄なタグを追加する羽目になります。
◇使用時の注意点: ・対象画像の幅・高さをCSSプロパティの width と height で必ず指定しましょう。

◆サンプルを表示する
 ◆サンプルデータをダウンロードする

続きを読む "IE5.5・IE6で半透明PNGを使いこなす"