[B! 余白] studydesignのブックマーク

studydesign id:studydesign

余白に関するstudydesignのブックマーク (4)

CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説
Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。 Spacing in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSにおけるスペースの種類 CSS GridのGap（溝） CSS FlexboxのGap（溝） CSSのポジション CSSのプロジェクトで使用するスペースの実装テクニックスペーサーのコンポーネント CSSの数学関数: Min(), Max(), Clamp() はじめに 2つ以上の要素
studydesign 2020/05/16
flexbox

css

余白
リンク
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完
studydesign 2020/04/22
デザイン

余白
リンク
ちょっと意識するだけ！デザイン力がワンランクUPする14個の注力ポイント
デザインをしたいと考えた際、Illustrator、Photoshopといったソフトの使い方やCSSなど覚えなければいけないことがたくさんありますが、まず身につけたいのは基礎力です。技術面を覚えても基礎が身についていなければ、本当に良いデザインができているか、どのようにデザインしたらいいか判断することが難しくなります。今回は、デザイン基礎力の注力したいポイントをピックアップしてご紹介します。今からデザインを始める方、再度基礎から学習したい方にオススメです。ぜひご覧ください。デザインで注力したい基礎15ポイント 1. 関連する要素をグルーピングする http://webdesign-trends.net/entry/859 人は近くにあるものを自然と「関連がある」と認識しますので、位置的に近くにするだけで理解しやすいデザインにすることができます。これは、デザインの原則上では「近接」と
studydesign 2017/01/13
余白

デザイン

design
リンク
[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック
ページをレスポンシブ対応にする時、デスクトップでは空白スペースを多めにとり、スマホでは少なめにして、スクリーンサイズに適したマージンを与えたい時があります。マージンの最小値と最大値を設定し、その間の値を変化させる、ビューポートの単位（vw, vh）を使って実装するスタイルシートのテクニックを紹介します。デモページ幅1200px, 800px, 480pxでデモページを表示したもので、上部のマージン（margin-top）が変化しているのが分かると思います。マージンの最大値は15em、最小値は5em、その間の値はスクリーンサイズに応じて変化します。実際の動きは、下記ページでご確認ください。
studydesign 2016/10/20
レスポンシブ

css

余白
リンク
1