カテゴリー別アーカイブ: HTML/CSS

CSS 画像にホバーすると文字が出てくるエフェクトを作る方法

今回は、画像にホバーすると文字情報が表示されるエフェクトを作る方法を紹介します。CSS3のアニメーションや変形と組み合わせると、かなり色々なエフェクトを作ることができますが、ここでは一番シンプルなエフェクトを紹介します。

画像にホバーすると文字が出てくるエフェクトの作り方

DEMO

ホバーで文字が出てくるエフェクトのデモ

まずはデモをご覧ください。ホバーすると画像が白っぽくなり、文字がふわっと浮き上がります。このような見た目のエフェクトを作る方法は色々ありますが、今回は以下のような構造にしています。

  • 画像をdiv要素の背景に指定
  • 文字はdivの子要素の p に入れる
  • オーバーレイ(画像の上に乗せる色)を div の疑似要素 ::before で作成

文字の p 要素とオーバーレイの ::before は、普段 opacity: 0; で透明にしておき、ホバー時に opacity: 1; で表示されるようCSSを書きます。

CSSを書くときは、ホバーの指定をするセレクタの書き方がポイントになってきます。上の構造では「divにホバーした時のp要素」と「divにホバーした時の::before疑似要素」を表すセレクタを使います。

  • divにホバーした時のp要素「div:hover p
  • divにホバーした時の::before疑似要素「div:hover::before

以下に、具体的なコードを載せます。

コードの例

HTML

<div>
 <p>当店のパンはすべて自家製。<br>焼きたてをご提供しています。</p>
</div>

CSS

div {
 position: relative;
 width: 640px;
 height: 426px;
 margin: 50px auto;
 border: 1px solid #dfdfdf;
 background: url(../images/bread.jpg); /*画像は背景で指定(divの中にimg要素を入れ子にしてもOK)*/
 }
 div::before { /*オーバーレイ(画像に色を被せる)のスタイル*/
 content: "";
 position: absolute; /*positionがないとheight:100%;が効かない*/
 width: 100%; /*div要素いっぱいに広がるようにする*/
 height: 100%; /*div要素いっぱいに広がるようにする*/
 background: rgba(255,255,255,0.70);
 }
 p {
 position: relative;
 top: 50%; /*p要素を垂直方向中央に表示*/
 color: #222;
 font-size: 160%;
 text-align: center;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%); /*p要素を垂直方向中央に表示*/
 }
 div::before,
 p {
 opacity: 0; /*普段は文字とオーバーレイを透明にしておく*/
 -webkit-transition: 1s;
 transition: 1s;
 }
 div:hover p,
 div:hover::before {
 /*「divにホバーした時のp」と「divにホバーした時のbefore疑似要素」に対してスタイル指定*/
 opacity: 1; /*ホバー時に文字とオーバーレイを表示*/
 }

オーバーレイの疑似要素や文字をアニメーションで動かすと、色々なバリエーションを作ることができます。ぜひ試してみてください。

CSS3 CSSだけでいろいろな形の吹き出しを作る方法4 ~出っ張った部分がカーブした吹き出し~

出っ張り部分がカーブした吹き出し

3回にわたってCSSだけで吹き出しを作る方法を紹介しました。今回は、上の画像のような出っ張った部分がカーブした吹き出しの作り方を紹介します。今回の記事でCSSの吹き出しについては最後です。

出っ張った部分がカーブした吹き出しの作り方

出っ張り部分がカーブした吹き出しの作り方

カーブを表現するために、疑似要素の ::before と ::after を両方使います。背面の疑似要素は吹き出しの色にし、前面の疑似要素は背景の色にします。疑似要素はどちらも、要素本体の背面に表示したいので、z-index: -1; を指定して重ね順を変えます。

出っ張った部分がカーブした吹き出しのコード例

HTML

<p>sample</p>

CSS

body { background: #EEE; }
p{
 position: relative;
 width: 200px;
 height: 50px;
 margin: 30px;
 font-size: 18px;
 color: #fff;
 line-height: 50px;
 text-align: center;
 background-color: #009D78;
 border-radius: 10px;
}
p::before,
p::after {
 content: "";
 position: absolute;
 z-index: -1;
 width: 35px;
 height: 35px;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 bottom: -12px;
 left: 36%;
 background-color: #009D78;
}
p::after{
 bottom: -16px;
 left: 30%;
 background-color: #EEE; /*背景の色を指定*/
}

DEMO

出っ張り部分がカーブしている吹き出しデモ

CSS3 CSSだけでいろいろな形の吹き出しを作る方法3 ~考えているときの吹き出し~

前々回の記事前回の記事と、CSSだけで吹き出しを作る方法を紹介してきました。今回の記事では、漫画などで「考えていること」を表すときに使われる吹き出しのCSSを紹介します。

考えているときの吹き出しの作り方

考えているときの吹き出しの作り方

普通の吹き出しでは三角形になる部分が、この形の吹き出しでは円形になります。この部分は疑似要素の ::before と ::after を両方使って表現します。円形を作るには、widthとheightを指定したうえで、border-radiusの値を50%に指定します。

疑似要素の円の位置は、bottom や left で様子を見ながら調整してください。

考えているときの吹き出しのコード例

HTML

<p>sample</p>

CSS

p{
 position: relative;
 width: 200px;
 height: 80px;
 margin: 30px;
 font-size: 18px;
 color: #FFF;
 line-height: 80px;
 text-align: center;
 background-color: #009D78;
 border-radius: 50%;
}
p::before,
p::after {
 content: "";
 position: absolute;
 background-color: #009D78;
 border-radius: 50%; /*疑似要素を円形にする*/
}
p::before{
 width: 22px;
 height: 22px;
 bottom: -12px;
 left: 42%;
}
p::after{
 width: 14px;
 height: 14px;
 bottom: -26px;
 left: 35%;
}

DEMO

考えているときの吹き出し

次回記事では、普通の吹き出しで三角形の部分が、カーブした形になっている吹き出しの作り方を紹介します。次回の記事でCSSの吹き出しについては最後です。

CSS3 CSSだけでいろいろな形の吹き出しを作る方法2 ~ふち付きの吹き出し~

前回の記事で、CSSだけで作る基本の吹き出しを紹介しました。今回は、基本の吹き出しに少し手を加えた、ふち付きの吹き出しの作り方を紹介します。

ふち付きの吹き出しの作り方

ふち付きの吹き出しは、前回の記事で紹介した基本の吹き出しに少し手を加えれば作ることができます。基本の吹き出しと違うのは、要素本体にボーダーを付けることと、擬似要素で作る三角の部分に ::before と ::after を両方使うところです。

ふち付き吹き出しの作り方

吹き出しの三角形の部分は、擬似要素で作った2つの三角形を少しずらして重ね、ふちを表現します。背面の三角形はふちの色、前面の三角形は吹き出しの中の色にし、前面の三角形を上にずらします。どの程度ずらすかは、ブラウザで表示して様子を見ながら調整してください。正確にふちの幅を出したい場合、三角関数の計算になると思います。

また、縁の色をした三角形が吹き出しの上に表示されないように(三角形の縁が食い込まないように)、z-index: -1; を指定して要素本体より背面に表示させます。

ふち付きの吹き出しのコード例

具体的には以下のようなコードになります。

HTML

<p>sample</p>

CSS

p{
 position: relative;
 width: 200px;
 height: 50px;
 border: 1px solid #009D78; /*ボーダーを設定する*/
 margin: 30px;
 font-size: 18px;
 color: #009D78;
 line-height: 50px;
 text-align: center;
 background-color: #FFF; /*吹き出しの内側の色を指定する*/
 border-radius: 10px;
}
p::before{
 content: "";
 position: absolute;
 z-index: -1; /*要素本体より背面に表示*/
 bottom: -12px; /*::afterより下に表示*/
 left: 50%;
 margin-left: -10px;
 border-style: solid;
 border-color: #009D78 transparent transparent transparent; /*ふちの色の三角形を作る*/
 border-width: 15px 10px 0 10px;
}
p::after{
 content: "";
 position: absolute;
 bottom: -10px; /*::beforeより上に表示*/
 left: 50%;
 margin-left: -10px;
 border-style: solid;
 border-color: #FFF transparent transparent transparent; /*吹き出しの内側の色の三角形を作る*/
 border-width: 15px 10px 0 10px;
}

 DEMO

ふち付きの吹き出しデモ

次回記事では、「考えているときの吹き出し」を紹介します

CSS3 CSSだけでいろいろな形の吹き出しを作る方法1 ~基本の吹き出し~

以前「CSSだけで吹き出しを作る方法」という記事で疑似要素とボーダーを使ってCSSだけで吹き出しを作る方法を紹介しました。そのとき紹介したのは一番シンプルな見た目の吹き出しでしたが、違う形の吹き出しも作れますので、数回の記事に分けて紹介していきたいと思います。今回は、以前も紹介していますが、基本の吹き出しの作り方をもう一度紹介します。

基本の吹き出しの作り方

基本の吹き出しの作り方です。「CSSだけで吹き出しを作る方法」でも紹介していますが、今回はもう少し分かりやすく図解します。

基本の吹き出しの作り方

三角形の作り方

吹き出しの三角形はボーダーで作ることができます。これは、上下左右のボーダーが接するとき、角の部分が斜めになるのを利用しています。

たとえば、以下のようなCSSを書いたとき、

div {
  width: 0;
  height: 0;
  border-top: 50px solid cyan;  /*上のボーダーはシアン*/
  border-left: 50px solid magenta;  /*左のボーダーはマゼンタ*/
  border-right: 50px solid yellow;   /*右のボーダーはイエロー*/
  border-bottom: 50px solid black;  /*下のボーダーはブラック*/
}

ブラウザで表示すると下のようになります。

 

上下左右のボーダーのうち、1つに色をつけて、他を透明(transparent)にすれば三角形の出来上がりです。

div {
  width: 0;
  height: 0;
  border: 50px solid transparent;  /*上のボーダー以外は透明*/
  border-top: 50px solid cyan;  /*上のボーダーはシアン*/
}

 

これを利用して作った疑似要素の三角を、positionで要素の任意の位置に持っていきます。具体的には以下のようなコードになります。

吹き出しのコードの例

HTML

<p>sample</p>

CSS

p{
  position: relative;
  width: 200px;
  height: 50px;
  margin: 30px;
  font-size: 18px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background-color: #009D78;
  border-radius: 10px;
}
p::after{
  content: "";
  position: absolute;
  bottom: -12px;  /*マイナス値を指定して三角形を下にはみ出させる*/
  left: 50%;
  margin-left: -10px;  /*左右のボーダーの線幅ぶん右にずれるので調整*/
  border-style: solid;
  border-color: #009D78 transparent transparent transparent;  /*上のボーダー以外透明*/
  border-width: 15px 10px 0 10px;  /*下のボーダーは不要なので0*/
}

DEMO

基本の吹き出しデモファイル

次回記事では、ふち付きの吹き出しを作る方法を紹介します。

CSS floatを使わないレイアウト「Flexbox」について8~各ブラウザの対応状況~

これまで7回にわたってFlexboxを紹介してきましたが、今回の記事で最後になります。今回は、各ブラウザの対応状況についてです。

今までの記事

  1.  CSS floatを使わないレイアウト「Flexbox」について1~基本の指定~
  2. CSS floatを使わないレイアウト「Flexbox」について2~配置方法を指定する色々なプロパティ
  3. CSS floatを使わないレイアウト「Flexbox」について3~並べる向きとボックスの折り返し設定~
  4. CSS floatを使わないレイアウト「Flexbox」について4~主軸に沿ってどのように並べるかの設定~
  5. CSS floatを使わないレイアウト「Flexbox」について5~交差軸の配置方法を指定する~

ブラウザの対応状況

Flexboxは、まだ正式勧告されてませんが、2016年に勧告候補となっているので、モダンブラウザではベンダープレフィックスの記述無しで実装されています。しかし、古いブラウザに対応する場合はベンダープレフィックスの記述が必要です。Flexboxは仕様の変更が何度かあったため、ベンダープレフィックスで記述する際は、現在の書き方とは違う書き方になります。ご注意ください。

ここではdisplayプロパティでflexを指定する場合の指定を紹介しますが、Flexプロパティなども、ベンダープレフィックスを記述しなければいけない場合があります。Flexプロパティのベンダープレフィックスについては、後述の参考サイトに詳しく紹介されていましたので、リンクを張っておきます。

Flexbox対応状況
ブラウザ バージョン displayプロパティの記述
Chrome 4~20 display:-webkit-box
21~28 display:-webkit-flex
29~ display:flex
Firefox 2~21 display:-moz-box
22~ display:flex
InternetExplorer ~9 未対応
10 display:-ms-flexbox
11 display:flex
Safari (PC) 3.1~6.0 display:-webkit-box
6.1~8 display:-webkit-flex
9~ display:flex
Androidブラウザ 2.1~4.3 display:-webkit-box
4.4 display:flex
iOS-Safari 3.2~6.1 display:-webkit-box
7.0~8.4 display:-webkit-flex
9.1~ display:flex

参考サイト

CSS floatを使わないレイアウト「Flexbox」について7~個々のアイテムの大きさに関する指定~

これまで6回の記事にわたってFlexboxの関連プロパティについて紹介してきましたが、今回で関連プロパティを紹介し終わります。最後に紹介するのは以下の4つのプロパティです。いずれもFlexアイテムの大きさ指定に関するプロパティです。

  • flex-basis:Flexアイテムの主軸方向の基本の長さ
  • flex-grow:Flexアイテムを引き伸ばす比率
  • flex-shrink:Flexアイテムを縮める比率
  • flex:flex-grow、flex-shrink、flex-basisをまとめて指定

flex-grow:Flexアイテムを引き延ばす比率

Flexコンテナーに余白があるとき、Flexアイテムを主軸方向へ引き延ばします。コンテナーの余白をアイテムの長さに割り振る際、他のアイテムに比べてどのくらいの比率で割り振るかを数値で指定します。マイナス値は指定できません。他のアイテムの長さに対するそのアイテムの長さの比率ではないのでご注意ください。

指定する場所:Flexアイテム

flex-shrink:Flexアイテムを縮める比率

flex-growとは逆で、Flexコンテナーにアイテムが納まりきらないときに、ほかのアイテムに比べてどの程度要素の長さを縮めるかを数値で指定します。アイテムを折り返す指定の時は、「アイテムが収まりきらない」ことがないので、flex-wrap: nowrap のときしか指定は反映されません

指定する場所:Flexアイテム

flex-basis:Flexアイテムの主軸方向の基本の長さ

widthやheightのように、Flexアイテムの主軸方向の長さを指定するためのプロパティです。widthやheightと違う点は、必ずしもこのプロパティで指定した長さがそのまま適用されるとは限らないというところです。あくまでも基本の長さなので、 flex-grow や flex-shrink の指定などによってアイテムの長さが変わる場合があります。値の指定には、pxやem、%などの単位が使えます。

指定する場所:Flexアイテム

flex:flex-grow,flex-shrink,flex-basisをまとめて指定

指定する場所:Flexアイテム

flex:【flex-growの値】 【flex-shrinkの値】 【flex-basisの値】

上のように、flex-grow、flex-shrink、flex-basis の順番で指定します。

IE11のバグ

IE11では、flexプロパティでflexbasisの値に0を指定する際、単位を省略するとflexbasisの値が無視されてしまうというバグがありますので、0でも単位をつけて指定してください。

flex: 1 0 0;  /* IE11で最後の0が無視される */
flex: 1 0 0%;  /* このように単位をつければ問題なし */

参考サイト

 

 

CSS floatを使わないレイアウト「Flexbox」について6~個々のアイテムの配置位置や順番変更~

前回の記事では、交差軸方向のアイテムの配置に関するプロパティを紹介しました。今回は、アイテムひとつひとつの配置方法や位置変更をする以下の2つのプロパティを紹介します。

  • align-self:ある特定のFlexアイテムを交差軸のどの位置に配置するか(align-itemsはFlexコンテナーに指定、align-selfはFlexアイテムに個別指定)
  • order:並べる順序の指定

今回紹介するこの2つのプロパティから、Flexアイテムに対して指定をするプロパティです。前回までの記事では、Flexコンテナーに指定するプロパティのみ紹介してきたので、指定する場所に気を付けてください。はじめにFlexboxの構造と今までの記事へのリンクを載せておきます。

Flexboxの構造

Flexboxの構造の模式図

今までの記事

  1.  CSS floatを使わないレイアウト「Flexbox」について1~基本の指定~
  2. CSS floatを使わないレイアウト「Flexbox」について2~配置方法を指定する色々なプロパティ
  3. CSS floatを使わないレイアウト「Flexbox」について3~並べる向きとボックスの折り返し設定~
  4. CSS floatを使わないレイアウト「Flexbox」について4~主軸に沿ってどのように並べるかの設定~
  5. CSS floatを使わないレイアウト「Flexbox」について5~交差軸の配置方法を指定する~

align-self:特定のFlexアイテムを交差軸のどの位置に配置するか

前回の記事で紹介した align-items や align-content は、Flexコンテナーに指定してFlexbox内のすべてのアイテムを並べるプロパティでした。しかしalign-self は、Flexアイテム自体に指定して個々のアイテムごとに配置を指定することができるプロパティです。

指定する場所:Flexアイテム

align-selfの値
意味 左から右へ並べた時の見た目
auto 親要素のalign-itemsの値と同じになる(初期値)
stretch アイテムの長さがcross-axisに沿ってFlexコンテナー一杯に広がる アイテムの高さがFlexコンテナー一杯に広がる
flex-start cross-start(交差軸の始点)側に詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
baseline 文字のベースラインが一直線になるように配置する align-self: baseline; を指定した他のアイテムとベースラインが揃う

align-selfイメージ

指定の例

HTML

<div class="container">
  <div>BOX01</div>
  <div class="box02">BOX02</div> <!-- このアイテムだけ交差軸の配置位置を変える -->
  <div>BOX03</div>
</div>

CSS

.container { display: flex; }
.box02 { align-self: flex-end; } /* .box02のみ交差軸の終端に配置 */

DEMO

align-selfの指定例

order:並べる順序の指定

order は、個々のFlexアイテムに指定して、アイテムを並べる順番を指定するプロパティです。順番は整数値で指定します(負の値も可)。

指定する場所:Flexアイテム

指定の例

HTML

<div class="container">
  <div>BOX01</div> <!-- 3番目に移動 -->
  <div>BOX02</div> <!-- 1番目に移動 -->
  <div>BOX03</div> <!-- 2番目に移動 -->
  <div>BOX04</div> <!-- 6番目に移動 -->
  <div>BOX05</div> <!-- 4番目に移動 -->
  <div>BOX06</div> <!-- 5番目に移動 -->
</div>

CSS

.container>:nth-child(1) { order: 3; }
.container>:nth-child(2) { order: 1; }
.container>:nth-child(3) { order: 2; }
.container>:nth-child(4) { order: 6; }
.container>:nth-child(5) { order: 4; }
.container>:nth-child(6) { order: 5; }

DEMO

orderの指定例

参考サイト

CSS floatを使わないレイアウト「Flexbox」について5~交差軸の配置方法を指定する~

前回の記事で、主軸に沿ってどのように並べるかを指定する justify-content プロパティを紹介しました。今回は交差軸の配置を指定するプロパティを2つ紹介します。

  • align-items:交差軸のどの位置に並べるか
  • align-content:Flexアイテムを折り返す設定のとき、交差軸に沿ってどのように並べるか

align-items:交差軸のどの位置に並べるか

Flexコンテナーの交差軸方向に余白ができる場合、アイテムを交差軸のどの位置に並べるか指定するプロパティです。複数行の場合も適用されますが、align-content が stretch 以外で指定されているときは、align-content の見た目のみ反映されます。

指定する場所:flexコンテナー

align-itemsの値
意味 左から右へ並べた時の見た目
stretch アイテムの長さがcross-axisに沿ってFlexコンテナー一杯に広がる(初期値) アイテムの高さがFlexコンテナー一杯に広がる
flex-start cross-start(交差軸の始点)側に詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
baseline 文字のベースラインが一直線になるように配置する ベースラインが横一直線に揃う

align-itemsイメージ

align-content:交差軸に沿ってどのように並べるか(複数行の場合)

アイテムが折り返される設定(flex-wrap が wrap か wrap-reverse)のときにアイテムを交差軸に沿ってどのように並べるかを指定します。flex-wrap が nowrap の時は無効です。上詰め、下詰め、上下中央配置、上下均等配置などができます。

指定する場所:flexコンテナー

align-contentの値
意味 左から右へ並べた時の見た目
stretch アイテムの長さがcross-axisに沿ってFlexコンテナーの余白を埋めるように広がる(アイテムの長さはすべての行で同じになる)(初期値) アイテムの高さがFlexコンテナーの余白を埋めるように広がる(アイテムの長さはすべての行で同じになる)
flex-start cross-start(交差軸の始点)側に全体を詰める 上詰め
flex-end cross-end(交差軸の終点)側に詰める 下詰め
center 中央に配置 上下中央配置
space-between Flexアイテムを均等配置する
(最初のアイテムをcross-startに、最後のアイテムをcross-endに配置)
均等配置(上下にスペースなし)
space-around Flexアイテムを均等配置する
(アイテムの周囲に均等にスペースをとる)
均等配置(上下にスペースあり)

align-contentイメージ

使い分け

交差軸(cross-axis)方向の配置方法を指定するプロパティを2つ紹介しましたが、効果が似ていて使い分けに迷うかもしれません。しかし、align-content の方は複数行の時しか反映されないので、1行の時は align-items 、複数行の場合は align-content を使えば大丈夫です。

参考サイト

CSS floatを使わないレイアウト「Flexbox」について4~主軸に沿ってどのように並べるかの設定~

前回の記事で、主軸の向きを設定するflex-direction、アイテムの折り返しをするかどうかのflex-wrap、その二つをまとめて書くショートハンドプロパティflex-flowを紹介しました。今回は、以下のFlexbox関連プロパティを紹介します。

  • justify-content:主軸に沿ってどのように並べるか

justify-content:主軸に沿ってどのように並べるか

主軸に沿ってどのようにFlexアイテムを並べるか指定することができます。右寄せ、左寄せ、中央配置、均等配置などの設定ができます。

指定する場所:flexコンテナー

justify-contentの値
意味 左から右へ並べた時の見た目
flex-start 最初のFlexアイテム側に詰める(初期値) 左寄せ
flex-end 最後のFlexアイテム側に詰める 右寄せ
center 中央に配置 左右中央配置
space-between Flexアイテムを均等配置する
(最初のアイテムを始点に、最後のアイテムを終端に配置)
均等配置(両端にスペースなし)
space-around Flexアイテムを均等配置する
(アイテムの周囲に均等にスペースをとる)
均等配置(両端にスペースあり)

justify-contentのイメージ

記述例

HTML

<div class="container">
  <div>BOX01</div>
  <div>BOX02</div>
  <div>BOX03</div>
</div>

CSS

.container { justify-content: center; }

参考サイト