-HTML・CSS

CSS3と均等貼り付け

出来ない現時点でできないようです。IE以外
CSS3.0に実装予定だという情報があふれているが、Chromeでも効きません
こんな風にかくらしいがIE以外効かないのでサイト作成には残念ながら使えません

text-align: justify;
text-justify: distribute-all-lines;
text-justify: inter-ideograph;
line-break: strict;

均等貼り付けする必要があったので、フォントファミリーを、等幅フォントに指定して対応しました

  font-family: Consolas, 'Courier New', Courier, Monaco, monospace;

通常は日本語のサイト(欧文と日本語が混ざるので)は、等幅フォントは使わず、pro、P のつくプロポーショナルフォントを使っています。

Media Queries まとめ

href=”http://katoshun.com/blog/rwd-20130127.html
ここから引用
ものすごくまとめられているのでそのまま引用させてもらいます

レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた

2013年01月27日
Webデザインお役立ち情報

ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。

今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。

記述方法の種類

一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です)

1. PCのスタイルから記述していく方法

デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。

/* デフォルト:980px以上用(PC用)の記述 */ 
@media screen and (max-width: 979px) { 
/* 979px以下用(タブレット用)の記述 */ 
} 
@media screen and (max-width: 767px) { 
/* 767px以下用(タブレット/スマートフォン用)の記述 */ 
} 
@media screen and (max-width: 479px) { 
/* 479px以下用(スマートフォン用)の記述 */ 
} 

2. スマートフォン用のスタイルから記述していく方法

デフォルトでスマートフォン用のスタイルを定義し、タブレット/PC用のスタイルをMedia Queriesを使って上書きしていくモバイルファースト的な方法です。

/* デフォルト:479px以下用(スマートフォン用)の記述 */ 
@media screen and (min-width: 480px) { 
/* 480px以上用(タブレット/スマートフォン用)の記述 */ 
} 
@media screen and (min-width: 768px) { 
/* 768px以上用(タブレット用)の記述 */ 
} 
@media screen and (min-width: 980px) { 
/* 980px以上用(PC用)の記述 */ 
} 

3. それぞれの画面幅個別に指定する方法

それぞれの画面幅毎に全く別のスタイルを定義する方法です。

@media screen and (min-width: 980px) { 
/* 980px以上用(PC用)の記述 */ 
@media screen and (min-width: 768px) and (max-width: 979px) { 
/* 768px - 979px用(タブレット用)の記述 */ 
} 
@media screen and (min-width: 480px) and (max-width: 767px)  { 
/* 480px - 767px用(タブレット/スマートフォン用)の記述 */ 
} 
@media screen and (max-width: 479px) { 
/* 479px以下用(スマートフォン用)の記述 */ 
} 

実際には、部分的に3を用いつつも、1か2のどちらかを選択することになるかと思います。

実際どれがいいの?

モバイルファースト的な観点では、スマートフォンのスタイルから定義する2の方式が良いかと思います。ただ、IE8以下の対応を考えた場合、つまずいてしまいます。

IE8以下では、Media Queriesは使えませんでの、以下のいずれかの対応をする必要があります。
Respond.jsやcss3-mediaqueries-jsを使って、IE8以下もレスポンシブ対応を行う
IE8以下はPCでの表示はサポートするが、レスポンシブ対応はしない
IE8以下は完全除外!

完全除外は現状のIE8のブラウザシェアから考えて、制作の現場では取りにくい選択肢です。Respond.jsやcss3-mediaqueries-jsを使う手法はよくとられていますが、そもそも古いIEでのスマートフォンサイズの表示は、ごく一部のWindows Phoneを除いて想定しにくく、サポートすべきかについては疑問が残ります。

現状のブラウザシャアや制作の効率性を考えると、IE8以下でのレスポンシブ対応はしないというのが現実的ではないかと考えています。

ただ、IE8以下では、Respond.jsやcss3-mediaqueries.jsを使わないと、Media Queriesは解釈されず、デフォルトの記述のみが適用されます。つまり、モバイルファースト的な記述をすると、IE8以下ではモバイル用の表示がされてしまうのです。さすがにこれではプログレッシブ・エンハンスメントの範疇も超えています。

Respond.jsなどを使えばきちんと表示されるのですが、今度はすべてのMedia Queriesが読み込まれるため、IE8以下でも画面幅ごとの対応が必要となってしまいます。

一つの解決策として、HTMLで分岐させて、モダンブラウザ用とIE8以下用とでCSSを分けてしまうという方法も考えられます。

<link href="common.css"type="text/css" media="all" /> 
<link href="modern.css"type="text/css" media="all and (min-width: 100px)" /> 
<!--[if lt IE 9]> 
<link href="ie8.css"type="text/css" media="all" /> 
<![endif]--> 

まず、基本的なスタイルを定義したcommon.cssを読み込ませます。
次にレスポンシブ対応のCSSを記述したmodern.cssをMedia Queriesを使って読み込ませます。Media QueriesはIE8以下では解釈されないため、IE8以下には読み込まれません。
一方、ie8.cssにIE8以下用のスタイルを定義し、分岐させてIE8以下のみに読み込ませます。

これであれば、モバイルファースト的な記述でも古いIEに対応させることができますが、PC用の表示をmodern.cssにもie.cssにも記述しなければならず、制作面・運用面で効率的とは言えません。

まとめ

これらのことを考慮すると以下のようになります。
基本的には、PC用のスタイルから記述していく
IE8以下のブラウザにもレスポンシブ対応する場合には、スマートフォン用のスタイルから記述してもOK

ただ、「これがベストの解だ!」ということではなく、現状のブラウザシェアやMedia Queriesへの対応状況、制作面・運用面での効率性を考えると、消去法的に今のところこれがマシなんじゃない?程度のものです。
現在はHTML5やCSS3への移行期で、ブラウザの対応状況もマチマチです。またレスポンシブWebデザイン自体、まだ手法が確立したとは言えず試行錯誤が続いている状況です。ベストな手法というのはその時々によって変わっていくものですので、機会がありましたら、また整理してみたいと思います。

パララックス

今更かもしれませんが、前から気になっていました。
暇を見つけては勉強しているのですが、PCのブラウザーではおもしろいなぁというサイトも、スマホで確認すると全然ダメというパターンが多いので腰が引けていました。スマホだと全然見れないというパターンには、効果がおもしろい分とてもガッカリしてします。

スマホでも見れるサイトを紹介してくれているところを見つけたので引用させてもらいます。

http://fb-research.net/facebook/2012/07/_paralla/
こちらのサイトです。

NIKE「CHOOSE YOUR FIGHT」
これを見て衝撃を受けました。
やはりPCもスマホもバッチしOKですが、サイトのURLを変えています。
やっぱり普通にすれば、同じ仕組みではダメなのか・・・・
PCのURLでもモバイルに飛ばされるので気づかないのですが・・・

PC
http://www.nike.com/jumpman23/aj2012/
スマホ
http://www.nike.com/jumpman23/aj2012/mobile/

—————-

レッスン動画

http://dotinstall.com/lessons/parallax_html

clearfix(度忘れメモ)

暗記していたのですが度忘れしてしまいました・・・・
メモを見ると覚えないのですが、仕方がない。。。φ(..)メモメモ
ちなみにclearfixつけるBOXを間違えるとうまくいかないよ・・・(親につける)

.clearfix:after {
content: “.”; /* 新しい要素 文字は何でもOK */
display: block; /* 要素をブロックに */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix { /* IE6、7 :afterサポートなし対策 子要素の高さも含めて算出するバグ利用 */
min-height: 1px;
}

/* IE6以前min-heightサポートなし対策 「* html」をつけるとIE6以前のみ有効(Starハック)*/

* html .clearfix {
height: 1px;
/* 以下macIE4,5のみのハック */
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

文字実体参照

参考「HTMLで使える文字実体参照

一部を掲載

数値文字参照 文字実体参照 備考
コード 文字 実体名 文字
&#34; &quot; quotation mark = APL quote
&#38; & &amp; & ampersand
&#60; < &lt; < less-than sign
&#62; > &gt; > greater-than sign

ほかにもいろいろ・・・・

&ensp; &#8194; 半角スペース en space nの字の幅の空白
&emsp; &#8195; 全角スペース em space mの字の幅の空白
2 / 41234