印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能
いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能 以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。 以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I） スマホ（device mode）アイコンをクリック drawerアイコンをクリックする （Emu
ブログに使うCCライセンスの写真を簡単に探せるサイト、Wylio.com
ブログで使える写真を検索・リサイズしてブログに貼付けられるHTMLコードを書き出してくれるサイト、Wylio.com。ウェブの場合、長い文章だと写真があるだけでだいぶ記事が読みやすくなる場合もあります。そんな時、記事のイメージにあった写真をサクっと検索して使用できる、とても便利なサイトです。 以下の簡単なステップで好きな写真を自分のブログ記事に挿入できます。 写真を検索 Flickrにアップされているクリエイティブ・コモンズ・ライセンスの写真が検索されます。 写真の位置（右寄せ・中央寄せ・左寄せ）とリサイズの指定をする 著作者クレジットの付いたHTMLをコピーする ブログ記事に貼付ける これだけです。 コピーしたHTMLをそのまま貼付けると以下のような感じになります： photo © 2006 Ian Muttoo | more info(via: Wylio) 写真の著作権や肖像権につい
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
