headに以下の呪文を入れたが効きません。
|
1 2 3 |
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
メディアクエリは
|
1 |
<link href="css/page.css" rel="stylesheet" type="text/css" /> |
こんな感じでリンクしてあるのですが、これだとダメなんでしょうか？
なんかリンクに問題があるような…..
いろいろやりましたが問題解決に至らずです。
明日の勉強会でお願いします。
画像や文字を半透明にするには、今まではpngで書き出してましたが、それらはcss3で出来るようになりました。便利ですねー。
|
1 2 3 4 |
<section> <h1>見出し</h1> <p>テキスト</p> </section> |
sectionに背景#fffでopacity:0.4にするとこうなる。
sectionの中にあるhlとか画像とか全部が半透明。
文字や画像はそのままで、背景色の白だけ半透明にするには 続きを読む
レスポンシブWebデザインをしていると、スマートフォン向けに指定したCSSの値を、PC向けCSSではリセットしないと上手くいかない（？）のような場面に遭遇します。
そんな時、CSSの値に初期値指定してリセットする方法を知っておくと役に立ちます。
特に目新しいものはありませんがレイアウトをする上で、これからお世話になりそうなので自分用メモです。
これもよく使うとか、知っておくと良いよ！というものが他にもあったら教えていただけると嬉しいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* 幅に関連した初期値の指定 */ .example { width: auto; } .example { max-width: none; } .example { min-width: 0; } /* 位置に関連した初期値の指定 */ .example { position: static; } .example { float: none; } /* その他 */ .example { overflow: visible; } |
「max-width」の初期値が「none」に対して、「min-width」の初期値は「0」です。
プロパティ名が似ているので同じ初期値を指定してしまいがちです。
間違えやすいポイントかと思いますので、注意が必要ですね。
あと番外編メモとして、リセットではありませんがIE6以外のブラウザ向けに指定を行いたい場合、下記のような記述を使うと便利です。
セレクタを「>」で区切る子セレクタを対象とした記述方法は、IE6には対応していないので、結果としてIE6以外のブラウザに向けた指定となるわけです。
|
1 2 3 4 |
/* 子セレクタで区切り、IE6以外のブラウザ向けに指定を行う場合 */ html > body .example { width: auto; } |
現在仕事で制作中のサイト。２年前に制作したサイトを部分的にリニューアルしています。
自分のサイトにテストでアップしてクライアントさんに確認してもらっています。
１つ指摘された事があります。
IEでの、下記のページの印刷プレビューが出来ないそうです。他のページは問題ありません。ちなみにクライアントさんはwindows7です。
http://nobu-69.com/test_site/nolimits201304/nyukaigo.html
僕も確認してみました.
windows xp でモードをie7にするとプレビューが出来ません。
windows7 でモードをie7にするとプレビューが出来ません。
その他（ie8,ie9）は問題ありません。どうやらie7で見た時だけ印刷プレビューが出来なくなるようです。
原因の検討がつきません。何が考えられるでしょうか？
よろしくお願い致します。
—————————————-
説明不足でしたので追記します。
上記画像のように真っ白で何も表示されません。そして画面下の赤マル内の数字（ページ数を表す）の分母の部分が1,2,3,4,…….止まらなく増え続けます。
という状態です。
—————————————-
タカハシ先生のアドバイスを基に作業してみました。
①>1.他のサイトのページを印刷プレビューしようとしたらどうなるか？
制作中のサイトの他のページは問題ありませんでした。
問題があるのはhttp://nobu-69.com/test_site/nolimits201304/nyukaigo.htmlのページのie7で見た時のみです。
②>2.cssのmedia typeををscreenに限定したらprint時にcssは適用されなくなるはず。
それでどうなるか確認。
cssが切れた状態でプレビューされましたので、指摘にある通りcssのどこかに問題があるのかと思い調査しましたが、おかしな所は見当たりません。
③対策としてhtmlのheadの中のcssのリンクを以下の様にしてみました。
|
1 2 |
<link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/nyukaigo.css" rel="stylesheet" type="text/css" media="print" /> |
そしたら上記の「説明不足でしたので追記します。」の真っ白で分母が止まらない状態に逆戻り。
レスポンシブWebデザインを考える際に、IE8以前（IE8～6）の古いブラウザについて、どのように対応するかを考えてみました。
どうすれば、手間が少なく古いブラウザへの対策ができるのか？
レスポンシブWebデザインを作る際の覚書です。
考えるにあたって、下記の条件のクリアを前提としました。
日本ではまだまだWebページを見るためにIEを使う人が多いです。
デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。
その辺りの事情は、見る人にはなかなか理解してもらえない現状もあるので、jsライブラリの利用で透過png画像やある程度のCSS3を使えるようにして解決してしまおうというワケです。
また、制作者としてはモバイルファーストも意識したいという気持ちあったりします。
レスポンシブWebデザインと言うと、デバイスごとに異なるデザインになることに意識が向きがちです。
過度に「レスポンシブ」というキーワードに振り回されていないか、制作の際に必要なこと不要なことをざっくりと切り分けてみました。
異なるデバイス間での表示に適したデザインにすることは必要なことですが、PCでブラウザを幅を変えた時にデザインが変わることは必ずしも必要なことには思えませんでした。
その理由としては、PCではわざわざブラウザの幅を狭くして、タブレット用のデザインでWebページを見ることはほとんどないからです。
「必要なこと」「不要なこと」の切り分けができれば、闇雲なレスポンシブに走ることもなく、デザイン、技術の面で必要な対応が見えてきます。
「不要なこと」で切り分けたことを元に、PCでは固定幅デザインを見せるようにします。
また、IE8以前のブラウザを搭載したデバイスは、PC以外には無いことも考慮すると、無理にjsライブラリでIE8以前の環境で@media queryに対応する必要はなくなりますね。
制作の際はIE8以前ブラウザ向けに、固定幅の専用CSSを用意して条件分岐コメントを使って読み込めば大丈夫です。
（モバイルファーストなCSSの記述にしなければ、固定幅専用のCSSを用意する必要はなくなりますが、この辺は個人的なこだわりです。）
他に気づいたこととしては、@media queryに対応していないブラウザは「background-size」にも未対応です。
そのため、フルードイメージへの対応も難しく中途半端になってしまいます。
Webサイトを制作する上で、画像を全く使わないということもほとんどないので、フルードイメージに対応出来ないブラウザは、@media queryにも対応しないという制作方針にしてしまうのも１つの方法かなと考えました。（でも、border-radiusなどのCSS3は使いたいので、その辺はjsライブラリで何とかしてしまいます）
画像について考えると、「Retinaディスプレイとか高解像度ディスプレイはどうするの？」という疑問が出てきますが、長くなりそうなので、他の記事としたいと思います。