Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

【実例サンプルあり】簡単に実装できるcssスニペット集

 

この記事では、短いコードで実装可能なcssプロパティを紹介していきます。

※2021年時点でのテクニックです。web開発の分野は日進月歩で技術開発が進んでいるので、時代の流行や情報の鮮度を確かめてからの実装を推奨します。

上下左右の中央揃え place-items: center

place-items: centerは、align-itemsjustify-itemsを同時に指定できるショートハンドプロパティです。
1つだけ指定した場合はどちらにもその値が指定されますが、2つ指定した場合はalign-itemsプロパティ、justify-itemsプロパティの順に値が反映されます。

ビューポートに追従して配置が変わるので、お手軽にレスポンシブ対応させることができます。

実例

See the Pen
Untitled
by 1 (@tsk3939)
on CodePen.

display: gridとセットで記述することで、親要素に対して上下左右の中央に整列してくれます。

余白の指定 gap

gapはコンテンツ間の余白(行間・列間)を指定できるプロパティです。
余白といえば、marginプロパティやpaddingプロパティが真っ先に思い浮かびますが、gapプロパティを使うとお手軽にレイアウトを組むことができます。
以下のサンプルコードでは、分かりやすくするために値をpx指定をしてますが、%指定も可能です。

See the Pen
Untitled
by 1 (@tsk3939)
on CodePen.

1つだけ指定した場合は行間・列間が同一の値で設定されるので、等間隔でレイアウトを組めます。
行間・列間を個別に指定したい場合はそれぞれrow-gapcolumn-gapを使います。

まとめ

今回紹介したプロパティを含めてflexboxgridaspect-ratiovwvhなどのプロパティを活用することで、レスポンシブ対応したwebサイト制作もお手軽になるかも?

ぜひお試しください!

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Subtle Patterns

    Web

    WEBサイトの背景などに!商用OKの無料テクスチャ素材サイト「Subtle Patterns」の紹介…

    みなさんウェブサイト作りは捗っていますでしょうか?自分はやっとトップペ…

  2. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  3. Web

    【CSS】CSS Gradientで複雑なグラデーションを作成

    CSS Gradientというフリーサイトを使ってCSSで複雑なグラデ…

  4. Web

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

  5. Web

    cssだけで、グラデーション入りのラインを作る!

    cssの擬似要素を使った、グラデーション入りのボーダーラインを作りまし…

  6. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

人気の記事

おすすめの参考書

PAGE TOP