CSS関連の記事一覧



●Noto Sans Japaneseの指定方法はDTP Transitを

新潟グラム × DTP Boosterの懇親会の時に、スピーカーの鷹野さんに「Noto Sansってウェブフォントの指定の仕方が分からないんですよ〜」と質問したら「あ、それならDTP Transitのサイトソースを見てみて」と言われました。って、今さらって感じですが、その内容について書きかけだったので、書き終えて年末を終わろうかと。


実際、DTP Transitのサイトソースを見たら指定の方法は分かりました。

  • DTP Transit

  • でも、この指定の方法って正式なモノなのか?って思ってしまいました。

    (見たい人は http://www.dtp-transit.jp/css/styles.css の中で「Noto」を検索してね)

    念のため正式な指定の方法をGoogle Fontsのページで確認しておくことは制作者として正しいことかなと。



    ●正式ドキュメントを探してみる

    なぜかって?

    「Noto Sans」で検索して、検索結果で出てきた最初のページを見てみます。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-01

    画像出典:google font noto sans(Google 検索)



    以下のページが出てきます。

    なんかごちゃごちゃ書いてありますけど、右上に「Open Noto Sans in Google Fonts」って書いてあるのでクリック!

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-02

    画像出典:Noto Sans(Google Fonts)



    するとGoogle FontsのNoto Sansのページが出てきます。「勝ったッ! 第3部完!」って思うじゃないですか。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-05

    画像出典:Google Fonts


    記事の続きを読む



    小杉聖さんのFacebookの投稿を見て、自分が関わっているサイトのフォームを直してみようかなと思ってみた。


    シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さすが・・・!

    エラー項目の見せ方が素敵で目から鱗が落ちた。

    こういうのってプラグインに頼ってるとなかなかできないよね。

    入力欄は統合したほうがいいのも同意。

    今は色々なjsライブラリあるし。

    「名前と名字」って文言は、わざとなのかなあ?

    こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

    小杉 聖 - シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さ...
    投稿 by 小杉 聖.


    一気に変えるのではなく、少しずつ変えてみて、何が良いのか考えてみようと思います。


    ●とあるCMSの標準フォーム

    まずはとあるCMSから出力される標準の形。

    20141217-フォームの表示のさせ方-01

    これって今でも見る形ですけど、「*」が何を表しているのか分かりづらい!! わかるかこんなの!

    知っている人なら知っているでしょうけど、「*」は「必須」を意味しています。申し訳程度に「*は入力必須項目です」とフォームに書いてあるけど(それもフォームの末尾に!)、普通の人は分かりませんわ。

    記事の続きを読む



    CSSをいじっていたら、フォント表示を改善できて、キレイな表示になったので報告しておきます。

    なお、かなり無理矢理ですので、場面に応じてお使い下さい。

    対応ブラウザーはInternet Explorer・Firefoxです。(Internet Explorerは9以降かな?)


    ざっくり行きたいなら、以下の様に書きます。

    body { transform:scaleX(0.9999); }


    Yahoo!のトップページのニュースの見出し部分で検証してみます。

    ブラウザー内蔵の開発者ツールを使用してCSSを適用して、スクリーンショットを撮り、2倍に拡大して掲載しています。

    ●Internet Explorer 11

    適用前

    20141205-ウェブでのフォント表示をキレイに-IE-03


    適用後

    20141205-ウェブでのフォント表示をキレイに-IE-04


    ※IE9だと「-ms-transform:scaleX(0.9999);」

    記事の続きを読む



    レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrap(Twitter Bootstrap)です。

    このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。



    さて、その強力なBootstrapで今回はTipsを紹介。

    Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。

    それでは実例を見ながら説明しましょう。


    ●実例「スマートフォン表示の時だけ改行する/○○を表示する」

    実例で使うサイトは「グラシン工房」のページ。

    スクリーンショットはPCのウェブブラウザーで見た時のものです。トップページの右側にあるサイトの説明文で「スマートフォン表示の時だけ改行する/○○を表示する」という技を使っています。

    20141015-BootStrap-Tips-01

    画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


    この部分は以下の様な文章が入っていて、実はそのままの状態でスマートフォンで表示すると、文字数の関係で変な所で折り返されたりしてしまいます。

    2行目の「グラシンペーパーにパターン柄やイラストをプリントした」などはかなり長いですよね。

    20141015-BootStrap-Tips-02

    画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


    ひとつのHTMLでPCもスマートフォンもお手軽にキレイに表示したいので、スマートフォンで表示した時だけ改行を多く増やしたいわけです。

    実際のサイトをスマートフォンで見た時には以下の様に表示されており、PCのウェブブラウザーで見た時よりも改行が多く入っています。(縦に長いという指摘は今回はご勘弁下さい)

    20141015-BootStrap-Tips-03

    20141015-BootStrap-Tips-04

    画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


    それでは、ソースを見てみましょう。

    記事の続きを読む



    NHKニュースのページははてなブックマークやTwitterでたまに紹介されるので、見ることが多いですが、今日スマートフォンで見ていたらおもしろい機能が付いていたのに気がついたので紹介します。


    機能としては、文字のサイズを変更することで、通常のウェブページのデザインと、スマートフォン用のデザインが変わるレスポンシブwebデザインになっていたということ。文字サイズを変更するだけでデザインが変わるので、PC版とスマートフォン版の切り替えが簡単でナイスだと思います。

    もしかしてこれって結構前からあったのかな?


    ●PCのブラウザーでNHKニュースを開く

    まずPCでNHKニュースのページを開くとこんな感じです。

    このページにも右上に文字サイズを変更するボタンがありますが、これをクリックしてもニュース本文部分の文字の大きさが変わるだけで、特に大きなデザイン変更はありません。

    20140323-NHK-レスポンシブwebデザイン-01

    以下全ての画像出典:中国 大気汚染企業に懲罰税導入へ(NHKニュース)



    記事の続きを読む



    最近はWebばかりやっているのですが、InDesignで作業をしていると「em」が使えなくてかなりイライラする時があります。

    インデントで「1文字下げ」を普通に指定したい。
    mmなどの指定だと、文字サイズが変更したときに再設定しなくてはならず大変…。
    20130304-InDesign-インデントでemが使えない-01





    Wordでも文字数でインデント指定できるよねーと思ってスクリーンショット撮ろうと思いましたが、家のPCにはWordはインストールされていませんでした。

    意外にも(?)OpenOffice.org Writerは「cm」「mm」などの絶対距離指定で文字数指定は対応していませんでした。(なおワードパッドも文字数指定はできない)


    なので一太郎を貼っておきます(苦笑)。画面は一太郎2009 on Windows 8です。
    8文字を「8C」(CはCharacterだろう)と指定します。
    20130304-InDesign-インデントでemが使えない-02


    電子書籍周りで一字下げとか結構出てくると思うのですが、制作者の皆様はどうやっているのでしょうかね…。px固定であとはビュアー側で適当にしてくれるのでしょうかね…。それとも空白スペースか…。(InDesignでの電子書籍の作り方はほとんど知りません)

    記事の続きを読む



    20130218-MovableTypeでCSSをlessっぽく書く-00

    LESSというCSSの書き方をご存じですか?

    簡単にいうと、変数が使えたり、計算ができたりするCSSの書き方です。

    LESSで以下の様に書いて…
    @color: #4D926F;

    #header {
        color: @color;
    }
    h2 {
        color: @color;
    }
    LESS ≪ The Dynamic Stylesheet language
    CSSへ変換すると、
    #header {
        color: #4D926F;
    }
    h2 {
        color: #4D926F;
    }
    LESS ≪ The Dynamic Stylesheet language
    となります。

    おお、これは便利ですね!

    このLESSという書き方はTwitter Bootstrapのカスタマイズのページで知ったのですが、フォントのサイズなどはTwitter Bootstrapでは各エレメント毎にピクセル固定なので、CSSを直に修正していくのは結構面倒なので、こうした変数が使える言語は大変便利です。


    ですが、コンパイルしないと使えないし、新しい言語も覚えてもなぁ…と思ったら、Movable Typeでも同じようなことができることに気が付いたので、メモ的に書いておきます。

    記事の続きを読む



    DEMICOUPER CUT OFF MEMO
    DEMICOUPER CUT OFF MEMO by yto, on Flickr

    たった一行でブラウザをシンプルなメモ帳に変える方法 | IDEA*IDEA」で

    data:text/html, <html contenteditable>

    をFirefoxやChromeやSafariなどのブラウザのアドレス欄にコピペすると、ブラウザのタブ全体がメモ帳みたいに文字入力ができるようになる、というものが紹介されていました。

    これはdata URIというフォーマットを利用したものですが、おもしろいですね。


    でもネタ元のページを見たら、なんか色々な方がカスタマイズをしまくっていたので、マネして自分が使いやすそうなコードを書いてみました。
    記事の続きを読む



    20120610-htmlタグの書き方-00

    HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ!」というものが更にわかってきたので、その部分を紹介。


    前回はjQueryのロードの方法がナイス!という話でしたが、今回はhtmlタグの書き方がナイス!という話。


    いや、本当にさすがとしか言いようがない。

    記事の続きを読む



    Glass City by jaxxon


    CSS3のbox-shadowのプロパティを見ていて、実用性はあまりなさそうだけど、こういうこともできるんだなぁという発見をしました。

    あまりにも小ネタ過ぎて忘れそうなので記事にしておきます(笑)。


    Photoshopでベベルのオブジェクトを作ることがありますよね。
    ボタンを作る際に以前は多用されていた気がします。(最近はかなり減りましたかね…)
    20120329-ベベル-02


    Photoshopのこのオブジェクトは幅と高さがともに200px、角の丸みは20pxのベクトルシェイプ(ベクトルマスク)で作成されています。
    記事の続きを読む



    ブログ著者

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

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

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

    ブログ著者について

    サイト内検索