一番最初にやってみたのがこれ。あまり気がつかないようでも、表現力は大きい。
文字に影を付ける場合は text-shadow で指定します。このページでも見出し部分には影をつけています。
画像や図形にも影を付けることができ、その場合は box-shadow で指定します。
■コード：
影は重ねて表現することが可能です
text-shadow: #FFF -1px -1px 2px, #333 2px 1px 3px;
画像や図形にも影を付けることができます
box-shadow: #666 2px 2px 6px;
図形の内側に影を付ける場合は inset を指定する
box-shadow: inset #666 2px 2px 6px;
図形の下側に小さく影を付ける場合は広がりの指定を追加する
box-shadow: #666 0 8px 5px -6px; /* カラー 左右 上下 ぼかし 広がり */
以前はブラウザによってのprefixが必要で記述が面倒でしたが、今はほとんどCSS3草案のままでOKになっており簡単ですね。
tableにboxshadowを指定するときの注意点…
tableの内側に影をつけたい場合、insetを使用してboxshadowを指定しても tr や td に色をつけてしまうと、その色が反映されてしまうから影が見えなくなってしまう。別ファイルを作成したのでそちらで確認できる。
グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単で角度を変えたり、グラデーションを円形状にかけることもできます。
単純なグラデーションのパターンですが、複雑な指定も可能です。
■コード：
縦のグラデーション
background: linear-gradient(#eee 10%, #f00 100%);
横のグラデーション
background: linear-gradient(90deg, #eee 10%, #00f 100%);
左上から右下へのグラデーション
background: linear-gradient(135deg, #eee 10%, #fc0 100%);
左下から右上へのグラデーション
background: linear-gradient(45deg, #eee 0%, #f0c 100%);
中心から円形のグラデーション
bbackground: radial-gradient(#eee 0%, #090 100%);
以前はブラウザによって対応していたりいなかったり…。そのため各ブラウザ用のprefixが必要で記述が面倒でしたが、今はほとんど一行でOKになっています。縦のグラデーション以外は deg で角度を指定でき、マイナスの値も指定できる。横から、斜めから、様々な角度で指定できるから表現も豊かになりますね。
■コード：
.marker {
background: linear-gradient(transparent 30%, #E1E94A 30%, #fff 60%, #E1E94A 100%);
}
グラデーションの応用でこんなこともできちゃいます。背景色を指定するとき linear-gradient を使ってグラデーションを指定します。単に背景色を指定するよりも、また border-bottom でアンダーラインを引くよりも効果的なアクセントになりますね。
リンクボタンなどを作成したら、ふんわりと柔らかな変化があると、ちょっとおしゃれでクールに感じませんか？
jQueryなどのJavaScriptを使うのもいいですが、CSSだけでも簡単に表現できます。
◆マウスカーソルを合わせるとふわっと変化するボタン
■コード：
.transition {
display:block;
width:250px;
text-align:center;
padding:20px;
background:#6c9bd2;
border-radius: 7px;
text-shadow:#343434 1px 1px 3px;
transition: all 0.3s ease-in-out;
}
.transition:hover {
transition: all 0.7s ease-in-out;
background: #efefef;
color:#F33;
text-shadow:#FFF 1px 1px 1px, #000 1px 1px 5px;
}
transition の設定で、hover時の変化を分かりやすく0.7sにしていますが、実際使用した感じでは、0.3sくらいが一番効果的に感じました。背景色だけでなく、文字や影に変化をつけるとまた違った印象を与えられると思います。
画像を丸く表示するには、その画像に border-radius: 100%; を指定すればOK。もちろん画像以外の、div など他の要素にも加えることができます。まん丸にする場合は、正方形の画像を用意する。角丸にするには、各頂点の丸みの値を指定しましょう。
■コード：
全体を丸くする
border-radius:100%;
角丸の場合
border-radius:10px;
片方を角丸に
border-radius:50px 0;
四隅のRをそれぞれ指定すれば、面白い形ができるかもしれませんね。
例：「 大阪市生野区勝山北 」
ブラウザが非対応の場合は、「大阪市生野区勝山北（おおさかしいくのくかつやまきた）」と表示される。
■コード：
リストマーカーは通常黒い丸ですが、擬似要素を使って色付きのリストマーカーにできます。上記「漢字などにルビ（ふりがな）をふる方法」の記事中のリストは、この方法で色を変えています。
■コード：
四角いマーカーを通常の丸いマーカーにするには border-radius: 100%; を追加すればOK。
新着情報などのタイトルを取得して表示さすようなケースがありますよね。ブログ記事の一覧などとか、短いテキストと長いテキストが混在する場合で、スペースが限られている場合などに便利です。
■コード：
text-overflow: ellipsis; を指定すると、テキストが表示領域をこえた場合に省略記号「…」を表示します。
text-overflow: clip; を指定すれば、デフォルトの値で省略記号は表示しません。
リストの折り返しで、リストマーカーを内側に含むか、外側に出して表示するか、ケースによって変えたい場合もありますよね。そんなときは list-style-position プロパティで指定します。
list-style-position: inside; を指定すれば、リストマーカーまで含めて折り返します。
list-style-position: outside; を指定すれば、リストマーカーの手前で折り返します。
リストに関連してもう一つ便利な指定…。「:nth-child(n)」 という擬似クラスを使用して、指定した番号(または範囲)だけに、別のスタイルを適用さすことができます。
■コード：
使いこなすとすごく便利ですね。ここで擬似クラスについてまとめてみました。
| 擬似クラス | |
|---|---|
| :after | content:"";の""内の要素が該当の終了タグの直前に挿入される |
| :before | content:"";の""内の要素が該当の開始タグの直後に挿入される |
| :first-child | 親要素の最初の子要素に対して適用される |
| :last-child | 親要素の最後の子要素に対して適用される |
| :only-child | 親要素の中に子要素が一つだけの場合、その要素に対して適用される |
| :nth-child(n) | 親要素のn番目の子要素に対して適用される |
| :nth-last-child(n) | 親要素の最後からn番目の子要素に対して適用される |
| :nth-child(odd) | 親要素の奇数番目の子要素に対して適用される |
| :nth-child(even) | 親要素の偶数番目の子要素に対して適用される |
| :first-of-type | 親要素の子要素として最初に出現する要素に対して適用される |
| :last-of-type | 親要素の子要素として最後に出現する要素に対して適用される |
| :only-of-type | 親要素の中に子要素が一種類だけしかないときの、その要素に対して適用される |
| :nth-of-type(n) | 親要素の子要素としてn番目に出現する要素に対して適用される |
| :disabled | 無効になっている要素(input/textareaなど)にスタイルを適用できる |
| :enabled | 有効になっている要素(input/textareaなど)にスタイルを適用できる |
| :checked | チェックされている要素にスタイルを適用できる |
| :target | リンク先の要素に対してスタイルを適用できる |
| :empty | 空要素に対してスタイルを適用できる |
| :not() | ()以外の要素に対して適用される |
最後の 「:not()」ってのは初めて見たけど、これを使うとCSSをスマートに書くことができますね。例えばリストなどでマージンを調整する際、「:last-child」で最後の要素のスタイルを調節したりしますが、:not()を使うこと下記のようにできると思います。
と記述していた場合、これが
とするだけの記述で済みます。
ケイビーエスは、ハングル印刷のパイオニアとして、1968年の創業当初より様々な研究を重ねてまいりました。
世界初のハングル電算写植の導入や、いち早くMac DTPでの多言語同時出力に成功するなど、たゆまぬ努力によって、製版技術における言語のハードルを乗り越えてきた自負があります。
人と物が世界を飛び交うグローバル時代を迎えた現在、情報を相手の言語に翻訳して伝える、ローカリゼーションの重要性はさらに高まっています。
ケイビーエスのローカリゼーションは、単純に外国語に置き換えるだけではなく、これまで培ってきた多言語ひとすじの実績を活かし、その地域の文化や 習慣に合わせて、言葉や文字だけでなく、組版のルールやデザインの特徴など、お客様にとって最善のソリューションを提案する、一歩進んだ多言語化を目指しています。
スムースな意思疎通によって、あらゆる国の人々が互いに理解しあえる世界を――私たちのあくなき信念です。
■コード：
column-count: は何カラムにするかを指定し、column-gap: は段のアキを指定します。また column-rule プロパティを使用すれば、段と段の間に罫線を引くことができます。「例：column-rule: #CCC dotted 3px; （カラー・線種・線幅）」
便利なカラム分けですが、残念ながらまだ Firefox はprefixが必要となります。
■コード：
html ↓↓↓
<label for="check">クリックで開閉</label>
<input id="check" type="checkbox">
<div class="slidepanel">
<p>ケイビーエス株式会社<br>
多言語翻訳／DTP／印刷／ウェブ制作など外国語のためのパートナー</p>
</div>
CSS ↓↓↓
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
background: #7cf;
transition: 0.3s;
border-radius:25px;
float:left;
margin-right:20px;
}
label:hover {
background: #2F5FAA;
color:#fff;
}
.slidepanel {
transition: 0.3s;
height: 0;
overflow: hidden;
background: #7cf;
position: relative;
}
.slidepanel:before {
content: "";
position: absolute;
top:16px;
left:0;
border-top: 10px solid transparent;
border-right: 20px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #FFF;
}
input:checked + .slidepanel {
height: auto;
padding: 13px 25px;
}
かつては JavaScript を使用して作成したりしていましたが、今ではCSSのみで実装できるようになりました。
方法としてはいくつか考えられますが、今回はチェックボックスのオンオフを、パネルの開閉ボタンとして利用しました。
■コード：
html ↓↓↓
<div class="clipping">Hello!<br>2016</div>
CSS ↓↓↓
.clipping {
width:890px;
height:380px;
background:url(images/DSCF0506.jpg)
font-family:Arial Black, Gadget, sans-serif;
font-size:190px;
line-height:190px;
text-align:center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Can I use... によると -webkit-background-clip: text; (only with prefix) となっており、これからの対応となるようですね。
-webkit-background-clip: text; がテキスト部分をクリッピングし、text-fill-color: transparent; はテキストを透明にしています。背景には画像をしていていますが、グラデーションとかも勿論OKです。
「Webでの文字詰め」はできないことはないけど、指定がしんどいと思っていました。ただ単に字間を開けたり、詰めたりするだけだったら「letter-spacing: 」を使用していました。でもそれは均等に詰めたり広げたりだけですので、ちょっと使いにくにな……。ところが今は便利な「font-feature-settings: 」なるものがあるんです。現在ほとんどのブラウザがサポートしており、実務でも十分使えるようになってきたという嬉しい話です。ただしこの font-feature-settings は OpenType のフォントのオプション機能を有効にできる機能ですので、OpenType 以外のフォントには適用されません。
■コード：
.mojitsume {
font-feature-settings: "palt" 1;
}
font-feature-settings は OpenType フォントのオプション機能を指定するプロパティーです。Illustrator でいうところのプロポーショナルメトリクスってやつですね。
font-feature-settings プロパティーは機能名と有効可否（0か1、もしくはoffかon）をセットで指定します。1（有効）を省略した場合は、1が指定されたと見なされるので有効として認識されます。他にも指定方法があるようなので、ググってみましょう！ Adobeの「CSS での OpenType 機能の構文」を参考にするともっと役立つかもしれません。
注）Windowsで馴染みのある「メイリオ」は日本語部分が等幅として設計されているため、プロポーショナルメトリクスの情報は含まれていません。そのためメイリオに対しては、font-feature-settings を指定しても字間が詰まりません。