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. Web

    SVGアイコンをCSSで色を替えられるようにしよう

    今回はSVGアイコにCSSを適用させて色を変えられるようにする方法を紹…

  2. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  3. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  4. Dreamweaver

    WebサイトにGoogleマップを埋め込む方法

    HTMLでwebサイトにGoogleマップを埋め込む方法を今回はご紹介…

  5. htmlcssアイコン画像

    Web

    オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

    どうもこんにちは。今回はweb制作で使えるスクロールアニメーシ…

人気の記事

おすすめの参考書

PAGE TOP