カテゴリ css

当サイトはアフィリエイト広告を使用しています

【CSS入門】コピペで使える！デザインサンプル集

実務でよく使うデザインをコードとともに紹介します！

今回はweb制作でよく使う実装で、cssのみで実現出来るものを色々紹介していきます！

codepenでの実装例も合わせて掲載しているので、コピペで使ってみてください！細かいスタイルは微調整必要かもですが…

疑似要素をガンガン使ったものや、前回までの記事で紹介していないプロパティもあったりしますがあしからず

marginを指定して左右中央に配置

要素を左右中央に配置する手段は色々ありますが、一番手っ取り早いのがこちらです。

以下の部分がポイントです。

.box {
  width: 200px;  height: 100px;
  margin: 0 auto;  /* 左右のmarginを均等にする */  border: 1px solid black;
  background-color: #008dab;
  color: white;
}

widthを指定した要素に、margin: 0 auto;とすると余った左右のマージンを均等になるように自動調整してくれるので、結果としてその要素は左右中央に配置されます。

dispaly: flex;として中央寄せするよりも楽に実現可能です。

見出し

各見出しで使えるデザインです。

borderとbackgroundだけのものもあり、簡単ながらいい感じの見た目になります。

リボン風見出しの、リボンを折り返しているような部分は疑似要素を使っています。マーカー部分のborder関係のプロパティがミソです。

.title4::after {
  content: '';
  border: none;  border-bottom: solid 16px transparent;  border-right: solid 24px #aaa;  position: absolute;
  bottom: -16px;
  left: 0;
}

ざっくり解説すると、幅・高さ・中身の無い疑似要素に、上下左右方向に太めのborderを指定すると、要素の配置される中心から上下左右方向にborderが伸び、各borderが三角形を形づくります。(詳しく知りたい方は"疑似要素　三角形"でググるといいかも)

この場合は、下方向に透明の三角形、右方向に灰色の三角形を作ることで、上と左方向は無しとすることで、リボンの折り返しのように見せています。

あとはこの三角形を絶対配置で見出しの左下へ配置するだけです。bottomプロパティに指定する値は、下端を基準として、正の値で上方向への配置となる為、bottom: -16px;(borderの三角形の高さ16px分)として見出しの下部にくるようにしていいます。

括弧付き見出しの、括弧部分は以下の疑似要素で構成しています。

.title5::before {
  content: "";
  width: 16px;  height: 24px;  border-top: 3px solid #008dab;  border-left: 3px solid #008dab;  position: absolute;
  top: 0;
  left: 0;
}
.title5::after {
  content: "";
  width: 16px;  height: 24px;  border-bottom: 3px solid #008dab;  border-right: 3px solid #008dab;  position: absolute;
  bottom: 0;
  right: 0;
}

こっちは幅と高さを指定した疑似要素に、括弧の形になるようにborderをつけて、要素の左上と右下に来るように絶対位置指定で配置しています。

吹き出し

文章を入れる吹き出し風のボックスです。

ここでも先のリボン付きの見出しと同様に疑似要素のborderで作った三角形を用いています。

.bubble1::before {
  content: "";
  margin-left: -16px;
  border: 16px solid transparent;  border-top: 16px solid #008dab;  position: absolute;
  bottom: -32px;
  left: 50%;
}

あとはこの三角形を絶対配置で調整するだけです。

bottom: -32px;はリボン付きの見出しと同じ考え方で、元となる要素の下端から下方向に疑似要素の高さ分下げています。

left: 50%;では左方向から要素幅の50%位置に配置しますが、疑似要素の左端が中央にきてしまうため、margin-left: -16px;で無理やり左方向に戻しています。

カード

一つのカードの中に画像とテキストがセットになっているデザインです。

当ブログでも記事の一覧に使っています。

複数並べると統一感が出て、とても見栄えします！

見た目をカッコよくするためのポイントは以下の部分です。

.card {
  width: 300px;  height: auto;
  margin-bottom: 16px;
  margin-right: 16px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);  transition: all 0.5s;
  position: relative;
  overflow: hidden;
}
.card .card_img img {
  width: 100%;  height: auto;  vertical-align: top;
}
  • 各カードのwidthを統一する。
  • box-shadowプロパティは、カードの周囲に陰影を付けることが出来ます。ただ、値の指定は結構複雑...なのでwebでジェネレーターが色々公開されているので、そちらを使って生成したりするのがオススメです。
  • <img>はwidth: 100%;、height: auto;で元画像の横幅がカードに収まる幅となり、高さは元画像の縦横比に応じて確保される。(但し、各カードに同じ縦横比の画像を入れないと画像部分の高さがバラバラになる)
  • 元画像の縦横比に関わらず<img>の高さを必ず揃えたい場合は、heightに任意の値を指定して、object-fit:cover;等とするといい感じになる。(ただしこちらは元画像により、見切れる部分があるかも)

また、マウスホバー時の効果は次のコードです。

.card{
  ...
  transition: all 0.5s;  ...
}
.card:hover {
  transform: translateY(-3px);  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);}
  • 元のカード要素にtransitionを指定すると、ホバー等で各種のプロパティ値が変わった時に、指定したプロパティ(ここではallなのですべてのプロパティ)が、指定した時間を掛けてゆっくり変化するようになります。
  • transformプロパティでは要素の移動などを行うことができ、translateY(-3px);で、カードを少し上に移動させています。(translateX()で横方向の移動ができたり、rotate()で回転も出来たりします。)
  • box-shadowも変更する事で少し浮き上がるように見える効果を付けられます。

横に並べたときに、親コンテナに収まりよく配置できるようにするためには、次のスタイルを調整する必要があります。

/* 横並べで3個で折り返す場合は下記を入れると親コンテナに収まりがいい */
.card:nth-of-type(3n){
  margin-right: 0;
}

カード間のmarginは下方向と右方向にとっていますが、横並びにする際に折り返す箇所では、右方向のmarginを消すと、カード間の間隔がよくなります(3個並べて折り返すなら.card:nth-of-child(3n)にmargin-right: 0;とする)

また、カードをdisplay: flex;で横に並べるとき、align-itemsは指定しないことで、カードの高さが自動的に揃います。

ヒーローイメージ

WEBサイトのトップページによくある、画面いっぱいに広がる背景画像です。

1番先に目につく所に設置して第一印象を良くすることができます。

以下がポイントになります。

.hero {
  margin: 0;
  padding: 0;
  width: 100vw;  height: 100vh;  display: flex;
  justify-content: center;
  align-items: center;
}
.bg1 {
  background: url("https://katsu-dev.netlify.app/static/default_ogpimage-62d4a2892ca742cbdcb2a1523b97bef3.jpg") center/cover no-repeat;}

ヒーローイメージのボックスをwidth: 100vwで画面横幅いっぱい、height: 100vhで画面高さいっぱいに広げています。

また、この画面いっぱいのボックスに背景画像を指定する場合は、background-size: cover;で広げたボックス全体を埋めつくすようにするといいでしょう。

マーカー

テキストに蛍光マーカーのような下線を引きます。

以下のコードだけで実現可能です。

.marker_pink {
  background-image: linear-gradient(transparent 60%, #f6c 60%);}

background-imageにはlinear-gradient()関数というものを指定できます。この括弧内には複数の値をカンマ区切りで指定でき、各値には[色] [色の分岐する位置]を指定します。

transparent 60%で要素の上部から60%の位置までを透明に、#f6c 60%で60%の部分から下部分を指定した色で塗りつぶしています。

hoverしたらでてくるナビゲーション

ナビゲーションメニュー等によくある、マウスホバーしたら出現するメニューです。

javascriptを使って実装する場合もありますが、cssだけでもある程度できます。

ポイントは以下の部分です。

.menu > li > .nest_menu {
  width: max-content;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #efefef;
  opacity: 0;  transition: all 0.3s;}
.menu > li:hover > .nest_menu {  opacity: 1;}

opacityは要素の透明度を指定できます。値0で透明、1で通常の状態です。

マウスホバーで出てくるメニュー(.nest_menu)を、初期状態ではopacity:0;で透過状態としています。li:hoverでリストにマウスホバー状態となったときに、.nest_menuをopacity: 1;で透過をやめるようになります。

疑似クラスの子要素を指定することができるのはちょっと不思議な感じですが、これで"ホバーされたときの子要素のスタイル"を指定できます。

hoverしてじわっと拡大

画像にマウスホバーするとじわっと拡大するやつです。

以下がポイントになります。

.expand img {
  width: 100%;
  height: auto;
  vertical-align: top;
  transition: transform 0.5s;}
.expand:hover img {
  transform: scale(1.1);}

transformプロパティにscale()関数というものを指定すると、その要素を括弧内で指定した倍率に拡大することが出来ます

<img>要素にあらかじめtransitionを指定してから、マウスホバーした時にtransform: scale(1.1);とする事でじわっと拡大することが出来ます。

パララックス(背景固定タイプ)

背景画像を固定するタイプのパララックスです。

以下で背景画像を固定表示できます。

body {
  margin: 0;
  padding: 0;
  background: url("https://katsu-dev.netlify.app/static/default_ogpimage-62d4a2892ca742cbdcb2a1523b97bef3.jpg") center/cover no-repeat;  background-attachment: fixed;}

ここでは<body>要素に対して背景画像を指定しています。

background-attachment: fixed;とすることで、スクロールしても背景を固定することができます。(backgroundプロパティのショートハンドとして指定してもOK)

あとは、固定した背景画像が見えるように、配置する要素に大きめのmarginを指定したり、要素を透過したりすると見栄えがいい感じになります。

cssスプライト

マウスホバーやなんらかのアクションで、画像を差し替えるようなUIを見たことがあるかと思いますが、差し替える時に画像を新しく読み込んだのでは、読み込みに時間が掛かって表示が遅れてしまいます。

あらかじめ、差し替える前の画像と、差し替える画像を繋げたものを作成し、その画像の表示位置をずらす手法をcssスプライトと言います。

以下がポイントです。

.sprite {
  height: 96px;
  background: url("https://katsu-dev.netlify.app/css-example/sprite.png") no-repeat #eee;  background-position: 0px 0px;
}
.sprite:hover {  background-position: 0 -96px;
}

ここで使う画像は、元画像と差し替える画像を縦方向に二つ繋げているものを用意しています。

背景画像を表示するボックスは、height: 96px;として片方の画像のみが表示されるようにしています。

初期状態では要素の左上を基準に背景画像を配置し、マウスホバーした時に縦方向-96pxとすると、背景画像が上方向にずれて、画像が切り替わります。

画像のフルード

<img>要素を、親コンテナの拡大縮小に合わせてぴったり追従するようにすることをフルード化といいます。

レスポンシブ化する場合は必ず使うと思います。

以下のコードのみです。

img {
  max-width: 100%;  height: auto;  vertical-align: top;
}

max-width: 100%;で親コンテナのサイズに合わせて拡大縮小し、最大で元の画像のサイズまで拡大することができます。

元の画像以上に拡大してもよければwidth:100%;でもいいと思います

各サイズのvw指定

font-sizeや各方向のmargin、paddingを、数値+vwで指定することで、画面幅が変化してもほぼ見た目が崩れないようにすることができます。

下が一部の例です。

.card .card_text .card_title {
  margin: 0 0 5vw;  border-bottom: 1px solid #ddd;
  font-size: 4vw;}

font-sizeに単位vwを指定することもできますが、margin、paddingの上下方向にも単位vw指定ができます。

きちんと指定すると、どんな画面幅でも縦横比が一定になり、スタイルが崩壊しにくいものとなります。