SHIN U DESIGN

CSSデザインについて

2383 views
約 2 分

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 The Author

shin-u
文化服装学院卒業、メンズアパレル企業にてSHOPスタッフとして販売キャリアを積み、生産管理の現場も経験。スタートアップ企業にてファッションデザイナー兼アパレルECサイトの店長としてFashionとWebの未来を感じる。現在は都内のWeb制作会社にてデザイナーとしてスキルを磨きながら、クリエイターや経営者の団体である、OneHeArt(ワンハート)Social Art Labo(ソーシャルアートラボ)のメンバーとして目標に向かってクリエイションを続ける。