このページで紹介しているのは主な基本的なCSSのデザイン例です。いろいろなパラメータを変更して感覚的に掴んでいきましょう。CSSはJavaScriptと組み合わせることで機能を拡張することができ、ブラウザゲームまで作れてしまいます。気になった方はぜひ調べてみてください。
特定のエリアを強調したいとき、枠で囲うと目立たせることができます。ボックスのデザインは直感的に編集しやすく、ボタンのデザイン等にも応用することができます。ぜひ習得しましょう。
試しに簡単なボックスを設置してみましょう。
<head>
<style type="text/css">
.box1 {
font-size: 24px; /* フォントサイズ */
display: inline-block; /* インラインブロック要素として扱う */
background-color: #ffffe0; /* 背景色 */
margin: 10px; /* 枠外側の余白 */
border: 2px solid #ffa500; /* 枠線 */
padding: 10px; /* 枠内の余白 */
}
</style>
</head>
<body>
<p class="box1">box1</p>
</body>
box1
ボックスは例のように<p>タグにクラス指定して設置することが可能ですが、<div>~</div>で区切ってエリア全体を囲んでも良いです。枠内外の余白を指定するmarginやpaddingプロパティは2つ以上指定することで上下左右それぞれの余白を指定することができます。
また、CSSでボックスの大きさをあらかじめ指定すれば、内容に左右されずに決まった大きさのボックスを設置できます。ページ幅50%のボックスをページの中央に設置してみまししょう。
<head>
<style type="text/css">
.boxbox {
background-color: #dcdcdc; /* 背景色 */
width: 100%; /* 横幅をページ幅に揃える */
height: auto; /* 高さは自動調整 */
text-align: center; /* 中央寄せ */
}
.box2 {
font-size: 24px;
width: 50%; /* 横幅 */
hight: 50px; /* 高さ */
text-align: center; /* 中央寄せ */
display: inline-block;
background-color: #ffffe0;
margin: 5px auto; /* 枠外側の余白 */
border: 2px solid #ffa500; /* 枠線 */
padding: 10px; /* 枠内の余白 */
}
</style>
</head>
<body>
<div class="boxbox">
<div class="box2">box2</div>
</div>
</body>
この例ではボックスを入れ子構造にすることで中央に配置しています。横幅を100%に取った".boxbox"class（グレーのボックス）で中の要素を中央揃えにすることで、中に設置した".box2"classのボックスは中央に配置されます。
では次は複数のボックスを横に並べてみましょう。
<head>
<style>
.flexbox1 {
display: flex;
flex-wrap: wrap; /* 改行の容認 */
justify-content: center; /* フレックボッックスを中央揃え */
width: 100%;
margin: 10px 0;
padding: 10px;
}
.flexbox2 {
width: 20%;
margin: 20px;
padding: 10px;
text-align: center;
background-color: #7fffd4;
border: 2px double #008000; /* doubleで二重線を指定 */
}
</style>
</head>
<body>
<div class="flexbox1">
<div class="flexbox2">box1</div>
<div class="flexbox2">box2</div>
<div class="flexbox2">box3</div>
</div>
</body>
ここではフレックスボックスを使って並べています。".flexbox1"classで要素を内包するためのコンテナを設置し、その中にアイテムである".flexbox2"classを並べています。フレックスボックスを使うことで要素を行や列に自由に配置することが可能となります。これを応用することで画像やテキストを任意に分割して表示させることができます。後で解説するホバー効果と組み合わせるとより没入感を与えるページが作成できるのではないでしょうか。
ボタンを作成する方法はいくつかあります。
一つはリンクを指定する<a>タグを装飾する方法です。
まず、<a>タグでリンクを指定すると以下のような「ボタン」ができます。
<a href="https://www.lib.kyushu-u.ac.jp/ja" target="_blank">九大図書館</a>
これにCSSで枠や色をつけることでよりボタンらしい見た目に変更できます。
<head>
<style type="text/css">
.button1 {
display: inline-block; /* ブロック要素 */
border-radius: 20%; /* 角を丸める */
font-size: 16pt;
text-align : center;
padding: 12px 12px; /* 余白の大きさ */
background: #000000; /* 背景色 */
color: #e0ffff; /* 文字色 */
line-height : 24px; /* 高さ */
border : 2px solid #e0ffff; /* 枠線 */
}
</style>
</head>
<body>
<a class="button1" href="https://www.lib.kyushu-u.ac.jp/ja" target="_blank">九大図書館</a>
</body>
他には<button>タグを使う方法があります。
<button type="button">九大図書館</button>
このボタンは基本的にデータの送信やリセットに使われます。リンク先へのジャンプなどの機能をつけるにはJavaScriptを組み合わせる必要があります。なので扱いやすく、デザインの装飾もしやすい<a>タグをオススメします。
アニメーションはanimationプロパティで記述します。
例えば下のような円を右から左に移動させるとします。
<head>
<style type="text/css">
.bluecircle {
width: 50px;
height: 50px;
border-radius: 50%;
background: blue;
}
</style>
</head>
<body>
<p class="bluecircle"></p>
</body>
この青い円を緑を経て赤色に変化させながら動かしてみます。
<head>
<style>
.bluecircle2 {
width : 100%; /* 枠の大きさ */
padding: 3px; /* 枠線の内側の余白 */
overflow : hidden; /* 枠からはみ出た部分を非表示 */
background-color: white;
}
.bluecircle2 p {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: blue;
display : inline-block;
animation : move1 2s linear infinite; /* 下のアニメーションを2秒かけて実行し、ループさせる */
}
@keyframes move1 {
0% {
transform: translateX(300px)
}
50% {
transform: translateX(150px);
background-color: green
}
100% {
transform: translateX(0px);
background-color: red
}
}
</style>
</head>
<body>
<div class="bluecircle2">
<p class="bluecircle2"> </p>
</div>
</body>
少し複雑に記述されていますね。
最初の"bluecircle2"classはアニメーションを動かす範囲を指定しています。はみ出しを防ぐために箱を設置するイメージです。
次に円を記述する<p>タグを"bluecircle2"classの下で使用する際のスタイルとして".bluecircle2 p"でスタイルを記述しています。これはスペースを挟んで並べていれば、"p .bluecircle2"のように前後逆でも構いません。この中にanimationプロパティを記述します。animationプロパティは多くの値を取りますが、ここでは省略しています。例では名前"move1"、時間"2s"、等速運動の指定"linear"、ループの指定"infinite"を記述しています。
重要なのはその下にある@keyframeから始まるスタイルで、「どのように動かすか」を指定します。0%~100%はアニメーション時間の中の地点を示しており、例では0%で"transform: translateX(300px)"、つまりアニメーションは横軸X=300pxからスタートし、50%（今回は2秒ループなので1秒後）にX=150pxに緑色で存在し、100%の終了時には赤色でX=0pxに存在するよう設定しています。
もちろんこのアニメーションはほんの一例で、設定値によって文字や図形、画像を縦横無尽に動かすことが可能です。表現したいアニメーションを目指して様々な値を設定してみましょう。
ホバー（hover）を使うとカーソルを特定の要素に重ねた際に現れる効果を指定できます。
例えば、Webページでよく見かける透明化ボタンは以下のようにして作ることができます。
<head>
<style type="text/css">
.hov1 {
display: inline-block;
color: white;
background: black;
padding: 12px 20px; /* 余白の指定 */
}
.hov1:hover {
text-decoration: none; /* テキストの下線を非表示 */
color: white;
opacity: 0.5; /* 透明度の指定 */
}
</style>
</head>
<body>
<a class="hov1" href="#">透明になるボタン</a>
</body>
ポイントとなるのは"hov1"classの次に記述されている"hov1:hover"です。この":hover"は「擬似クラス」であり、特定のclassを含む要素にカーソルが重なった際に発生する効果を設定できます。
次の例として、文章中の特定のキーワードを拡大させてみましょう。
<head>
<style type="text/css">
.hov2 {
display: inline;
font-weight: 800; /* 太字 */
transition: all 0.3s linear; /* ホバーアニメーションの時間 */
}
.hov2:hover {
font-size: 24px;; /* 拡大倍率 */
color: blue;
}
</style>
</head>
<body>
<p style="font-size:16px;">私はその人を常に<span class="hov2"><ruby>先<rp>（</rp><rt>せん</rt><rp>）</rp>生<rp>（</rp><rt>せい</rt><rp>）</rp></ruby></span>と呼んでいた。
だからここでもただ<span class="hov2">先生</span>と書くだけで本名は打ち明けない。
これは世間を<ruby>憚<rp>（</rp><rt>はば</rt><rp>）</rp></ruby>かる遠慮というよりも、その方が私にとって自然だからである。
私はその人の記憶を呼び起すごとに、すぐ「<span class="hov2">先生</span>」といいたくなる。
筆を<ruby>執<rp>（</rp><rt>と</rt><rp>）</rp></ruby>っても<ruby>心<rp>（</rp><rt>こころ</rt><rp>）</rp>持<rp>（</rp><rt>もち</rt><rp>）</rp></ruby>は同じ事である。
よそよそしい<ruby>頭<rp>（</rp><rt>かしら</rt><rp>）</rp>文<rp>（</rp><rt>も</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>などはとても使う気にならない</p>
</body>
私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。
--夏目漱石『こころ』
文章中の「先生」にカーソルを合わせると文字が拡大しながら青色に変化すると思います。 ".hov2:hover"でカーソルが重なった際にフォントサイズが24pxに、文字色が青色に変わるよう設定しています。さらに".hov2"class内でtransitionプロパティを使うことでホバーアニメーションとして設定しています。文章中の<ruby>~</ruby>タグは文字にルビを振るタグです。
つまり、ホバーは「カーソルを合わせた際のアニメーション効果」と考えることができます。CSSを駆使してページ全体に様々なホバーを適用してみると、Webページの読者にリアルな操作感を与えられるでしょう。