Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

3ページ目 | css

はみ出した文字を...にする

昨日のつづきですが、white-space:nowrapで文字の折り返しを禁止しますが、横に文字がはみ出す場合がありますね。その時の対策はどうするのでしょう?

text-overflow: ellipsis;

text-overflow: ellipsis;を使うと、文字がはみ出しそうになる直前で...をつけてくれるみたいです。非常に便利ですね。

text-overflow:ellipsis無しの場合

.textBox{
     position:relative;
     background-color:#EEEEEE;
     padding:20px;
     overflow-x:hidden;
     white-space:nowrap;
     width:80%;
}
全然食欲がわかない。なんでだろ。別にストレスとかが溜まってるわけじゃないんだけど、そんなに物を体に入れようと思わない。

text-overflow:ellipsisありの場合

.textBox2{
     position:relative;
     background-color:#EEEEEE;
     padding:20px;
     width:80%;
     text-overflow:ellipsis;
     white-space:nowrap;
     overflow-x:hidden;
}
全然食欲がわかない。なんでだろ。別にストレスとかが溜まってるわけじゃないんだけど、そんなに物を体に入れようと思わない。

これでわざわざ、JavaScriptで文字の長さを取得して、...をつける作業をしなくてもいいですね。


テーブルで文字を折り返さないようにする

テーブルで項目の文字が折り返して不格好になることがありますよね。今回は文字が折り返さないようにテーブルにある設定をしてみようと思います。

white-space:nowrap

実はこれだけで、テーブルのセルの中の項目が折り返しません。white-space:no-wrapがついているテーブルとそうでないテーブルを見比べてみましょう。

nowrapが設定されていないテーブル

.entryTable,
.entryTable td,
.entryTable th{
    border:1px solid #333333;
}
.entryTable td,
.entryTable th{
    padding:10px;
}
項目1項目2項目3
バナナとても美味しいです。多分凄くびっくりするとおもいます。いままで僕がたべたバナナの中でたぶん、一番美味しいです¥200
もも果汁が凄いです。なのでとても気をつけて食べることをおすすめします。¥300

このように項目が折り返してしまっていますね。
次にnowrapが設定されているテーブルを見てみましょう。

nowrapが設定されているテーブル

.entryTable2,
.entryTable2 td,
.entryTable2 th{
    border:1px solid #333333;
}
.entryTable2 td,
.entryTable2 th{
    padding:10px;
}
.entryTable2 th{
    white-space:nowrap;
}
項目1項目2項目3
バナナとても美味しいです。多分凄くびっくりするとおもいます。いままで僕がたべたバナナの中でたぶん、一番美味しいです¥200
もも果汁が凄いです。なのでとても気をつけて食べることをおすすめします。¥300

このように、項目が折り返しませんね。いままでは%指定などで折り返さないようにコードを書いていましたが、これがあれば柔軟なテーブルが作れそうです。


仕事を通してcssの設計を考えてみた

CSSは破綻しやすい

案件でデザインの変更がおこった際に、CSSを修正しなければならない場面は多々ある。何回も何回もCSSの修正があると、ついその場限りのスタイルで対処しがちである。
しかしそのような対処方法だと絶対にCSSは破綻する。その部品の見た目を修正していたつもりが思いもしない部品の見た目まで変えてしまっている場合があるのだ。

破綻を起こさないためのCSS設計ルール

cssの設計ルールにはBEMやOOCSSなど様々なルールがある。
それらのルールにただ従って書くのもいいが、そのルールはなんのためにあるのか、それを理解した上で自分なりにルールを組み立てていくのもありだとおもう。

これらのルールから自分なりに考えたCSSルール

要素名をできるだけCSSに書かない

.layerBox h1{
}

HTMLのアウトライン構造は変わりやすいため仕様の変更でh1からh2に見出しレベルが変化するかもしれないから

単語同士をつなぐときはlowerCamel方式

.layerBox{
    border:1px solid #333;
    list-style-type:none;
}

小文字大文字大文字と単語同士を接続していく方式
layerboxとするよりは単語の間の区切りがわかりやすい

親クラスの中の小クラスを指定する場合は_(アンダーバー)を使う

.layerBox{
    border:1px solid #333;
    list-style-type:none;
}
.layerBox_item{
    padding:10px;
}

要素のバリエーションを変える場合は-(ハイフン)を使う

.layerBox{
    border:1px solid #333;
    list-style-type:none;
}
.layerBox.layerBox-danger{
    background-color:red;
}

階層構造は3つくらいを限度にする

.layerBox{
    border:1px solid #333;
    list-style-type:none;
}
.layerBox.layerBox_item{
    padding:10px;
}
.layerBox.layerBox_item.layerBox_item_text{
    font-size:15px;
    line-height:1.3;
}

これ以上階層構造を書けば横に長くなりとても醜くなる。だからここら辺でストップして layerbox_itemあたりからcssを書き始める

共通のCSSはcommon.cssに記述

あらゆるページで共通につかうcssはcommon.cssに記述しておくと、そこを変えるだけで共通の部品はすぐに変更できるし、cssファイルがそれほど長くならない

親クラスのクラス名を足し算で考える

私は仕事でa-blog cmsというCMSを使う。a-blog cmsではブログや
カテゴリー、モジュールというものがあるので、クラス名のルールがつけやすい。
クラス名 = ブログ名+カテゴリー名+モジュール名
としておけば、クラス名でなやむ必要はない。

まとめ

こういったルールを作ることでとても見やすいメンテナブルなCSSになるんじゃないだろうか。CSSは自分の作るルールとの戦いだなと仕事を通じて実感する。
ただルールを作っておいても実践しなければ力はつかないし、こういったルールを書くのをめんどくさがっていたら結局できてないのと一緒だ。だから毎日歯をみがくような気持ちで自分の作ったルールでコーディングをしていきたい。また、自分の作ったルールよりももっと良いルールがあると思うから、常にそういった情報にアンテナを張っておきたい。


last-childではまったからメモ

last-childは親要素の中の最後の小要素を指定するためのセレクタです。
ここで注意したいのはlast-childは、その要素が、ある要素の中の最後の要素である場合に適応されます。よって、次のような場合last-childは適応されません。

.parent{
    padding:0;
}
.parent .child,
.parent .sibling{
    color:#000000;
    border:1px solid #000000;
    padding:10px;
}
.parent .child:last-child{
    background-color:#000000;
    color:#FFFFFF;
}
<div class="parent">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5(last-child)</div>
    <div class="sibling">兄弟だよ</div>
</div>
child 1
child 2
child 3
child 4
child 5(last-child)
兄弟だよ

last-childはある要素の中の最後のクラスタグが評価されるわけではなく、あくまで、最後の要素にスタイルが適応されるからです。この場合、parentに対する最後の要素はsiblingですね。

last-childが有効な例

このような場合は、childparentに対する最後の要素になっているのでスタイルが適応されますね。

<div class="parent">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5(last-child)</div>
</div>
child 1
child 2
child 3
child 4
child 5(last-child)

画像にホバーしたらキャプションを上に重ねるCSSを書いてみた。

まずは画像にマウスをホバーさせてください。

a-blog cms使ってね

このように、マウスをホバーさせると、キャプションが出てくるCSSを書きました。
ソースは下のようになります。

.itemBox{
        display:inline-block;
	position:relative;
}
.itemBoxThumb{
        display:inline-block
	max-width: 100%;
	max-height: 100%;
}
.itemBoxCaption{
	background-color: rgba(0,0,0,0.8);
	color:#FFF;
	padding:10px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	opacity:0;
}
.itemBoxCaption:hover{
	opacity:1;
}

重ね方

重ねたい二つのオブジェクトをposition:relativeの親でくくってあげます。
次に、上に重ねたい、オブジェクトのpositionabsoluteにし、top:0left:0にします。
そうすると、親要素の左端にぴったりとオブジェクトが重なります。

hover時に表示させるようにする

要素自体にはopacity:0、透明度を0にして、隠しておき:hoverのときにopacity:1にすればよいです。このときに要素にtransitionなどを設定しておけば、ふわっと出現するようなエフェクトを作ることが出来ます。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド