いきなりやってみよう２
（CSS編）
いきなりやってみよう（HTML編）では、iPhoneのロック画面に文字を表示しました。
どちらかと言うと、「いきなりやってみよう」よりも、「無理やりやってみよう」という感じでした。
一般的にHTMLでは、装飾に関することはスタイルシートで指定することが推奨されています。
ここでは、HTML編でやってみたことをスタイルシートで実現するところから始めます。
そして、HTMLの装飾ではできないことをいろいろ取り入れて紹介します。
スタイルシートを使うことで、装飾の可能性がぐっと広がることをご確認下さい。
（Info.plistにも通じます）
いきなりやってみよう
サンプルファイル構成
ここで使用するサンプルの構成です。
ここからは、スタイルシートを導入するので、CSSファイルが追加されています。
ダウンロードはこちらからどうぞ。
ダウンロードが嫌な方は、この図を参考にして自作して下さい。
それぞれの「サンプルHTMLソース」や「サンプルスタイルシート」の部分にダウンロードファイルのリンクを張っておきます。
では、ファイルの中身を紹介します。
以下に示すのが、LockBackground.htmlの中身（ソース）です。
<head>
<meta name="viewport" content="width=640, minimum-scale=0.5"/>
<link href="./test.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hello World!!
</body>
</html>
サンプルHTMLソース
注目して欲しいのは、「Hello World!!」の装飾に関するタグが一切なくなっていることです。
（実際には、<body>タグで文字を表示することは稀ですが、流れを優先したためこのようなサンプルになりました。）
装飾に関するタグが無くなった代わりに、test.cssというファイルが増え、そのファイルを参照するために、linkタグが１行増えています。
（きちんとリンクされていれば良いので、ファイル名が「test」である必要はありません）
このようにすることで、HTMLファイルは「文書」に集中でき、CSSファイルは「装飾」に集中できます。
color: white;
font-weight: bold;
font-style: italic;
text-align: center;
margin-top: 568px;
font-size: 48px;
}
サンプルスタイルシート
次に、スタイルシート（test.css）の内容を紹介します。
理解しやすいように、HTML編でやった順に効果を記述しています。
上から順に、文字色を白にして、太字にして、斜体にして・・・といった具合です。
スタイルシートを使うと、HTMLの装飾と違って、文字色はcolorだけで済みますし、プロパティを並べれば適用されるという形で覚えやすいと思います。
HTMLでの装飾とスタイルシートの両方を覚えても良いのですが、記述方法が微妙に違うため、勘違いしているのに気付かず、上手く表示されないと何時間も悩んでしまいがちなので、今後のことも考えて、どうせ覚えるならスタイルシートでの記述を覚えましょう。
HTMLファイルとCSSファイルをペアで使用しますが、基本的にHTMLファイルはそのまま使用するので、ここからは、スタイルシートをメインに紹介していきます。HTMLファイルが不要になった訳ではありませんので、誤解のないようにお願いします。
ダウンロードファイルには、必ずHTMLファイルとCSSファイルをセットで用意してあります。
画像は、ロック画面に表示させたスクリーンショットです。
HTML編の最終型を再現してありますが、フォントサイズの指定方法が違うため、ここでは48pxとしてあります。
文字の大きさを変更する
color: white;
font-weight: bold;
font-style: italic;
text-align: center;
margin-top: 568px;
font-size: 72px;
}
サンプルスタイルシート2
では、スタイルシートで書き換えた文字装飾を、さらに拡張していきましょう。
すべてのプロパティを紹介する場合、逆に見にくいかもしれませんが、追加したプロパティは下に追加するようにします。確認しやすいように、追加や変更された部分を赤色にしました。
手始めに、フォントサイズを変更しましょう。
基本が48pxですので、72pxにします。
表示してみると、こんな感じです。
文字が大きくなったことが分かります。
大きくしたことで、文字が下がってしまいましたが、位置はそのまましてあります。
文字に影を付ける
color: white;
font-weight: bold;
font-style: italic;
text-align: center;
margin-top: 568px;
font-size: 72px;
text-shadow: 3px 3px 5px white;
}
サンプルスタイルシート3
では、大きくなった文字に影を付けましょう。
「text-shadow」というプロパティを使います。
文字に対して、右に3px、下に3px、ぼかし幅を5px、影の色を白にしてみます。
表示してみると、こんな感じです。
立体的になりましたね。
文字に影を重ねる
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
margin-top: 568px;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
}
サンプルスタイルシート4
影を付けたものの、思ったより微妙な結果だったので、効果を強いものにしましょう。
といっても、色を濃くする指定はありませんし、ぼかし幅を大きくすると薄くなってしまうため、今回は、効果を重ねることを試しましょう。
今回のサンプルは、「後光」をイメージして、位置はズラさず、その場で効果を重ね合わせることで、強いぼかし効果を実現してみました。
ぼかし幅を大きくしながら、５つのぼかしを重ねました。
ぼかし効果が分かるように、文字色を黒にしました。
表示してみると、こんな感じです。
文字の色や、重ねる影の色やぼかし幅によっては、個性的な表現ができそうですね。
HTMLの文字表示を見直す
HTML編の流れで、<body>で文字を表示したままスタイルシートを導入しましたが、ここでHTMLを見直します。
これまで、<body>の中で "Hello Word!!" を表示していたため、<body>のスタイルを指定したのですが、本来<body>には文字を入れるのではなく、要素を入れます。
したがって、文字を表示する場合は、その文字を何らかの要素として<body>に入れるのが一般的です。
文字を表示する要素は、用途によっていろいろありますが、ここでは一般的なp要素で文字を表示することにします。
では、HTMLに変更を加えます。
赤い文字が変更箇所です。
<head>
<meta name="viewport" content="width=640, minimum-scale=0.5"/>
<link href="./test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Hello World!!</p>
</body>
</html>
サンプルHTMLソース5
<body>内の "Hello World!!" を<p>と</p>で挟み込むことで、p要素の出来上がりです。
次に、スタイルシートです。
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
margin-top: 568px;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
}
サンプルスタイルシート5
これまでは<body>で文字を表示していたためbodyに対して装飾を施してきましたが、丸ごとごっそりp要素の指定となります。
書き方を見直しただけなので、表示に変化はありません。
文字を枠で囲う
では、p要素に対して装飾を追加していきましょう。
次は、文字を枠で囲ってみます。
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
border: 10px solid black;
width: 580px;
margin: 568px auto;
}
サンプルスタイルシート6
幅10ピクセルの黒枠を指定しました。
p要素はブロック要素に分類されますので、枠の幅は画面に依存します。
ですので、幅も指定しておきます。
幅を指定すると左に寄りますので、中央に表示させるために、左右均等の余白を指定します。
余白はmarginで指定しますが、上余白限定の指定ではなく、四方の指定をします。
今回は２つの値で指定することで、１つ目が上下余白、２つ目が左右余白を表します。
左右余白をAutoにすることで、数値による指定でなくても左右均等になってくれるのです。
表示してみると、こんな感じです。
文字の周囲に枠が表示されました。
文字を囲った枠の角を丸くする
文字列のあるブロックを枠で囲んだのですが、味気ないこともあり、デザイン的によく用いられている「角の丸い枠線」を表示してみます。
改めて表示する訳ではなく、表示された枠線の角を丸くする形です。
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
border: 10px solid black;
width: 580px;
margin: 568px auto;
-webkit-border-radius: 50px;
}
サンプルスタイルシート7
"-webkit-border-radius" というプロパティを追加するのですが、iPhoneで表示する際に使用する「レンダリングエンジン」というものがWebKitなので、このような記述になります。
表示してみると、こんな感じです。
角の丸い枠になりました。
枠内に背景色を指定する
「デザイン的」な意味合いで枠線の角を丸くしたので、このまま「デザイン的」な方向で装飾していきます。
ここでは、枠内に色を塗ってみましょう。
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
border: 10px solid black;
width: 580px;
margin: 568px auto;
-webkit-border-radius: 50px;
background: rgba(255, 255, 99, 0.3);
}
サンプルスタイルシート8
追加するプロパティは、backgroundです。
背景色の指定ができるのですが、単純に「yellow」としても良いのですが、せっかく「デザイン的」な方向に向かっているので、アルファ値を伴った色（透過色）の指定をしましょう。
指定には、rgbaを使います。
一般的なRGBの指定に、アルファ値を加えたのもです。（まんまやんけ）
ここでは、赤255、緑255、青99で、アルファ値0.3で指定しました。
表示してみると、こんな感じです。
背景に色が付きました。
背景色を透過させているので、壁紙が薄ら見えていることが分かります。
壁紙が青っぽいので、背景が緑っぽく見えているのも、背景色を透過させたことによる効果です。
背景色も角の丸いボックスに従っています。
背景色をグラデーションで指定する
せっかくですので、もう少し「デザイン的」にしてみましょう。
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
border: 10px solid black;
width: 580px;
margin: 568px auto;
-webkit-border-radius: 50px;
background: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(255, 0, 0, 0.5)),
color-stop(0.5, white),
to(rgba(255, 0, 0, 0.5))
);
}
サンプルスタイルシート9
背景色の指定部分が変わるだけですが、またまた-webkit-の登場です。
指定方法は、サンプルの通りで少し長くなりますが、上から下へ直線的に、赤から白になり、また赤へと変化するグラデーションにしました。
赤はrgbaでの指定にして、アルファ値を0.5にしてあります。
白になる位置は、0.5(50%)としたので、ちょうど真ん中になっています。
表示してみると、こんな感じです。
デザイン的なものになりましたでしょうか？
背景色のグラデーションを派手なものにする
ちょっとここで、極端なことをやってみましょう。
と言っても、色の数を増やす程度ですが・・・
余り多くても入力が面倒なので、適度に派手なレインボーカラーにします。
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
border: 10px solid black;
width: 580px;
margin: 568px auto;
-webkit-border-radius: 50px;
background: -webkit-gradient(
linear,
left top, right bottom,
from(red),
color-stop(0.2, orange),
color-stop(0.3, yellow),
color-stop(0.5, green),
color-stop(0.7, blue),
color-stop(0.8, indigo),
to(violet)
);
}
サンプルスタイルシート10
左上から右下へのグラデーションなので、斜めのグラデーションなのですが、横長のボックスなので傾きはそれほどではなくなっています。
赤から紫へと変化する途中で５色を追加指定しています。
変化のタイミングは、サンプルを参考にして下さい。
表示してみると、こんな感じです。
背景色が派手なグラデーションになったことで、文字の影があまり目立たなくなってしまったため、20pxのぼかしを４つ追加し５重にしました。
ずいぶん派手になったかと思います。
枠線自体にも影を付ける
枠線を表示してから、背景色に偏ってしまい、枠線自体の装飾を忘れていたので、枠線に影を付けて、少し枠線に存在感を出します。
text-shadowにもあったように、向きや大きさが指定できるので、「影」という暗い感じではなく、「装飾」という明るい感じのサンプルにしてみます。
color: black;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 72px;
text-shadow: 0px 0px 10px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 20px white,
0px 0px 30px white,
0px 0px 40px white,
0px 0px 50px white;
border: 10px solid black;
width: 580px;
margin: 568px auto;
-webkit-border-radius: 50px;
background: -webkit-gradient(
linear,
left top, right bottom,
from(red),
color-stop(0.2, orange),
color-stop(0.3, yellow),
color-stop(0.5, green),
color-stop(0.7, blue),
color-stop(0.8, indigo),
to(violet)
);
-webkit-box-shadow:
0px 0px 20px 10px yellow;
0px 0px 10px 10px yellow inset;
}
サンプルスタイルシート11
今回は、-webkit-box-shadowというプロパティを追加します。
text-shadowと比べると、１つ項目が増えています。
オフセット２値とぼかし幅までは同じなのですが、これに加え、広がり幅が指定できます。おかげで、効果を重ねる必要がなくなりました。
（text-shadowにあっても良いのに）
基本設定は外側に対してなのですが、「inset」と記述すると内側への効果になります。
枠線の「黒」に対して、内側のレインボーからには白系統の色がほとんどないため、枠線と背景色の境界に黄色の線を入れてメリハリを付けます。
黒と黄色のペアは目立つので、そのまま外側へもぼかします。
表示してみると、こんな感じです。
枠線が目立ったかと思います。
ここで大事な確認
ここで１つ、とても大事な確認をしたいと思います。
これまでは、スタートとなった「Hello World!!」という文字に対して装飾を施してきました。
装飾のやり方として、HTMLからスタートし、HTMLの限界辺りでスタイルシートに乗り換え、そのままスタイルシートで拡張してきました。
しかし、やってきたことはすべて文字に対する「装飾」に過ぎません。
先ほどのサンプルを見ながら考えて欲しいのですが、本来なら、これって画像を用意しませんか？
こんな感じの装飾をイラストレーターなどのソフトを使って画像を書き出し、その画像を貼付けませんか？
大袈裟に言うと、「グラフィックソフトがないとできなかったことがスタイルシートでできる」ということなんです。
「へぇ～」でも良いのですが、ポイントはその先にあるんです。
いろいろな装飾を施してきましたが、基本の部分は一切手を加えていません。
基本の部分というのが、「Hello World!!」なんです。
つまり、「文字列の変更が可能」ということを、この長ったらしいサンプル達を使って伝えたかったのです。
では、文字列を変更してみましょう。
<head>
<meta name="viewport" content="width=640, minimum-scale=0.5"/>
<link href="./test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>bokechans.net</p>
</body>
</html>
サンプルHTMLソース12
今回は文字列の変更だけなので、スタイルシートはそのままです。
サンプルに示す通り、文字列の部分のみの変更となります。
表示してみると、こんな感じです。
装飾はそのままで、文字列のみ変更されました。
日本語への対応
文字列を変更する際、日本語の文字列にしてしまい、「どえりゃーことになってまった」方はいらっしゃいませんか？
うっかりの方も、あえて試した方も大歓迎です。
文字化けしてしまうんですね。
ここで、日本語への対応をしておきますが、ついでに、HTML5の記述にしておくことにします。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640, minimum-scale=0.5"/>
<link href="./test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>ビギナーズラック</p>
</body>
</html>
サンプルHTMLソース13
日本語対応のための文字セットに「UTF-8」を指定しています。
表示してみると、こんな感じです。
日本語の文字列が表示されました。
もちろん装飾はそのままです。
フォントがヒラギノ丸ゴシックになっていますが、気になる方は、がんばって作って下さい。
おまけ
日本語を表示して終わろうかと思ったのですが、せっかくなので、もう少し文字列で遊ぼうと思います。
今回のお題は、「ビギナーズラックiOS7の棚」です。
そうです！このページのタイトルバナーにもなってる文字列です。
以下に、サンプルHTMLソースを示します。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640, minimum-scale=0.5"/>
<link href="./test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>ビギナーズラック<br>iOS7の棚</p>
</body>
</html>
サンプルHTMLソース14
１行には多すぎる文字数ですので、
で改行しています。
この状態で表示させてみると、こんな感じです。
この「お題」に対して、以下のことをやろうと思います。
1.行間隔を狭くする
2.「iOS7」のフォントを変更する
3.「iOS7」を一回り小さくする
4.「の棚」をかなり小さくする
5.「の棚」の斜体を解除する
6.「iOS7」と「の棚」との間隔を調整する
こんな感じでしょうか。
「iOS7」と「の棚」の２つの文字列に対して、個別に指定できるように、HTMLを書き換える必要があります。
個別に指定するには要素を特定しなければなりません。
要素を特定するには「id」を割り振るのですが、そのidを割り振るために、spanタグを使用することにしました。
spanタグに対して、idを指定することで、spanタグを特定します。
したがって、idは重複してはいけません。
書き換えたHTMLソースを以下に示します。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640, minimum-scale=0.5"/>
<link href="./test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>ビギナーズラック<br><span id="ios7">iOS7</span><span id="rack">の棚</span></p>
</body>
</html>
サンプルHTMLソース15
「iOS7」の部分のidを「ios7」とし、「の棚」の部分のidは「rack」としました。
やたら長くなってしまいましたが、これだけお膳立てしておけば、あとはスタイルシートの指定だけになります。
pのスタイルから紹介します。
長くなるので、必要な部分のみの紹介になります。
お題１にある「行間を狭くする」ですが、これはline-heightで指定します。
その指定方法は、フォントサイズを基準とする指定にしました。
どんなサイズでも、「1em」とすれば、フォント１文字分が行間になってくれます。
フォント内部の余白があるので、上下１割削るのが妥当と判断し、実際の指定は0.8emとしました。
次に、新たに追加されたidに対するスタイルを紹介します。
では、id「iOS7」から紹介します。
font-familyで、フォントの変更ができます。
フォントは、ArialRoundedMTBold を指定しました。（お題２）
iPhoneにあるフォントなので、どのiPhoneで試しても大丈夫だと思います。
font-sizeは、p全体のフォントサイズ72pxより少し小さい56pxにしました。（お題３）
次に、id「rack」を紹介します。
font-sizeは、36pxにしました。（お題４）
かなり小さい印象を受けますが、これでOKです。
さらに、font-styleをnormalにしました。（お題５）
これで、設定された斜体をリセットしています。
左側にマージンを設けることで、少し右側にずらしました。（お題６）
表示してみると、こんな感じです。
バランス悪すぎますね。
バランスを修正して仕上げます。
と言っても、余白指定だけで済みます。
これまで使用してきた余白指定の「margin」だと、枠ごと移動してしまいますので、枠内の余白を指定するために、ここでは「padding」を使用します。
左右の余白があると画面からハミ出してしまいますので、0ピクセルをしていしました。
枠線との間隔を考慮して、上余白を30ピクセルとし、下余白を10ピクセルとしました。
paddingの指定方法は、上・右・下・左の順に指定します。
今回の指定の場合、「padding 30px 0px 10px」と記述する方法もありますが、それ以上の説明は省きます。
表示してみると、こんな感じです。
この段階での仕上げとしては十分かと思います。
余計なこと
サイトのロゴに使えそうなほど仕上がったところで、枠や装飾を保ったまま回転させてみましょう。
そんなことしなくても・・・と思ったのですが、１行追加するだけで実現できるプロパティなので紹介します。
-webkit-transformというプロパティを追加します。
サイトの右肩上がりを願って、15度傾けました。
すでにスタイルシートが長くなっているので、追加部分だけの紹介です。
表示してみると、こんな感じです。
実際にウィジェットを作るようになると、意外と回転させることが多いので、覚えておいて損はないと思います。
当サイトの更新状況を、アラートで表示するかどうかの設定をします。
保存する