バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


スポンサーサイト

カテゴリー:-

一定期間更新がないため広告を表示しています

0
     | - | | | pookmark

    CSSの基本2

    カテゴリー:技術的なところ
    さて、此間こないだ[CSSの基本1]では、まずは基本をおさらいと言いながら結構初歩的な内容はすっ飛ばした感が否めず、予定を変更してもうちょい根幹の部分を掘り下げてみようかな〜と。 と言ってもCSS(スタイルシート)が何故必要なの?とか、文書構造に関するHTMLとの関係性なんかはそれなりに詳しく解説してるページをご覧いただくとして・・

    参照:CSSとは?−CSSの基本 by HTMLクイックリファレンス

    参照:スタイルシートとは 【 style sheet 】 by IT用語辞典 e-Words


    □基本構文
    セレクター {
      プロパティー : 値 ;
      プロパティー : 値 ;
      プロパティー : 値 ;
    }

    と、一応なっててDreamweaverとかでも勝手に初期フォーマットでこんな形になります。が、余分な空白(スペースやタブ空間)はちょっとでも少ない方が読込時の負担を減らすんではなかろうかという観点から、私は下記の省略型を採用してますが、そんなに差は無いと思われるため、あくまでお好みです。

    セレクター { プロパティー:値; プロパティー:値; プロパティー:値}

    ※因みに『プロパティー:値』の1セットで1つの宣言となりますが、その区切りの半角セミコロン「;」、最後の宣言の後はもう区切る必要は無いので要らないんですよ、実は!
    みなさん残されてるのは、誰かが残してたから??それとも後々何か追加する時のための準備でしょうか?いや、もしかして残してても問題ないんやったら、わざわざ削除するのが面倒とか・・・


    □CSS内のコメント文
    開始記述:「/*」、終了記述:「*/」なので、この間に書かれたものはすべてコメント扱いになります。途中で改行して複数行になっても問題なし。おまけに基本構文の宣言の途中でも有効!
    body { font-size:88%; line-height:1.5} /* ここはコメント部分です */
    h1 {
     font-weight:normal;
     /*
     margin:15px 0; → 一時的に構文中でコメントアウト=無効化して様子をみてたりします。
     */
     color:#666
    }
    


    □@規則いろいろ
    @charset (文字コード宣言)
    参照:@charset by MDN (MOZILLA DEVELOPER NETWORK)

    外部スタイルシートの先頭にまず記述が必要なのがコレ。無ければ無いで(X)HTML内の文字コード宣言と外部スタイルシートのファイルの保存形式の文字コードが合致してれば大丈夫やと思いますが、後述のようにおかしなことになったりならなかったりと。まぁよく使うのが次の3つでしょうか。
    @charset "UTF-8";
    @charset "Shift_JIS";
    @charset "EUC-JP";
    先頭なので、他の@規則より前に記述しなければなりません。そして半角スペースなどの空白とかが前に入っててもアウトです。ご注意を。

    と、ここまではよく教本なんかに載ってたりする内容。本題はここからです。制作を始めた最初の頃、いくら文字コードの宣言をしてもDreamweaverで開くとフォント指定した日本語表記の部分とかが文字化けしてしまうよ〜!んでちゃんとブラウザーに反映されへんよ〜!!って長いトンネルに入り込んでしまったことがあります。
    そしてDreamweaverに頼ってた自分の愚かさに気づかれます。EUCやUTFを扱えるフリーのテキストエディターでCSSファイルを開いてみると・・!!なんと、ファイル内では“@charset "EUC-JP";”とやっときながら、CSSファイル自体はShift_JIS形式で保存されてたんです!・・何と愚かな。

    コレ、実は今もよく見かける現象で、CSSをエディターで開いた時に文字化けしてる箇所がある時は大体、(X)HTML内の文字コード宣言と(X)HTMLファイル自体の文字コード形式の不一致、または(X)HTML内の文字コード宣言と読み込んでる外部CSS内の文字コード宣言の不一致、または外部CSS内の文字コード宣言と外部CSSファイル自体の文字コード形式の不一致が原因になってることがほとんどです。

    一言で文字コードと言っても結構根っこが深くて、(X)HTMLにしてもCSSにしても基本は英文字。そこに日本語を表示させようという難しいことをやってるんやからしゃーないっちゃぁ、しゃーない。日本語環境は元々国内の独自の優れた技術開発でワープロ文化が発展した経緯もあって、今でもOS基幹で表示されてる内容は、実はPCがモニター上では「シフトJIS」で表示させるようになってたりするんですよねー。日本語環境=「JISコード」をベースにした「シフトJIS」は大前提なので、電子メールでも「JISコード」の“iso-2022-jp”っていうエンコードがいまだに主流だったりするのでございます。

    @import (他の外部スタイルシートの読込)
    参照:@import by MDN (MOZILLA DEVELOPER NETWORK)

    @charsetの次に先行して記述する必要あり。URI()関数を使用してメディアタイプと併せて指定可能。書式としては次のよな感じです。
    @import url(../css/style.css);
    @import "../css/style.css";
    @import url(../css/style.css) screen, projection, tv;
    @import "../css/style.css" screen, projection, tv;
    個人的には当初からあんまし使ってません。外部スタイルシートの数が増えれば、まぁそれなりに便利なんかな〜なんて思ったりもしてましたが、Movable Type や WordPress を見るとどうも読込に相当な時間を要してる気がして(単なる気のせいか?)管理もしづらいような気もしなくもなく・・何となーく使いませんです。
    と思ってたら、調べたりしていただいてる方もいらっしゃるようなのでコレを機に下記ページなどご参照あれ。

    参照:CSS @import を使用しない Google PageSpeed Insights by ALLEGLO marketing

    参照:【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる by Developers.IO

    参照:[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか by coliss

    参照:CSSインポート(@import)の注意点 by Web覚

    ↓確かにスマート!やとは思うんですが・・どうでしょう?
    参考:(ちょっとメモ)link よりスマートな CSSの @import と @media by ほんっとにはじめての HTML5

    @media (対象のメディアに対するスタイル指定)
    参照:@media by MDN (MOZILLA DEVELOPER NETWORK)

    例えば下記のように(X)HTMLの<head>〜</head>内の<link>要素のmedia属性でメディアタイプを指定する場合と同様に、外部スタイルシートでも@mediaを使用してメディアタイプの指定ができます。
    <link rel="stylesheet" type="text/css" href="abc.css" media="screen">
    <link rel="stylesheet" type="text/css" href="abc.css" media="screen, projection"> <!-- 複数指定可 -->
    
    @media print { /* 印刷用にスタイルシートを使い分けたい時などに重宝! */
     div.print { font-size:12px; width:640px;}
    }
    
    @media screen, print { /* 同様に複数指定可 */
     div.sc_pri { font-size:1em; width:auto;}
    }
    
    ↑この外部スタイルシートの“@media print”は、印刷する時用にページレイアウトを変更したい時なんかに本当に重宝しますよー!!「いちいち印刷した時にメニューなんか要らんねん、メインのとこだけでエエねん!」なんて仰るクライアント様やこちらからの提案材料でまだまだ使えます・・と思います!

    余談ですが、その昔、インターネットの世界に Internet Explorer(以下IE)のバージョン『6』という永らく君臨し猛威をふるった脅威のバージョンのブラウザーがございました。もはや都市伝説と化した『IE6』ですが、一時期そのシェア率は全世界で90%近くを誇り、まさにウイルスの恰好の的、いや、もとい、時代はまだHTML4.0やHTML4.01が主流でXHTML1.0の勧告に備え始めた頃で、バグだらけのそのメジャーブラウザーのレンダリング仕様に四苦八苦しながらページ制作を余儀なくされる日々が続いておりました。
    そんな時に、あるクライアントから、「A4のプリンター買ったんやけど、作ってもらったページ、印刷したら端っこ切れるねん。何とかして〜なー、なあー」というご依頼。正確には依頼じゃなく、良く言えばアフターフォロー、つまりタダで何とかしろと・・
    結局、私がやったのは、サイト全ページのコンテンツ表示幅をMAX「640px」に統一して作り直すという方法でした。当時のメジャーなプリンターの主流な解像度と画面解像度との関係やら何やらいろいろ調べて、どうやら640pxあたりやとうまくA4縦印刷で切れずに印刷できるらしいということも判明して、そんなところに落ち着いたんです。大体なんでそんな面倒臭いことをせなアカンかったかというと・・・今では考えられないんですが『IE6』、印刷時の自動縮小(倍率拡縮)機能が無かったんです!なので常にデフォルトで100%印刷の状態やったという訳です。IE7以降から印刷時の自動縮小機能が搭載されたんですが、実際Yahoo!のトップページでもいいので印刷プレビューで100%表示してみてください!ひどいことになってますんで。『IE6』はその状態がデフォルトで、ほとんどのユーザーはほぼ何もできへんままやったんですねー、本当にひどい話です。
    いや、本当にひどい話でしょか??Webページって最初から印刷を目的に作ってましたっけ?ってな疑問も当時はあったりなかったりでクライアントともめることもありました。ただ情報収集の観点から見ると「プリンターはインターネットとは関係ないもの」とは言い切れず、結局その後も『IE6』の印刷問題は、17インチモニターが主流になって解像度も多様化しつつある中、コンテンツ表示幅自体も800pxや900pxの横幅で制作されたWebサイトが増えてきて、表示幅「640px」だけやと対応が難しくなり、最終的に外部スタイルシートの“@media print”で制御するという手法を取るようになっていました。

    今もその名残で、私が制作したWebサイトの外部スタイルシートには下記のようなソースが記述されているかもしれません・・今はもうあまり意味がないのかもしれません。
    ↓↓↓
    /* IE用印刷設定CSS */ 
    @media print {
     body {
      _zoom:64%; /* WinIE only */
     }
    }
    

    @page (印刷時の限定されたスタイル指定)
    参照:@page by MDN (MOZILLA DEVELOPER NETWORK)

    残念ながらCSS2からの勧告で、IE8以上でやっとサポートされることになった印刷時の設定です。ただ、設定できるプロパティーが余白とほぼ改ページの設定のみというお粗末な仕様であんまし登場する機会がございません。

    @規則は他にもあるんですが、この辺りや、この辺りの解説をご覧いただくとして、主だったものとしては次が最後かな〜? そう、いよいよ近頃めっきり頻繁に使われ出してきているコレ!
    ↓↓コレですよ〜!!

    @font-face (Webフォントの指定)
    参照:@font-face by MDN (MOZILLA DEVELOPER NETWORK)

    詳しいことは省きます。Webフォントの説明や設定方法とかは是非とも下記ページなどをご参照あれ!

    参照:Webフォント by memo (め も)352

    参照:実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ by Web制作会社 style

    参照:マルチブラウザ対応の無料日本語WEBフォントを使う(font-face設定方法) by RABBIT PUNCH

    参照:IEにも対応したWebフォントの使い方について by memocarilog

    参照:安全な@font-faceの書き方 by Hail2u.net

    参照:IEでもWebフォントが使えることを知ったので勉強してみました by Webpark


    個人的には[フォント指定はどれが正解?]の記事でも少し触れましたが、発想は素晴らしくどんどん取り入れたい技術ではあるんですが、すべてのWebページ閲覧者がその恩恵を受けるにはハードルが高い現実的な壁がまだいくつも存在するので、今のところはプライベートなページやボリュームの少ないサイト向けかな〜?なんて思ったりしてます。

    問題点としては以下のとおりかと。

    1)日本語(ひらがな・カタカナ・漢字)を含む和文フォントの場合、提供されるフリーフォントが英文(外国語)フォントに比べて圧倒的に少なく、使いたいフォントでライセンス費用が発生する場合がある。

    2)和文フォントの場合、英文フォントに比べてデータ容量が大きくなることが多く、サーバーからの読込(ダウンロード)に時間が掛かる=サーバーに負荷をかけてしまう可能性があり、ブラウザー表示もしばらくの間ホワイトアウトする可能性がある。(データ容量の大きいFlash読込時のローディング表示と同様の工夫が必要になる)

    3)フォントデータをアップロードするサーバー=利用するサーバーや利用形態(専用サーバーか共用サーバーかなど)によってダウンロード時の転送速度が異なるため、サーバー環境と閲覧のタイミングが閲覧者側の表示速度に影響を及ぼす。

    4)閲覧者が契約しているインターネット回線接続業者(プロバイダー)及び契約プランによってダウンロード時の通信速度が大きく異なるため、閲覧者側の表示速度に影響を及ぼす。


    3)は、クライアントと協力して何とか解決できたとしても、4)は大多数の閲覧者側の環境に依存するので、力技でもこればっかりはどうしようもできへん。いくら「ブロードバンド全盛期な時代でクラウド全開!」とか言っても断線します。アクセス集中で接続障害も起こります。安定した接続がウリのケーブル回線でも断線したり障害も発生します。絶対はありません。3)4)共に社内の閉ざされたLANの中だけで利用するとかやとクリアできるかも?

    **********

    ・・また、何か大事な基本的なことにあんまし触れんかった気が・・・次回こそスタイルシートの読み込み方や、セレクターの種類や、一度はハマる“marginプロパティーの罠”なんかをば。
    0
       | 技術的なところ | | | pookmark

      スポンサーサイト

      カテゴリー:-
      0
         | - | | | pookmark
        コメント欄
        コメントする


        ※メールアドレスは公開されません

        ※Name:欄に入力したお名前にリンクが設定されます




        この記事のトラックバックURL
        http://stressful.jugem.jp/trackback/59
        トラックバック

        Button of Go to Home

        Button of Back to Top