CSS関連の記事一覧




●印刷にもWebにもそれぞれのルール

私はメインの業務が印刷データの処理を行うDTPオペレーションからWeb制作になってから、日が長いですが(とはいえ、つい先日も出力トラブルのあるデータの解析などをやっていましたが)印刷系のルールと、Web系のルールって、似ているようでかなり違うことを実感しています。


ここでよく勘違いされて困ることが、印刷系とWeb系でデザイン・制作をする際に、同じアプリを使用するということです。

IllustratorとPhotoshop、これは印刷でもWebでも必ず使うアプリです。

だから、印刷でIllustrator・Photoshopを使っていると、Webデザイナーになるのも簡単なのでは?と思ってしまいがちです。

そこが落とし穴!


印刷は印刷なりのルールがありますよね。


  • 裁ち落としを付ける
  • 画像の解像度は350dpiで
  • カラーはCMYKで
  • フォントはアウトライン化で
  • リンク画像はユニークなファイル名に

  • 他にもたくさんあります。こうしたルールが分かっていないと、「うわっ、データは来たけど結局手直しが必要…」とか「どこをどう直せばここが直るんだ?」とか「思ったカラーにならないけどどうするの?」とか、最終的にできあがる成果物(=印刷物)の品質に悪い影響が出たり、作業効率が悪くて後工程の人が納期や作業の面で辛い思いをしたりします。

    だからルールを学んで、品質を向上させ、作業がスムーズに流れるようにするのです。


    WebにもWebなりのルールがあります。

    そんなルールを現場のプロから学べる書籍が『プロにまなぶ現場の制作ルール84』(北村崇・浅野桜著、エムディエヌコーポレーション発行)です。

    20160416-プロにまなぶ現場の制作ルール84-01

    黄色い目立つ帯にはこう書かれています。

    PhotoshopやIllustratorでのデータの正しい作り方、納品するときの指示方法など、Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめた、Webデザインの新しいルールブック。

    ルールを知ることで、Webデザイナーがどのような仕事と品質を求められているのかが分かる本です。

    記事の続きを読む




    20160217-日本語WebフォントをCSSでfont-family指定-00

    割と間違っている人は多いのかも?


    モリサワのWebフォントサービス「TypeSquare」を最近ようやく使い始めて、これは便利だと思い始めている今日この頃、みなさんいかがお過ごしでしょうか。



    ●目次



    ●ダメなCSSの書き方

    さて、既にタイトル落ちしている気もしますが、TypeSquareでは、

    font-family: "リュウミン R-KL","Ryumin Regular KL";
    font-family: "A1明朝","A1 Mincho";
    font-family: "中ゴシックBBB","Gothic Medium BBB";

    と、font-familyに同じフォントの「日本語のフォント名」と「英字のフォント名」を並べて書いてはいけません。

    記事の続きを読む



    20160212-Webフォントを滑らかにするCSS-00

    目次



    ●ブラウザーによってWebフォントの見え方が違う

    今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


    元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

    Webフォント - Wikipedia(Webフォント - Wikipedia)


    意外と導入は簡単で、そんなに読み込みが重く(遅く)感じることは少ない気がします。

    ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


    Windowsのブラウザーでは、ざっくり言うと、

    • Internet Explorer 11:キレイ
    • Edge 13:そんなにキレイではない
    • Chrome 48:そんなにキレイではない
    • Firefox 44:そんなにキレイではない

    と、こんな感じです。

    ※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


    意外にもInternet Explorer 11はそのままでOKです(笑)。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

    記事の続きを読む



    20150909-BootstrapとGoogleカスタム検索のCSS-00

    みなさん、Bootstrap使っていますか?

    私はこれがないともうWeb制作ができないほど毎回使っています(笑)。



    ●BootstrapとGoogleカスタム検索は相性が悪い?

    Bootstrapは非常に便利なのですが、Googleカスタム検索(Custom Search Engine:CSE)を使うと、こんな表示になりませんか?

    20150909-BootstrapとGoogleカスタム検索のCSS-01

    入力フォームは崩れ、虫眼鏡アイコンが入った検索ボタンは縦に潰れてアイコンが見えない…!


    今回はこうした表示のトラブルを解消する方法を紹介します。

    記事の続きを読む



    asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。

    トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー(bgcolor="#c0c0c0")で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。

    Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch(Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch)

    20150822-BlinkタグをCSS3で再現-02

    画像出典:Asahi NewsPaper Index(Asahi.com)


    懐かしいですね。灰色の背景とか、バナーの感じとか、微妙に英語とか。



    ●昔よく使われていた文字を点滅させるタグ「blink」

    このNetscape 1.0ネタではないですが、テキストを点滅させるblinkタグが昔のウェブブラウザーにあって、ホームページでよく使われていました。

    こういうものですね。(アニメーションGIFです)

    20150822-BlinkタグをCSS3で再現-01

    何か懐かしさを感じる表現ですね。

    最近のブラウザーではこのblinkタグに対応していないものがほとんどですが、これを新しい技術(CSS3)を使って再現してみます。

    記事の続きを読む



    20150801-Jimdo管理画面に文字を追加する-01

    画像出典:ホームページ作成サービス - Jimdo(ジンドゥー)


    ウェブサイトが簡単に作れるJimdoのロゴや管理画面が新しくなりましたね。



    ●新しい管理画面は分かりやすくなった

    さて、新しい管理画面ですが、以前Web担当者フォーラムのUX侍にてJimdoを取り上げたときにアイコンのラベルの常時表示した方が良いという話が出ていました。

    今回はこのUX侍の提案に沿った改善になっています。

    ▲▲ぅ灰鵐瓮縫紂爾離薀戰襪肋錣防充┐垢

    森田:あと、アイコンメニューのラベル文字は、常に表示しておくのが得策だと思います。マウスオンで見せるのでは、かっこいいかもしれないけれど、ユーザーは覚えられないし、メニューの意味がわからなければ、ユーザーは毎回マウスオンしないといけません。

    他にも、グラフのマークは、エクセルとかパワポを使っているユーザーは、図版が入れられるのかって勘違いしてしまいそう。アイコンは、どうしてもそういうミスマッチが起きるケースが多いので。アイコンを小さくしたとしても、ラベルを表示すべきだと思います。

    高畑:メニューのラベルの常時表示は対応検討します。

    スマホでウェブサイトを作る人増加中! UIリニューアルのカギは「モバイル対応」 Jimdo × UX侍 | UXサムライ(Web担当者Forum)


    ですが、以下の2つだけなぜか対応せず。ディスプレイっぽいアイコンと、電源マークのアイコン。

    これ、どういう機能か想像できますか?

    20150801-Jimdo管理画面に文字を追加する-01


    実は「編集しているページのプレビュー」「ログアウト」です。

    プレビューは分かりづらすぎでしょ…。なぜこの2つはラベルの常時表示にしなかったのか、理解ができません。


    というわけで、この2つのアイコンも常時ラベルを表示する方法を紹介します。

    記事の続きを読む



    20150507-Evernote-ClearlyでNoto-Sans-Japaneseを設定する方法-03

    先日「Webを読みやすくするEvernote Clearlyの表示フォントを游ゴシック体・游明朝体にする設定」というエントリーで游ゴシック体・游明朝体を指定する設定を書きましたが、Windows 8.1では游ゴシック体・游明朝体がインストールされていますが、Windows 7では游ゴシック体・游明朝体がインストールされていないので、設定しても意味がありませんでした。

    しかし、Clearlyの表示フォントがCSSで指定できるということは、Webフォントを指定することも可能です。

    Webフォントなら、サーバーに日本語Webフォントを用意しておけば、どの環境でも同じフォントで表示できます。


    というわけで、今回は、Clearlyの表示フォントを日本語Webフォント「Noto Sans Japanese」(別名:源ノ角ゴシック※)にする方法を紹介します。

    ※正しくは源ノ角ゴシックではありませんが、そっちの方が分かりやすい人もいるのであえてそう書きます。


    「Noto Sans Japanese」は、AdobeとGoogleが共同開発しているWebフォントです。

    「Noto Sans Japanese」はGoogleのWebフォントのサービスに登録されているので、すぐに使うことができます(参考:日本語ウェブフォント「Noto Sans Japanese」の指定方法(なぜか日本語に適用されない方向け)

    記事の続きを読む



    20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-00

    画像出典:Evernote Clearly(Evernote)


    みなさん、EvernoteのClearlyを使っていますか?

    このClearlyはFirefox・Chromeで使用できるアドオン・機能拡張で、Webの文章を読みやすくするためのアドオン・機能拡張です。


    このClearlyを使うと、本文にフォーカスした表示のされ方に切り替わって、文章がとても読みやすくなります。



    ●ClearlyでWebの文章がこんなに読みやすくなる

    例を見てみましょう。

    千葉県房総半島のいすみ市から大多喜町を走る路線のいすみ鉄道の社長さんのブログです。

    元のブログの体裁はこんな感じ(今はスタイルが変わりました)。

    左側にサイドバーがあって、ショップを見るボタンやカレンダーや最近のエントリーなどがあります。

    本文は右側に掲載されていますが、CSSでフォントがMSゴシックになっていて、行間は140%なので、ちょっと読みづらいです。

    20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-04

    画像出典:さようならトワイライト(いすみ鉄道 社長ブログ)(Internet Archiveのデータから)



    このWebページをClearlyを使って表示すると以下の様になります。

    本文だけが表示されるシンプルなスタイルに変更され、余計なものが目に入らなくなり、かなり読みやすくなりました。

    20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-07


    Clearlyは標準の設定でもWebの文章は読みやすくなりますが、今回は表示に使うフォントに「游ゴシック体」や「游明朝体」を設定して、さらに読みやすくする設定を紹介します。

    記事の続きを読む



    Bootstrapでナビバー(navbar)に、均等分割(均等割)にするクラスがあります。

    それが「.nav-justified」です。navをjustifyするということで、そのまんまですね。



    ●.nav-justifiedは均等分割していない

    便利なクラスが用意されているものだと、会社のサイトであまり気にせず適用していました。

    以下の画像の線で囲った部分です。

    でも、よく見ると、本当に均等分割しているのか?って思いませんか。

    一番左と一番右はpaddingで15px付けているから少し大きく見えるにしても、一番左の項目がかなり長く見えます。

    20150430-BootStrap-3-nav-justified-均等割に修正する-05

    画像出典:これからのカタログ印刷のカタチ - 分割型カタログ印刷 Stock!&Fresh!(吉田印刷所)



    実際にサイズを見てみると以下の通りでした。全然、均等分割されていない!

    20150430-BootStrap-3-nav-justified-均等割に修正する-06

    どういうことなのでしょうか?

    記事の続きを読む



    20150208-SVG・SVGZ画像がブラウザーで表示されない-06

    会社のウェブサイトをリニューアルする際は、Internet Explorer 8以下(≒Windows XPユーザー)はあまり対応しない方向で、リニューアルを行っています(最低限の表示は可能にする程度)。(Internet Explorer 8での閲覧者も10%以下ですし)

    会社では様々なサイトがあり、ウェブ制作に携わっている人数が私を含め、1、2名しかいないので、次のリニューアル・サイトの見直しが数年後になることもあるので、長く使えるもの、また、できればモバイル対応(スマートフォン対応)も可能にしていきたく思っています。

    Internet Explorer 9(以下IE9)ユーザーであれば、SVGの画像フォーマットが使用できます。



    ●目次



    ●SVG画像利用のメリット

    SVG画像のメリットはざっくり言うと以下のものが挙げられます。

  • 拡大してもキレイ
  • 高解像度ディスプレイでもエッジが滑らかな表示が可能

  • SVGの画像は、いわゆるベクトルデータなので、拡大してもキレイ(滑らか)な曲線で描かれます。繊細な表現の画像には嬉しいですね。

    また、拡大してもキレイということは、実質的にピクセル数が多い高解像度ディスプレイのデバイス(Windows・Mac・スマートフォン・タブレットなど)でも、ドットの粗さが目立たずに表示されるので、解像度に応じた複数の画像を用意しなくても良いので便利です。1つのファイルで完結すれば、ファイルの管理も簡単ですから。



    ●使ったことがない人が分かりやすいSVGの使い方

    そんなSVGですが、使い方が難しいのかというと、そうではありません。

    画像ファイル扱いなのでimgタグに使えます。

    つまり、

    <img src="logo.png">

    と書いていたところを、

    <img src="logo.svg">

    とsrcの部分のファイル指定を変更するだけです。簡単ですね。(.svgもしくは.svgzのファイルを指定します)


    ですが、こう指定しただけでは表示されない場合もあるのです。(ようやく本題)

    記事の続きを読む



    ブログ著者

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索