CSS

【コピペでCSS】Webサイトでもスペースキーを使わずにタイトルを揃える方法

2020.07.20

by support
0

こんな本が今話題？「スペースキーで見た目を整えるのはやめなさい」という目を引く見出しの書籍が今、売れているのをご存知でしょうか？いわゆるワードで、このように見出しや本文を「スペースキー」でそろえる方法ですが、今日はWebサイトで見出しをそろえるには？ということを考えてみたいと思います。最終動作デモページはこちら中央寄せの場合、落ち着かない見出しは「text-align: center;」で「中央寄せ」することがあるかと思います。上の例のような、左に見出しのある表の場合は、中央寄せをすると各項目のスタート位置と終了位置がそろいません。 ▼「text-align: center;」で見出しを中央寄せした場合これはこれで「日時」と「会場」の左右が空いて落ち着かない感じがあります。ここはやはり均等割り付け CSSで均等割り付けを表現するにはどうしたらよいでしょう？ text-alignプロパティには、均等割り付けの値「justify」があります。下図のように、要素の大きさの左右を埋めるようにテキストが配置されるのですが、問題はこのjustifyに対応できるブラウザが現時点で少ないことです。 ※2020年7月時点で対応可能なブラウザは、FireFox程度でした。 https://developer.mozilla.orgより引用ただ、これを利用して、うまく均等割り付けできるCSSに改良したいと思います。まずはHTML 今回はdl, dt, ddタグを使って書いていきます。 ※divでもtableでもどうぞ。 ▼HTML

<dl>
　　<dt>日時</dt>
　　<dd>2020年7月30日（木）13:00</dd>
</dl>

<dl>
　　<dt>会場</dt>
　　<dd>杉並ドームホテル 20F 桜の間</dd>
</dl>

<dl>
　　<dt>報告事項</dt>
　　<dd>第15期事業報告、連結計算書類及び計算書類の内容並びにその監査結果報告の件</dd>
</dl>

<dl>
　　<dt>決議事項</dt>
　　<dd>第１号議案　剰余金の処分の件
　　　　<br>第２号議案　 定款一部変更の件
　　　　<br>第３号議案　取締役３名選任の件
　　　　<br>第４号議案　監査役２名選任の件</dd>
</dl>

<dl>

</dl>

<dl>

　　<dd>杉並ドームホテル 20F 桜の間</dd>

</dl>

<dl>

　　<dd>第15期事業報告、連結計算書類及び計算書類の内容並びにその監査結果報告の件</dd>

</dl>

<dl>

　　<dd>第１号議案　剰余金の処分の件

　　　　<br>第２号議案　定款一部変更の件

　　　　<br>第３号議案　取締役３名選任の件

　　　　<br>第４号議案　監査役２名選任の件</dd>

</dl>

CSSは疑似要素 :after を活用

dl {
　　display: flex;
}
        
dt {
　　width: 100px;
　　text-align: justify;
　　text-justify: inter-ideograph;
}

dt::after {
　　content: "";
　　display: inline-block;
　　width: 100%;
}

dl {

　　display: flex;

}

dt {

　　width: 100px;

　　text-align: justify;

　　text-justify: inter-ideograph;

}

dt::after {

　　content: "";

　　display: inline-block;

　　width: 100%;

}

dlはdisplay: flex;で横並びにします。見出しのdt部分にはtext-align:justify;を設定、そしてafterを設定します。 IE対応を忘れずに dtには「text-justify: inter-ideograph;」という値も設定しています。 justityがIEは日本語が効かないので、IE独自の値も設定してあげるとIEユーザーでもOKです。最終動作デモページはこちら

CSS

display「block」と「inline-block」の違いは？使い方、サンプルで違いがすっきり！

2019.09.22

by support
0

display:「block」と「inline-block」の違いまずはblockとinline-blockの違いを見ていきましょう。 blockは要素が横幅いっぱいに表示されます。一方、inline-blockはその要素の幅に応じて、要素が詰めて表示されます。上図のように、要素Cは要素A,Bの行に入り切らないので、自動的に改行されて表示されます。「block」の使い方とサンプル HTML

<ul>
     <li>
          <div class="block">2019年8月8日</div>
          <div class="inlineblock">タピオカミルクティ抹茶味の販売を開始しました</div>
     </li>
     <li>
          <div class="block">2019年8月2日</div>
          <div class="block">新宿2号店をオープンしました</div>
     </li>
</ul><

<ul>

<li>

<div class="inlineblock">タピオカミルクティ抹茶味の販売を開始しました</div>

</li>

<li>

<div class="block">新宿2号店をオープンしました</div>

</li>

</ul><

CSS

.block {
     display: block;
}
ul {
     padding: 0;
     margin: 0;
}
li {
     border-bottom: 1px solid #dedede;
     padding: 0 0 10px 0;
     margin: 0 0 10px 0;
     list-style-type: none;
}

.block {

display: block;

}

ul {

padding: 0;

margin: 0;

}

li {

border-bottom: 1px solid #dedede;

padding: 0 0 10px 0;

margin: 0 0 10px 0;

list-style-type: none;

}

表示 2019年8月8日タピオカミルクティ抹茶味の販売を開始しました 2019年8月2日新宿2号店をオープンしました（注）divは初期値としてdisplayがblockを持っているので、cssでわざわざblockを指定しなくてもよいですが、ここではあえて書いています。「inline-block」の使い方とサンプル HTML

<ul>
     <li>
          <div class="inlineblock">2019年8月8日</div>
          <div class="tag inlineblock">新商品</div>
          <div class="inlineblock">タピオカミルクティ抹茶味の販売を開始しました</div>
     </li>
     <li>
          <div class="inlineblock">2019年8月2日</div>
          <div class="tag inlineblock">新店舗</div>
          <div class="inlineblock">新宿2号店をオープンしました</div>
     </li>
</ul>

<ul>

<li>

<div class="inlineblock">タピオカミルクティ抹茶味の販売を開始しました</div>

</li>

<li>

<div class="inlineblock">新宿2号店をオープンしました</div>

</li>

</ul>

CSS

.inlineblock {
     display: inline-block;
}
.tag {
     background: #ff9800;
     border-radius: 4px; color: #fff;
     font-size: 90%;
     padding: 2px 10px;
}
ul {
     padding: 0;
     margin: 0;
}
li {
     border-bottom: 1px solid #dedede;
     padding: 0 0 10px 0;
     margin: 0 0 10px 0;
     list-style-type: none;
}

.inlineblock {

display: inline-block;

}

.tag {

background: #ff9800;

border-radius: 4px; color: #fff;

font-size: 90%;

padding: 2px 10px;

}

ul {

padding: 0;

margin: 0;

}

li {

border-bottom: 1px solid #dedede;

padding: 0 0 10px 0;

margin: 0 0 10px 0;

list-style-type: none;

}

表示 2019年8月8日新商品タピオカミルクティ抹茶味の販売を開始しました 2019年8月2日新店舗新宿2号店をオープンしました初期値でblockを持っているhtmlタグ divのように初めからblock要素を持っているタグがあり、その場合はcssでdisplay: block;を指定する必要はありません。このように、初期値でblockをとる要素は次のようなタグがあります。 <address>　住所など <article>記事など <aside>　脚注、補足情報 <blockquote>　引用 <details>　折りたたみ要素 <dialog>　ダイアログボックス <dd>　定義リストの内容 <div>　文章 <dl>　定義リスト <dt>　定義リストの見出し問題1 次の場合は、どのように表示されるでしょうか？ HTML

<div class="block">りんご</div>
<div class="block">みかん</div>
<div class="block">メロン</div>

CSS

.block {
     display: block;
}

.block {

display: block;

}

それぞれブロックなので、表示は次のように、一行ずつ表示されます。表示りんごみかんメロン問題2 では次の場合は、どのように表示されるでしょうか？ […]

CSS

10秒で設置完了！コピペで使えるボタンデザイン（ホバーアクションつき）

2019.03.06

by support
0

コピー＆ペーストだけの10秒で設置完了なボタンです。背景色や文字色、ホバーのアクションを変更してオジリナルのボタンも簡単につくれます。フラットな角丸ボタン Hello!

.button01 {
   background: #2096f3;
   border: none;
   border-radius: 5px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
   color: #fff;
   padding: 15px 0;
   width: 200px;
}
.button01:hover {
   background: #0d7ad0;
   box-shadow: none;
}

.button01 {

background: #2096f3;

border: none;

border-radius: 5px;

box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);

color: #fff;

padding: 15px 0;

width: 200px;

}

.button01:hover {

background: #0d7ad0;

box-shadow: none;

}

フラットな四角いボタン Hello!

.button02 {
   background: #00bcd4;
   border: 2px solid transparent;;
   color: #fff;
   padding: 15px 0;
   width: 200px;
}
.button02:hover {
   background: #fff;
   border: 2px solid #00bcd4;
   color: #00bcd4;
}

.button02 {

background: #00bcd4;

border: 2px solid transparent;;

color: #fff;

padding: 15px 0;

width: 200px;

}

.button02:hover {

background: #fff;

border: 2px solid #00bcd4;

color: #00bcd4;

}

フラットな枠だけボタン Hello!

.button03 {
   background: #fff;
   border: 2px solid #00bcd4;
   color: #00bcd4;
   padding: 15px 0;
   width: 200px;
}
.button03:hover {
   background: #00bcd4;
   border: 2px solid transparent;
   color: #fff;
}

.button03 {

background: #fff;

border: 2px solid #00bcd4;

color: #00bcd4;

padding: 15px 0;

width: 200px;

}

.button03:hover {

background: #00bcd4;

border: 2px solid transparent;

color: #fff;

}

フラットな押しごたえのあるボタン Hello!

.button04 {
   background: #ff9800;
   border: none;
   border-radius: 5px;
   box-shadow: 0 8px 0 #c97800;
   color: #fff;
   padding: 15px 0;
   width: 200px;
}

.button04 {

background: #ff9800;

border: none;

border-radius: 5px;

box-shadow: 0 8px 0 #c97800;

color: #fff;

padding: 15px 0;

width: 200px;

}

グラデーションのふわっとしたボタン Hello!

.button05 {
   background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);
   border: none;
   border-radius: 30px;
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.15);
   color: #fff;
   padding: 15px 0;
   width: 200px;
}

.button05 {

background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);

border: none;

border-radius: 30px;

box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.15);

color: #fff;

padding: 15px 0;

width: 200px;

}

立体的なつるっとしたボタン Hello!

.button06 {
   background: linear-gradient(0deg, #32a4ff 0%, #2196F3 49%, #3fa9fe 50%, #88caff 100%);
   border: none;
   border-radius: 6px;
   box-shadow: 0px 5px 0 #047ad3;
   color: #fff;
   padding: 15px 0;
   width: 200px;
}

.button06 {

background: linear-gradient(0deg, #32a4ff 0%, #2196F3 49%, #3fa9fe 50%, #88caff 100%);

border: none;

border-radius: 6px;

box-shadow: 0px 5px 0 #047ad3;

color: #fff;

padding: 15px 0;

width: 200px;

}

文字間隔が広がるボタン Hello!

.button07 {
   background: #2096f3;
   border: none;
   border-radius: 5px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
   color: #fff;
   padding: 15px 0;
   width: 200px;
}
.button07:hover {
   letter-spacing: 0.3em;
}

.button07 {

background: #2096f3;

border: none;

border-radius: 5px;

box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);

color: #fff;

padding: 15px 0;

width: 200px;

}

.button07:hover {

letter-spacing: 0.3em;

}

古いWindows風なボタン Hello!

.button08 {
   background: #ebebeb;
   border-top: 4px solid #ddd;
   border-bottom: 4px solid #9fa6ab;
   border-right: 4px solid #9fa6ab;
   border-left: 4px solid #ddd;
   color: #333;
   padding: 15px 0;
   width: 200px;
}

.button08 {

background: #ebebeb;

border-top: 4px solid #ddd;

border-bottom: 4px solid #9fa6ab;

border-right: 4px solid #9fa6ab;

border-left: 4px solid #ddd;

color: #333;

padding: 15px 0;

width: 200px;

}

二重枠ボタン Hello!

.button09 {
   background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);
   border: 2px solid #2196F3;
   color: #fff;
   padding: 15px 0;
   width: 200px;
   outline: solid 2px #2196F3;
}

.button09 {

background: linear-gradient(-45deg, #22e3bb 0%, #2196F3 100%);

border: 2px solid #2196F3;

color: #fff;

padding: 15px 0;

width: 200px;

outline: solid 2px #2196F3;

}

グラデーション枠ボタン Hello!

.button10 {
   background: #fff;
   border-top: 5px solid #2196F3;
   border-bottom: 5px solid #22e3bb;
   background-image: linear-gradient(#2196F3, #22e3bb), linear-gradient(#2196F3, #22e3bb);
   background-size: 5px 100%;
   background-position: 0 0, 100% 0;
   background-repeat: no-repeat;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   color: #0f94f6;
   padding: 15px 0;
   width: 200px;
}

.button10 {

background: #fff;

border-top: 5px solid #2196F3;

border-bottom: 5px solid #22e3bb;

background-image: linear-gradient(#2196F3, #22e3bb), linear-gradient(#2196F3, #22e3bb);

background-size: 5px 100%;

background-position: 0 0, 100% 0;

background-repeat: no-repeat;

box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);

color: #0f94f6;

padding: 15px 0;

width: 200px;

}

CSS

CSSでもっと魅力的に！動きのある下線をグラデーションで作ってみよう

2018.07.13

by support
0

今回作りたいものテキストにグラデーションで下線を引き、マウスオーバーでグラデーションが縦方向に伸びる動きをつけたいと思います。 HTMLの準備表示したいテキストを自由に書きます。今回は、h1タグとpタグでそれぞれ書きました。タグは自由です。divでもh2でも。

<h1>All their equipment and <span class="underline">instruments</span> are alive.</h1>
<p>All their equipment and instruments are alive. All their <span class="underline">equipment and instruments</span> are alive. All their equipment and instruments are alive.</p>

1 2	<h1>All their equipment and <span class="underline">instruments</span> are alive.</h1> <p>All their equipment and instruments are alive. All their <span class="underline">equipment and instruments</span> are alive. All their equipment and instruments are alive.</p>

下線を引きたいテキスト部分にクラス名をつけます。ここでは class=”underline” としました。クラス名も自由です。テキストにCSSで下線を引くテキストにグラデーションの下線を引くには background を利用します。

.underline {
            background-image: linear-gradient(120deg, #5cedff 0%, #f096ff 100%);
            background-repeat: no-repeat;
            background-size: 100% 0.4em;
            background-position: 0px 90%;
}

.underline {

background-image: linear-gradient(120deg, #5cedff 0%, #f096ff 100%);

background-repeat: no-repeat;

background-size: 100% 0.4em;

background-position: 0px 90%;

}

1. 背景色はlinear-gradientを使用し、中身は(角度, 開始色開始位置, 終了色終了位置)となっています。今回は120度の角度で、テキストの頭（0%の位置）を水色に、テキストの最後（100%の位置）を紫にしています。 2. background-repeatは、今回は繰り返さないのでなしにしています。ここまでの2つで、テキストに対し、高さいっぱいのグラデーションができました。↓↓↓ 3. 下線っぽくするには、background-sizeで高さを調整します。 background-sizeは(横のサイズ縦のサイズ)となっているので、今回は(横100% 高さ0.4em)としています。ここでは単位は%, emのほか、pxも使用できます。ここまでの1〜3で、上から下線ができました。↓↓↓ 4. 最後に、テキストの下に下線を引きたいので、background-positionで位置を調整します。 background-positionは(左からの開始位置上からの開始位置)となっており、今回は(左から開始上は90%の位置から開始)としています。これも単位は%やpxなどを使用できます。動きをつけようせっかくなので、下線部分のテキストにマウスオーバーしたら、下線が広がる動きをつけます。

.underline:hover {
            background-size: 100% 90%;
}

.underline:hover {

background-size: 100% 90%;

}

ホバー時に、background-sizeの高さの方を90%にします。（100%でもいいですよ。）するとこんな感じ↓↓↓ カクカクした感じになるので、これをスムーズにするにはtransitionを使用します。 transitionは動きをスムーズにできる underlineにcssでtransitionを設定追加します。

.underline:hover {
            transition: background-size 0.25s ease-in;
}

.underline:hover {

transition: background-size 0.25s ease-in;

}

ここではbackground-sizeに0.25秒かけて高さを90%まで広げる命令です。＊0秒だと、さっきのカクカクした動作。そして完成。 […]

CSS

CSS学習中の方からの質問「position: relative; とposition: absolute; の違いが分かりません！」

2018.01.15

by support
0

地図で東京スカイツリーの位置を考えてみよう absolute（アブソリュートと読みます）は、地図では緯度経度のようなものです。例えば「東京スカイツリーは東経139.7713562度、北緯35.6955548度の位置にあります。」と言えば、スカイツリーがまったくどこにあるのか分からない方も、日本の位置も知らない海外の方も、地図上でスカイツリーの場所を見つけることができます。一方、relative（リレイティブ、レラティブと読みます）は、地図ではどこかを基準点とした位置のようなものです。例えば、「たかし君の家は、郵便局から２軒先にある」というのも分かりやすい例のひとつですが、「東京スカイツリーは、東京駅から北東に5.1kmの距離にあります。」という風に言うと、２地点の距離と、東西南北の関係が分かります。さらに、「東京スカイツリーは、東京駅から北東に5.1kmの距離にあり、成田空港から西の方向に53kmの距離にあります。」となると東京スカイツリーは基準とする地点を変えることで、 5.1kmとも、53kmとも表記することができるようになります。これがrelativeの便利な使い方です。絶対位置のabsolute、相対位置のrelative このように、absoluteは原点からの位置を表すので、「絶対位置」と、 relativeは２要素の位置関係を表すので、「相対位置」とも呼ばれます。 Web上の原点はどこ？ Webサイトの原点とは一体どこでしょうか？ページをブラウザで開いたときの、左上が原点です。 absoluteで四角形を描いてみようではこのページで、300px x 200pxの長方形を、原点から右下に作成したいと思います。 Webでは右下が正の向きです。

position: absolute;   //原点からの絶対位置
left: 0px;   //始点（ここでは原点）から左に0px
top: 0px;   //始点（ここでは原点）から下に0px
background: #green;   //四角形の背景色
width: 300px;   //四角形の横幅
height: 200px;   //四角形の高さ

position: absolute; //原点からの絶対位置

left: 0px; //始点（ここでは原点）から左に0px

top: 0px; //始点（ここでは原点）から下に0px

background: #green; //四角形の背景色

width: 300px; //四角形の横幅

height: 200px; //四角形の高さ

left, topとありますが、ここは場合に応じて、right（右から）やbottom（下から）としてもOKです。 absoluteの使いやすい点・そうでない点・特徴 position: absolute; は、スクリーンのサイズがいくつであっても、常に最上部、常に左端に、など固定位置に要素を置きたい場合に便利です。上の四角形の例の場合、スクリーンサイズが大きなユーザーの場合、右下にもっと余白ができます。また、常に原点を基点としているので、ページの真ん中あたりに任意のコンテンツを配置したい場合は、 topやleftの値が大きくなったり、またスクリーンサイズによっては想定した場所に表示されないなどのケースもありえます。ここまではposition: absolute;のお話でした。 relativeは親、absoluteは子として使う次はrelativeとabsoluteの合体技についてお話します。簡単に言えば、relativeを親要素とし、子要素としてabsoluteを入れ子にします。まずはHTMLで２つのdivを作り、子を入れ子にします。

<div class="parent">
<div class="child"></div>
</div>

</div>

次はCSSですが、親の要素に子要素をかぶせるようにしたいと思います。

.parent {
 position: relative;
 background: #green;
 width: 300px;
 height: 100px;
}

.child {
 position: absolute;
 background: orange;
 width: 50px;
 height:50px;
 top: 20px;
 left: 280px;
}

.parent {

position: relative;

background: #green;

width: 300px;

height: 100px;

}

.child {

position: absolute;

background: orange;

width: 50px;

height:50px;

top: 20px;

left: 280px;

}

実際にブラウザで見るとこんな感じになると思います。 relativeとabsoluteは組み合わせで使うと便利このように、親relativeに対し、子absoluteは親の原点からに対して、 […]

CSS

CSSだけで動かしてみよう！メッセージアプリのようなチャットUI

2017.08.18

by support
0

作るもの今回は、JavaScriptやjQueryは使用せず、CSSのみでLINEやSkypeのようなメッセージが自動的に動くものを作ってみたいと思います。最終形態はこちらです。デモページはこちら（http://sample.creativeflake.com/blog/chatui.html）事前準備今回使用するCSSは動作のためのキーフレーム @keyframes そして、CSSで変数を利用する var() の２つがポイントとなります。 CSS Variablesのブラウザ対応状況後者の変数ですが、CSSで利用するにはまだ開発中の機能であり、どのブラウザでも使えるとは限りません。また開発に伴い、構文と挙動について、仕様変更の可能性もありますので、導入の際は注意してください。 CSS Variablesの、主要各ブラウザは下記のとおり、緑の箇所のバージョンが対応しています。（2017年8月時点) FirefoxやSafari、Chrome等のPCブラウザ、スマホブラウザでもiOS Safari、Android対応しています。＊現時点でIEは非対応、Edgeも非推奨なので、使用する際は要注意です。参考: http://caniuse.com/ HTMLを作っていこう HTMLには、枠とメッセージを組み込みます。

<div class="msg-container">
	<div class="msg-content">
		<div id="msg1" class="msg-receive">おはよう＼(^o^)／</div>
		<div id="msg2" class="msg-receive">今起きた。<br>映画見てて気づいたら朝だったしｗ</div>
		<div id="msg3" class="msg-send">お腹すいたー( ´−`)。oO</div>
		<div id="msg4" class="msg-receive">お腹すいたね( ´−`)。oO<br>なんかおすすめない？</div>
		<div id="msg5" class="msg-send">今日午後新しくできたカフェに行かない？？</div>
		<div id="msg6" class="msg-receive">いいよ😃　何時に待ち合わせ？</div>
	</div>
</div>

<div id="msg2" class="msg-receive">今起きた。<br>映画見てて気づいたら朝だったしｗ</div>

<div id="msg3" class="msg-send">お腹すいたー( ´−`)。oO</div>

<div id="msg4" class="msg-receive">お腹すいたね( ´−`)。oO<br>なんかおすすめない？</div>

<div id="msg5" class="msg-send">今日午後新しくできたカフェに行かない？？</div>

<div id="msg6" class="msg-receive">いいよ😃　何時に待ち合わせ？</div>

</div>

特に気にすることなく、枠とメッセージ本文を書いていけばOKです。ここで、それぞれのメッセージには、ID名をつけてあげましょう。クラス名のmsg-receiveとmsg-sendは、スタイルシート用の色分けです。 CSSを書いてみよう下記がCSS全文です。長いですが、解説はCSSの下のとおりです。

:root {
	--msg-content-height: 510px;
	--msg-spacing: 30px;
	--msg1-height: 50px;
	--msg2-height: 70px;
	--msg3-height: 50px;
	--msg4-height: 70px;
	--msg5-height: 70px;
	--msg6-height: 50px;
}

.msg-send {
	background: #bef18c;
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #36393d;
	position: absolute;
	padding: 10px;
	animation-iteration-count: 1;
	animation-duration: 8s;
	animation-fill-mode: forwards;
	max-width: 320px;
}

.msg-receive {
	background: #e4e8eb;
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #36393d;
	position: absolute;
	padding: 10px;
	animation-iteration-count: 1;
	animation-duration: 8s;
	animation-fill-mode: forwards;
	max-width: 320px;
		}

.msg-container {
	background: #fff;
	box-shadow: 0 10px 25px 0px rgba(0,0,0,0.15);
	box-sizing: border-box;
	padding: 20px;
	margin: 50px auto;
	width: 400px;
}

.msg-content {
	height: var(--msg-content-height);
	position: relative;
}

#msg1 {
	animation-name: msg1;
}

#msg2 {
	animation-name: msg2;
}

#msg3 {
	animation-name: msg3;
}

#msg4 {
	animation-name: msg4;
}

#msg5 {
	animation-name: msg5;
}

#msg6 {
	animation-name: msg6;
}

@keyframes msg1 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg1-height));
		left: 0;
		transform: scale(0);
	}
	5% {
		top: calc(var(--msg-content-height) - var(--msg1-height));
		left: 0;
		transform: scale(1);
	}
	12% {
		top: calc(var(--msg-content-height) - var(--msg1-height));
	}
	17% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
	}
	30% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
	}
	35% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: 0;
		left: 0;
	}
}

@keyframes msg2 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
		left: 0;
		transform: scale(0);
		opacity: 0;
	}
	12% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
		left: 0;
		transform: scale(0);
	}
	17% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
		left: 0;
		transform: scale(1);
		opacity: 1;
	}
	30% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
	}
	35% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
		left: 0;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		left: 0;
	}
}

@keyframes msg3 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	30% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
		opacity: 0;
		transform: scale(0);
	}
	35% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
		right: 0;
		transform: scale(1);
		opacity: 1;
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
		right: 0;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		right: 0;
	}
}

@keyframes msg4 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
		left: 0;
		transform: scale(1);
		opacity: 1;
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
		left: 0;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		left: 0;
	}
}

@keyframes msg5 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
		right: 0;
		opacity: 0;
		transform: scale(0);
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
		right: 0;
		opacity: 0;
		transform: scale(0);
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
		right: 0;
		transform: scale(1);
		opacity: 1;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		right: 0;
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes msg6 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg6-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg6-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg6-height));
		left: 0;
		opacity: 1;
		transform: scale(1);
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

:root {

--msg-content-height: 510px;

--msg-spacing: 30px;

--msg1-height: 50px;

--msg2-height: 70px;

--msg3-height: 50px;

--msg4-height: 70px;

--msg5-height: 70px;

--msg6-height: 50px;

}

.msg-send {

background: #bef18c;

border-radius: 10px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

color: #36393d;

position: absolute;

padding: 10px;

animation-iteration-count: 1;

animation-duration: 8s;

animation-fill-mode: forwards;

max-width: 320px;

}

.msg-receive {

background: #e4e8eb;

border-radius: 10px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

color: #36393d;

position: absolute;

padding: 10px;

animation-iteration-count: 1;

animation-duration: 8s;

animation-fill-mode: forwards;

max-width: 320px;

}

.msg-container {

background: #fff;

box-shadow: 0 10px 25px 0px rgba(0,0,0,0.15);

box-sizing: border-box;

padding: 20px;

margin: 50px auto;

width: 400px;

}

.msg-content {

height: var(--msg-content-height);

position: relative;

}

#msg1 {

animation-name: msg1;

}

#msg2 {

animation-name: msg2;

}

#msg3 {

animation-name: msg3;

}

#msg4 {

animation-name: msg4;

}

#msg5 {

animation-name: msg5;

}

#msg6 {

animation-name: msg6;

}

@keyframes msg1 {

0% {

top: calc(var(--msg-content-height) - var(--msg1-height));

left: 0;

transform: scale(0);

}

5% {

top: calc(var(--msg-content-height) - var(--msg1-height));

left: 0;

transform: scale(1);

}

12% {

top: calc(var(--msg-content-height) - var(--msg1-height));

}

17% {

top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));

}

30% {

top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));

}

35% {

top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));

}

49% {

top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));

}

54% {

top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));

}

70% {

top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));

}

75% {

top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));

}

95% {

}

100% {

top: 0;

left: 0;

}

@keyframes msg2 {

0% {

top: calc(var(--msg-content-height) - var(--msg2-height));

left: 0;

transform: scale(0);

opacity: 0;

}

12% {

top: calc(var(--msg-content-height) - var(--msg2-height));

left: 0;

transform: scale(0);

}

17% {

top: calc(var(--msg-content-height) - var(--msg2-height));

left: 0;

transform: scale(1);

opacity: 1;

}

30% {

top: calc(var(--msg-content-height) - var(--msg2-height));

}

35% {

top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));

}

49% {

top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));

}

54% {

top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));

}

70% {

top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));

}

75% {

top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));

left: 0;

}

95% {

top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));

}

100% {

top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));

left: 0;

}

@keyframes msg3 {

0% {

top: calc(var(--msg-content-height) - var(--msg3-height));

left: 0;

opacity: 0;

transform: scale(0);

}

30% {

top: calc(var(--msg-content-height) - var(--msg3-height));

opacity: 0;

transform: scale(0);

}

35% {

top: calc(var(--msg-content-height) - var(--msg3-height));

right: 0;

transform: scale(1);

opacity: 1;

}

49% {

top: calc(var(--msg-content-height) - var(--msg3-height));

}

54% {

top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));

}

70% {

top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));

}

75% {

top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));

right: 0;

}

95% {

top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));

}

100% {

top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));

right: 0;

}

@keyframes msg4 {

0% {

top: calc(var(--msg-content-height) - var(--msg4-height));

left: 0;

opacity: 0;

transform: scale(0);

}

49% {

top: calc(var(--msg-content-height) - var(--msg4-height));

left: 0;

opacity: 0;

transform: scale(0);

}

54% {

top: calc(var(--msg-content-height) - var(--msg4-height));

left: 0;

transform: scale(1);

opacity: 1;

}

70% {

top: calc(var(--msg-content-height) - var(--msg4-height));

}

75% {

top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));

left: 0;

}

95% {

top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));

}

100% {

top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));

left: 0;

}

@keyframes msg5 {

0% {

top: calc(var(--msg-content-height) - var(--msg5-height));

right: 0;

opacity: 0;

transform: scale(0);

}

70% {

top: calc(var(--msg-content-height) - var(--msg5-height));

right: 0;

opacity: 0;

transform: scale(0);

}

75% {

top: calc(var(--msg-content-height) - var(--msg5-height));

right: 0;

transform: scale(1);

opacity: 1;

}

95% {

top: calc(var(--msg-content-height) - var(--msg5-height));

}

100% {

top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));

right: 0;

transform: scale(1);

opacity: 1;

}

@keyframes msg6 {

0% {

top: calc(var(--msg-content-height) - var(--msg6-height));

left: 0;

opacity: 0;

transform: scale(0);

}

95% {

top: calc(var(--msg-content-height) - var(--msg6-height));

left: 0;

opacity: 0;

transform: scale(0);

}

100% {

top: calc(var(--msg-content-height) - var(--msg6-height));

left: 0;

opacity: 1;

transform: scale(1);

}

ルート :root と変数１行目 :root 疑似要素は、タグと同じことを意味しています。タグよりも上位（親、外側）の要素です。２行目〜９行目 –（ハイフン２つ）は変数を表します。たとえば、–msg-content-height: 510px; は変数名「msg-content-height」は510pxだということを、変数名「msg-spacing」は30pxだということを表しています。変数の名称は一般には、好きな名前をつけることができます。ここでは、rootに対してそれぞれの変数を定義しているので、このWebページ内の任意の場所で、宣言した変数を呼び出すことができるようになりました。アニメーションの基本設定 12行目〜40行目＊クラス名 msg-send とクラス名 msg-receive の装飾に関する部分は省略します。 […]

CSS

【CSS】横並びリストで高さを持たない＜ul＞に高さをつけよう

2017.05.10

by support
0

グローバルナビや、メニューで、横並びリストをCSSで書くときに

li {
　float: left;
}

li {

　float: left;

}

で横並びにする人、多いかと思います。これは正しいのですが、困ったことに親要素のulタグが高さ0になってしまうこと、ありませんか？ ▼ 個々のリスト要素は高さがあるのに ▼ 親要素のulタグの高さが0になってしまうこれは非常によくあるあるCSSで、マークアップをやっていく段階で必ずといっても過言でないほど、当たる壁です。【回避策その1】親要素にoverflowを指定する手っ取り早く高さを出すには、親要素のulタグに、overflow: hidden;を指定してあげます。

ul {
　overflow: hidden;
}
li {
　float: left;
}

ul {

　overflow: hidden;

}

li {

　float: left;

}

本来、overflow: hidden; は、「要素（ボックス）からはみ出たコンテンツをカットして表示しない」という意味があるのですが、このような回り込みに適用すると、親要素に高さを与えることができます。「【回避策その1】親要素にoverflowを指定する」の場合のCSSソースコード例

ul {
  overflow: hidden;
}

li {
  background: #00bcd4;
  border-right: 1px solid #00a6bb;
  box-sizing: border-box;
  color: #fff;
  float: left;
  list-style-type: none;
  line-height: 50px;
  width: 150px;
  text-align: center;
}

li:last-child {
  border-right: none;
}

ul {

overflow: hidden;

}

li {

background: #00bcd4;

border-right: 1px solid #00a6bb;

box-sizing: border-box;

color: #fff;

float: left;

list-style-type: none;

line-height: 50px;

width: 150px;

text-align: center;

}

li:last-child {

border-right: none;

}

【回避策その2】:before, :after を利用する ulにoverflow: hidden;を使用してもよいのですが、例えばマウスオーバーで子要素、孫要素のサブメニューが開くような場合、 overflow: hidden;により表示されなくなってしまう場合があります。そうなると回避策その1は利用できなくなるため、別の回避策として疑似要素を利用します。具体的には次のサンプルコードの通りです。

li {
  background: #00bcd4;
  border-right: 1px solid #00a6bb;
  box-sizing: border-box;
  color: #fff;
  float: left;
  list-style-type: none;
  line-height: 50px;
  width: 150px;
  text-align: center;
}

li:last-child {
  border-right: none;
}

ul:before, ul:after {
  content: "";
  clear: both;
  display: block;
}

li {

background: #00bcd4;

border-right: 1px solid #00a6bb;

box-sizing: border-box;

color: #fff;

float: left;

list-style-type: none;

line-height: 50px;

width: 150px;

text-align: center;

}

li:last-child {

border-right: none;

}

ul:before, ul:after {

content: "";

clear: both;

display: block;

}

ul本体には何も指定せず、 ul: before　と、ul: after に空の要素を置いてあげます。空の要素の指定方法にも様々ありますが、ここでは、・中身が空（content: “”;）で、・回り込みを解除（clear: both;）し、・ブロック要素、つまり横幅100%（display: block;）の要素を空要素としています。そうすることで、なんということでしょう […]

CSS

【コピペでCSS】Webサイトでもスペースキーを使わずにタイトルを揃える方法

display「block」と「inline-block」の違いは？使い方、サンプルで違いがすっきり！

10秒で設置完了！コピペで使えるボタンデザイン（ホバーアクションつき）

CSSでもっと魅力的に！動きのある下線をグラデーションで作ってみよう

CSS学習中の方からの質問「position: relative; とposition: absolute; の違いが分かりません！」

CSSだけで動かしてみよう！メッセージアプリのようなチャットUI

【CSS】横並びリストで高さを持たない＜ul＞に高さをつけよう

Recent Posts

Archives

Categories

ソーシャルメディア