リアルな世界でのモノづくりの最も基本に、直角を出すとか、正しい長さで切断するといった事があります。精度は、加工する人の腕前といった事もありますが、道具や加工する機械の精度に依存します。
Raindropsテーマは、WEBパブリッシングを行う上で、表現を行うための道具であるともいえます。HTMLやCSSの腕前が最高なら、どんな表現も可能かもしれませんが、このテーマじゃ、そんなこと出来ないよといった場面に遭遇する事は多々あります。
WEB検索を行うと、様々な表現のためのテクニックが紹介されていて、自分のWEBサイトにも取り入れたいと思っても、うまくいかない経験は 誰にでもあります。
Raindropsテーマでも、表現のためのCSSクラスがたくさんありますが、クラスどうしを組み合わせて使用した場合、干渉してうまくいかないこともよくあります。
組み合わせて使われそうな、CSSクラスをテストする事にしました。
CSSは、影響範囲を把握することが非常に困難で、少しビビっていますが毎度の事なので、今回も勇気を出して、テストをします。
WEBページは、枠で構成されている
ブロック枠を作成するdiv要素は、もともと伸縮可能ですが、時には、一定の縦横比で表示したい場合も生じます。
一定サイズのブロックに対してテキストを挿入しようとすると、それぞれのブロックに見合うテキストを挿入したとしても、Responsiveが当たり前の今、ブロックサイズは、ブラウザのサイズに応じて変化するために、簡単にオーバーフローしてしまいます。
デザインのために、一定サイズの枠に無理やり収めるというのは、やや後ろめたいところもありますが、必要悪なのかなぁ等と思いながら、テストを進めています。
Raindropsテーマには、rd-square という、正方形の枠を表示するクラスがあります。
以下は、正方形のブロックの中に、画像を配置した例ですが、このようなブロックの使い方は、いろいろなところでよく見られます。
HTML
<div> <div class="rd-square size-featurd" style="width:50%"> <div class="content "> <a href="" ><img src="" alt="" /></a> </div> </div> <div class="sub-block"> <div class="rd-square " style="width:50%"> <div class="content"> <a href="" ><img src="" alt="" /></a> </div> </div> <div class="rd-square " style="width:50%"> <div class="content"> <a href="" ><img src="" alt="" /></a> </div> </div> <div class="rd-square " style="width:50%"> <div class="content"> <a href="" ><img src="" alt="" /></a> </div> </div> <div class="rd-square " style="width:50%"> <div class="content"> <a href="" ><img src="" alt="" /></a> </div> </div> </div> </div>
CSS
.rd-squareはinline-blockを使っているため、余分な余白を調整しています。
.sub-block{
display:inline-block;
width:50%;
vertical-align:top;
margin-left:-4px;
margin-bottom:-4px;
}
.size-featurd{
margin-left:-8px;
margin-bottom:-4px;
}
.sub-block > div{
margin-left:-4px;
margin-bottom:-4px;
}
rd-squareクラスが使われるのは、画像だけではなく、テキストが配置される場合もあります。
.pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。
また、shadow クラスを使って、ボックスシャドーを追加して、
自動配色クラスcolor-3で、背景とフォント色を指定しています。
centeredクラスを使って、正方形の中央にテキストを表示します。
pad-mクラスでパディングを与えています。
<div class="rd-square corner shadow color-3" style="width:45%;border:1px solid #ccc"> <div class="content pad-m"> .pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。 また、shadow クラスを使って、ボックスシャドーを追加して、 自動配色クラスcolor-3で、背景とフォント色を指定しています。 </div> </div> <div class="rd-square corner shadow color-3" style="width:45%;border:1px solid #ccc"> <div class="content centered pad-m"> centeredクラスを使って、正方形の中央にテキストを表示します。 pad-mクラスでパディングを与えています。 </div> </div>
次に、丸を表示する rd-round クラスで丸を表示してみましょう
centeredクラスを使って中央
<div style="width:780px;max-width:100%;margin:auto"> <div class="rd-round shadow" style="width:45%;border:1px solid;"> <div class="content centered pad-m">centeredクラスを使って中央</div> </div> <div class="rd-round shadow" style="width:45%;border:1px solid;"> <div class="content"> <a href="https://tenman.info/labo/css/files/snow-644x428.jpg" class="attachment wp-att-40989"> <img src="https://tenman.info/labo/css/files/snow-644x428.jpg" alt="" width="644" height="428" class="alignleft size-large wp-image-40989" /> </a> </div> </div> </div>
このままですと、ブラウザサイズを縮小すると問題が
ブラウザサイズを、小さくするとレイアウトが崩れて見えてくるようになります。
これは、文字列が枠外にはみ出すことで、パディングがなくなったように見えたりするためです。
これに文字列省略クラスを使って、表示行数をコントロールしてみましょう。
.pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。また、shadow クラスを使って、ボックスシャドーを追加して、自動配色クラスcolor-3で、背景とフォント色を指定しています。
<div class="rd-square corner shadow color-3" style="width:45%;border:1px solid #ccc"> <div class="centered content pad-m"> <p class="trancate" data-rows="4">.pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。また、shadow クラスを使って、ボックスシャドーを追加して、自動配色クラスcolor-3で、背景とフォント色を指定しています。</p> </div> </div>
<div style="width:780px;max-width:100%;margin:auto"> <div class="rd-square corner shadow color-3" style="width:45%;border:1px solid #ccc"> <div class="centered content pad-m"> <p class="trancate" data-rows="4">.pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。また、shadow クラスを使って、ボックスシャドーを追加して、自動配色クラスcolor-3で、背景とフォント色を指定しています。</p> </div> </div> <div class="rd-square corner shadow color-3" style="width:45%;border:1px solid #ccc"> <div class="centered content pad-m"> <pre class="lang:default decode:true " > <div class="rd-square corner shadow color-3" style="width:45%;border:1px solid #ccc"> <div class="centered content pad-m"> <p class="trancate" data-rows="4">.pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。また、shadow クラスを使って、ボックスシャドーを追加して、自動配色クラスcolor-3で、背景とフォント色を指定しています。</p> </div> </div></pre> </div> </div> </div>
Google Fontsとの組み合わせ
Font Lobster
google-font-lobsterクラスを使って、タイトルを記述する。
Font size
あああああ
trancateクラスは、文字のサイズの変化に対応できるか
右のタイトルと、左のタイトルを比較すると、右のほうが文字が小さく見えませんか？
フォントサイズは、同じですが文字長が異なっているためにそう見えます。
これが、デザインを行う上での、本当の相手かも
equal-heightクラス
Raindropsのクラスを使わず、UL（inline-block)を使う
equal-heightは、640px（標準のブレークポイント以下では）動作停止するので、右ブロックの高さが足りなくなって、正常
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
hello world
HTML
<ul class="equal-height"> <li class="pad-m"><p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </li> <li class="pad-m"><p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </li> <li class="pad-m"><div class="centered">hello world</div></li> </ul>
CSS
.entry-content .equal-height li{
width:33%;
height:100%;
display:inline-block;
margin:0 0 0 -4px;
list-style:none;
vertical-align:top;
}
.entry-content .equal-height li:nth-child(1){
background:#def;
}
.entry-content .equal-height li:nth-child(2){
background:#edf;
}
.entry-content .equal-height li:nth-child(3){
background:#fed;
}
Ghost Button
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div style="width:760px;max-width:100%;margin:auto"> <div class="centered pad-m"> <h3>Ghost Button</h3> <p class="trancate" data-rows="4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="http://www.tenman.info/labo/css/" class="ghost rd-alert-bg" style="margin-top:1em">ghost</a> </div> </div>
rd-thumbnaiクラスは、WordPressのメディアサムネール幅を確保します。
rd-square,centeredとの組み合わせ。
hello
rd-w640クラスは、640pxのブロックを描画します
このブロックを使って、font sizeにvminを使って、フォントサイズを可変にして、trancate クラスをテスト。
ブラウザサイズを縮小すると、ブロックサイズも縮小し、連動してフォントサイズも変化します（エラスティックレイアウトみたいな感じ）。リロードして、8行に収まればOK
hello World
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="rd-w640 pad-m" style="border:1px solid"> <h3 style="font-size:6vmin;text-align:center;">hello World</h3> <p style="font-size:4vmin" class="trancate" data-rows="8">Lorem ipsum dolor ...</p> </div>
rd-medium Class WordPressの設定/メディアで設定されている medium 幅のクラス
hello World
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="rd-medium pad-m" style="border:1px solid"> <h3 style="font-size:4vmin;text-align:center;">hello World</h3> <p style="font-size:2vmin" class="trancate" data-rows="3">Lorem ipsum dolor ...</p> </div>
既知の問題
safari5.1.7 rd-round img を配置した時に、円から画像がはみ出す。