UIデザインで中央配置がずれてしまう理由と解決方法

2024/05/30 146 users UIデザイン 中央配置 デベロッパー 理由 解決方法

UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを... 続きを読む

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

2021/07/12 313 users fixed モーダル コリス position パーセンテージ

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではない...記事の続きを読む 続きを読む

CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス

2021/01/14 477 users 主流 天地左右 テクニック コリス 一昔前

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価し... 続きを読む

2020年、知っておくと便利なCSSのプロパティのまとめ | コリス

2020/07/21 369 users コリス Flexbox プロパティ Edge CSS

ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに... 続きを読む

少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2010/04/14 2024 users 実装 Webクリエイターボックス CSS小技集 コード 少し

CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ サンプル まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをa... 続きを読む