ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
Sassのモジュールシステムを@importから@useに移行する方法を考えてみた
先日、KOJIKA17さんの「Sassを@importから@useに置き換えるための手引き 」という記事を見て、2022年10月ころにはSassで@importが使えなくなる可能性があることを知りました。まだ2年ありますが、新しく取り組むプロジェクトでは@useを使ったモジュールシステムにしたいので、自分が使っている構成の置き換えについて考えてみました。 まずはアイディアをシェアをして叩き台にしてもらうのが目的ですが、他に良い書き方があったらぜひアドバイスいただきたいというのもあります。 試しながら、考えながら書いているので内容は変更される可能性が高いかもしれません。 Sassの新モジュールシステムについて Sassの新しいモジュールシステムについては、上述の記事や SHIFTBRAINさんのブログ がわかりやすかったです。ありがとうございます。 公式の発表と@useと@forwardのド
JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた
オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。 サンプル画像 上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。 サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB） ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。 職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi
メディアクエリで「em」を使うと基準になるのは何のサイズ？
メディアクエリを書くときの単位って、何を使ってますか？ 僕はいまのところpxしか使ってないんですが、先日、「PX, EM or REM Media Queries? 」という記事を読んで、メディアクエリで使うemやrem単位について、逆に混乱してしまったので、自分でも仕様やブラウザの挙動を確かめてみました。 結論から言うと、emもremもSafariで挙動の違いがあるので、pxがクロスブラウザで一番安定した挙動をします。 いったいどういうことになっているのか？ 僕自身、めちゃくちゃ混乱してしまったので整理してまとめておきます。皆さんをさらなる混乱に陥れないことを願いつつ。。。 メディアクエリでemを使う際のブラウザの挙動 メディアクエリでem単位を使うと、そのサイズはブラウザのフォントサイズ設定に相対的になると仕様に書いてあります。なので、ブラウザでフォントサイズの初期値が16pxの場合、
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
埋め込んだTweetを簡単に中央寄せ表示する方法
前回の投稿を書く際に、埋め込んだTweetをセンタリング（中央寄せで表示）する方法を探してみたら超簡単な方法がありました。Twitterの開発者向けのドキュメント を読むと他にもいくつか簡単に設定できるものがあったので備忘録的にまとめておきます。 Tweetのセンタリング UIの表示言語を変更する Twitterカードを非表示にする リンクカラーを設定する テーマを変更する デフォルトの埋め込みコード <blockquote class="twitter-tweet" data-lang="en"> <p lang="ja" dir="ltr">Tweetの埋め込みテスト用</p>— ryo watanabe | 渡辺竜 (@rriver) <a href="https://twitter.com/rriver/status/706466931897839616">March 6, 201
印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能
いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能 以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。 以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I） スマホ（device mode）アイコンをクリック drawerアイコンをクリックする （Emu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
