表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
Macで元ファイルを残してgzip圧縮する方法
先日、MySQLからエクスポートした.gzファイルを解凍して編集したものを、再度gzip圧縮し直す必要があったのですが、忘れそうなのでやり方を書き留めておきます。 コマンドラインで圧縮する方法 元ファイルを残して圧縮 file.txtをfile.txt.gzに圧縮する gzip -c file.txt > file.txt.gz 圧縮レベルを指定するオプション 9が最大レベルで、1が最低レベル。 gzip -c9 file.txt > file.txt.gz 元ファイルを残さずに圧縮 以下のコマンドで、file.txtがfile.txt.gzに圧縮されます。 gzip file.txt コマンドラインツールで解凍する方法 元ファイルを残して解凍 file.txt.gzをfile.txtに解凍する gzip -dc file.txt.gz > file.txt 元ファイルを残さずに解凍 fi
RightFontで変わる。Macのフォント選びの新しいワークフローの可能性
SketchとかPhotoshopでのフォント選びって、あまり使い勝手が良くないですよね？ フォントのドロップダウンは小さくて見にくいし、日本語フォントは英語フォントの中から探し出すのに一苦労です。たとえばSketchの場合もドロップダウンが小さくて。。。フォント選びに無駄に時間を浪費している気がするのは僕だけでしょうか？ そんなデザイナーのストレスを解消してくれそうなのが、Mac向けフォント管理ツールの「RightFont for Mac 」です。$39.95（約4,500円／2016年3月1日現在）とちょっとだけ値は張るんですけど、多機能でサクサク動くので、メリットを考えたらその価値はありそうです。ただ、残念なことに重要な機能でうまく動かない場合があるので注意が必要です。 RightFontの便利機能 気に入ったのは以下の機能です。 SketchやPhotoshopにドラッグ＆ドロップ
WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ？
このブログでもレスポンシブイメージについて何度か紹介していますが（ココとかココで）、2015年の暮れにリリースされたWordPress 4.4 Clifford からsrcsetとsizesを使ったレスポンシブイメージがWordPressのCoreに実装されました。サーバにインストールして使うWordPress.org版だけでなく、WordPress.comにも実装されたとのことで、実質的には世界で2割以上のウェブサイトでレスポンシブイメージ（srcsetとsizes）が使われていることになるそうです。 このブログも先日WordPress 4.4に更新したので、WordPressのレスポンシブイメージがどんな実装なのか確認してまとめてみました。 基本的な仕組み 管理画面での設定なし・プラグインなしで<img>タグにsrcsetとsizesが挿入される ポリフィル（Picturefill）は
CPP： AMPに替わる標準策定の提案（翻訳版）
Googleのモバイル検索結果でカルーセル形式で表示される とか「AMP対応」の表示を開始した とのことで、日本でもAMPプロジェクト が話題ですね。個人的には、目的には賛同するけど、やり方には同意できない部分もあるというのが正直なところです。AMPを広めるためにGoogleの検索結果と結びつけてしまったところが特に疑念を抱くところです。 とはいえ、検索結果に優先的に表示されるなら対応を考えないわけにはいかないですよね。背に腹は変えられないですからね。 そんなふうに悩んでいたところ、つい先日、Implementing Responsive Design の著者でもあるTim Kadlecさんの素晴らしい記事を目にしたので、日本の開発者の方々にもぜひ読んでもらいたいと思い、早速Twitterで本人に承諾を得て 翻訳させてもらいました。 以下、原文へのリンクと翻訳です。 CPP: A Stan
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
