Raindrops1.458 CSS Class の互換性テスト

リアルな世界でのモノづくりの最も基本に、直角を出すとか、正しい長さで切断するといった事があります。精度は、加工する人の腕前といった事もありますが、道具や加工する機械の精度に依存します。

Raindropsテーマは、WEBパブリッシングを行う上で、表現を行うための道具であるともいえます。HTMLやCSSの腕前が最高なら、どんな表現も可能かもしれませんが、このテーマじゃ、そんなこと出来ないよといった場面に遭遇する事は多々あります。

WEB検索を行うと、様々な表現のためのテクニックが紹介されていて、自分のWEBサイトにも取り入れたいと思っても、うまくいかない経験は 誰にでもあります。

Raindropsテーマでも、表現のためのCSSクラスがたくさんありますが、クラスどうしを組み合わせて使用した場合、干渉してうまくいかないこともよくあります。

組み合わせて使われそうな、CSSクラスをテストする事にしました。

CSSは、影響範囲を把握することが非常に困難で、少しビビっていますが毎度の事なので、今回も勇気を出して、テストをします。

WEBページは、枠で構成されている

ブロック枠を作成するdiv要素は、もともと伸縮可能ですが、時には、一定の縦横比で表示したい場合も生じます。

一定サイズのブロックに対してテキストを挿入しようとすると、それぞれのブロックに見合うテキストを挿入したとしても、Responsiveが当たり前の今、ブロックサイズは、ブラウザのサイズに応じて変化するために、簡単にオーバーフローしてしまいます。

デザインのために、一定サイズの枠に無理やり収めるというのは、やや後ろめたいところもありますが、必要悪なのかなぁ等と思いながら、テストを進めています。

Raindropsテーマには、rd-square という、正方形の枠を表示するクラスがあります。

以下は、正方形のブロックの中に、画像を配置した例ですが、このようなブロックの使い方は、いろいろなところでよく見られます。

HTML

CSS

.rd-squareはinline-blockを使っているため、余分な余白を調整しています。


rd-squareクラスが使われるのは、画像だけではなく、テキストが配置される場合もあります。

.pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。
また、shadow クラスを使って、ボックスシャドーを追加して、
自動配色クラスcolor-3で、背景とフォント色を指定しています。

centeredクラスを使って、正方形の中央にテキストを表示します。
pad-mクラスでパディングを与えています。

次に、丸を表示する rd-round クラスで丸を表示してみましょう

centeredクラスを使って中央

このままですと、ブラウザサイズを縮小すると問題が

ブラウザサイズを、小さくするとレイアウトが崩れて見えてくるようになります。

これは、文字列が枠外にはみ出すことで、パディングがなくなったように見えたりするためです。

これに文字列省略クラスを使って、表示行数をコントロールしてみましょう。

.pad-mクラスを使って、適当なパディングを与えて、テキストを読みやすくします。また、shadow クラスを使って、ボックスシャドーを追加して、自動配色クラスcolor-3で、背景とフォント色を指定しています。

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

CSS

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.

ghost

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.

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.

既知の問題

safari5.1.7 rd-round img を配置した時に、円から画像がはみ出す。


コメントは受け付けていません