MENU
Design

CSSデザインについて

shin-u

css
SpecialThanks：GATAG Lupuca
個人的によく使用するCSSの記述に関する解説記事へのリンクをまとめます。
随時更新していく予定です。

個別設定方法

・CSS3「object-fit」表示領域に対しての画像の表示方法を指定する

・レスポンシブサイトに便利！！フォントサイズを「vw・vh」で幅にあわせて可変させる

・画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合

・テキストやボックスにドロップシャドウやグロー（光彩）をつける

・CSSだけでマウスオーバー時にホワイト効果をつける

・文字の垂直位置を指定する

・CSSで要素を横並びにする方法

・行間を調整する

・ヘッダー部分をスクロールせず固定させる方法

・フッター部分をコンテンツが短い時もブラウザの最下部に固定させる方法

・要素をウィンドウの縦横中心に揃えて配置する方法

・秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ

・borderのいろいろなテクニック

・図解で分かりやすい！CSSで画像を中央寄せする方法

 ・ページ内リンクのリンク先位置調整

 ・CSS3 時代の z-index まとめ　z-indexはpositionでstatic以外の値を指定

・背景画像のサイズを指定する

・背景画像の表示位置を指定する

・[スマホサイト]左右に微妙にずれるのを解消するCSS

・CSSだけで背景色を2色にする方法

・tableのtr要素にborderを引く

・テキストにグラデーションをかける
 

 

ベースルール

・CSSの「セレクタ」の書き方（CSS3対応版）

個別セレクタ解説

transformプロパティ
vertical-alignプロパティ

その他

・未使用CSSセレクタを見つけて削除する方法

 

ABOUT ME
Junichi Ezawa
Junichi Ezawa
SHIN U DESIGN代表 / デザイナー
SHIN U DESIGN代表。大学卒業後に文化服装学院を卒業。メンズアパレル企業にてSHOPスタッフとして販売キャリアを積み、生産管理の現場も経験する。スタートアップ企業にてファッションデザイナーとアパレルECサイトの店長を兼務。その後、都内のWeb制作会社にてデザイナー兼ディレクターとして十数年。コーポレートサイト、ECサイト、アプリ制作まで、UXデザインの視点で、より良いUIデザインを制作します。HAPPYな2児の父。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました