ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
ロゴをデザインする際に参考になる5冊の本
ロゴをデザインさせてもらう機会があったので、ブレスト用にロゴに関する本を図書館で何冊か借りてきて読んでみました。それぞれ違う良さがあったので、それぞれの概要と自分にとって参考になった点をメモしておきます。 特に最初の2冊は蔵書にしたいと思える内容でした。この2冊はいつでも手に取って見返せるようにしておきたい。以下、好きな順で紹介しています。 日本語のロゴ・メイキング ロゴデザインのロジック ロゴデザインのアイデア! 実例つきロゴのデザイン 新しい時代のブランドロゴのデザイン 日本語のロゴ・メイキング 「日本語のロゴ・メイキング」をAmazon.co.jpで見る ラフやスケッチ、色やフォントの検討案など、ボツ案を含む制作物（提出資料？）が見られる貴重な本です。掲載されている事例は25件ですが、この5冊の中では各事例の制作プロセスが一番詳しく載っています。 普段あまり表に出てこないボツ案なども
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
