Horic Design

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

css

CSSモジュールを試してみた。

CSSモジュールとは


CSSを書く人はよく、クラス名が衝突するのことを避けるため、BEM記法を用いる。
コンポーネント名を基準にして、その子供の要素を_(アンダーバー)二つで下の図のようにつなげていく方法だ。
だが、この命名規則だと、だんだんクラス名をつけるのがおっくうになってくる。そういった問題を解決するために作られたのがCSSモジュールという考え方。


「CSSモジュールを試してみた。」の続きを読む

洒落たエフェクトのメニューバーを作ってみた。

今回は、下のようなホバーするとアンダーラインが気持ちよく現れるメニューを作ってみました。
下のメニュの上にカーソルを載せてみてください。

疑似要素、:beforeの初期位置を、liの真ん中、すなわちleft:50%に指定し、hover前の幅を0にしておくことで、transitionにより、真ん中から、にゅっとアンダーラインが出現しているように見えます。
実際のコードは下になります。
transitionは応用しがいがありそうですね。
みなさんもぜひお試し下さい。

CSS

.sample_header li{
	display: inline-block;
	padding: 15px;
	list-style-type: none;
	position: relative;
}
.sample_header li:after{
	content: "";
	position: absolute;	
	height: 4px;
	background-color: #008CBA;
	bottom:-2px;
	width: 0;
	left: 50%;
	-webkit-transition: all ease-out 0.2s;
	   -moz-transition: all ease-out 0.2s;
	    -ms-transition: all ease-out 0.2s;
	     -o-transition: all ease-out 0.2s;
	        transition: all ease-out 0.2s;
}
.sample_header li:hover:after{
	left: 0;
	width: 100%;
}

HTML

<ul class="sample_header">
	<li><a href="#">項目1</a></li>
	<li><a href="#">項目2</a></li>
	<li><a href="#">項目3</a></li>
	<li><a href="#">項目4</a></li>
</ul>

display tableを上手に使おう

display:tableはテーブルを作る時に役に立つだけではありません。
table-cellどうしがぴったり重なりあう性質や、vertical-align:centerが使える性質を使えば実にさまざまな用途で役に立ちます。
今回はdisplay:tableで下の二つのパーツを作ってみました。

  1. 検索フォーム
  2. アイコン付きヘッドライン

検索フォーム

検索

おなじみの検索フォームはdisplay:tableをつかって表現できます。

CSS

.cs-input-group {
  display: table;
}
.cs-input-group-btn {
  display: table-cell;
  padding: 5px;
  background-color: #eee;
  border: 1px solid #333;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.cs-input-group-form {
  border: 1px solid #333;
  border-right: none;
  display: table-cell;
  height: 37px;
}
.cs-input-group-form-full {
  width: 100%;
}

HTML

<div class="cs-input-group">
	<input class="cs-input-group-form" />
	<span class="cs-input-group-btn">検索</span>
</div>

アイコン付きヘッドライン

今回一番お見せしたいサンプルがこちらのアイコン付きヘッドラインです。タイトルがどんなに長くなってもアイコンは常に縦方向に対して真ん中に表示されます。これはvertical-align:centerを使っているためです。
また、cs-iconHeadline-titlewidth:100%を指定していますが、display:tableの性質上、アイコン部分のセルはつぶれません。これも魅力的ですね。

タイトルが入ります

タイトルが長くなったとしてもアイコンは常に縦方向に対して真ん中に表示されます。

CSS

.cs-iconHeadline{
    	display:table;
	margin-bottom:10px;
	border:1px solid #333333;
}
.cs-iconHeadline-icon{
    	display:table-cell;
	vertical-align:middle;
	padding-right:10px;
	padding-left:10px;
	color:#FFFFFF;
    	background-color:#008CBA;
}
.cs-iconHeadline-title{
   	display:table-cell;
	font-size:24px;
	width:100%;
    	padding:5px;
}

HTML

<div class="cs-iconHeadline">
	<span class="cs-iconHeadline-icon fa fa-flag"></span>
	<p class="cs-iconHeadline-title">タイトルが長くなったとしてもアイコンは常に縦方向に対して真ん中に表示されます。</p>
</div>

フリップするカードを作ってみた

steelydylan

アップルップルで働くマークアップエンジニア
趣味はマークアップと、英語とディスクゴルフです。
ゲームのライブラリなんかも作ったりしています。

今回は、フリップするカードを作ってみたいと思い、上のようなデモを作ってみました。
マウスをホバーしてみてください。カードが裏返ったはずです。
作り方を説明していきたいと思います。

HTML

<section class="container102">
  <div id="card102">
    <figure class="front102"></figure>
    <figure class="back102">
        <p>steelydylan</p>
        <p>アップルップルで働くマークアップエンジニア<br/>
              趣味はマークアップと、英語とディスクゴルフです。<br/>
              ゲームのライブラリなんかも作ったりしています。
        </p>
    </figure>
  </div>
</section>

CSS

.container102 {
  width: 460px;
  height: 460px;
  position: relative;
  margin: 0 auto 40px;
  border: 1px solid #CCC;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

#card102 {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
  -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
}

#card102.flipped {
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

.front102,
.back102 {
  margin:0;
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}

.front102 {
  background-image:url(https://avatars.githubusercontent.com/u/2508691?);
}

.back102 {
  background: #008CBA;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
  color:#FFFFFF;
  font-size:15px;
  padding:20px;
}

見慣れないCSSが多々ありますので意味を解説していきます

perspective

transformの際の奥行きを表します。x,y,zz軸と考えたらいいですね。

transform-style

このプロパティを指定した要素の子要素が、 3D空間の中でフラットに(平らに)描画されるか、立体的に描画されるかを指定する際に使用します。

backface-visibility

要素が裏返った時に表示するか、非表示にするかを決められます。

つまり、transitionで.front102が回転して裏向きになり非表示になり、代わりに裏向きだった.back102が表向きになり、表示されるということです。

transform:rotateY( 180deg );

要素を180度Y軸に対して回転させて表示します。

jQuery

$("#card102").hover(function(){
    $(this).toggleClass("flipped");
},
function(){
    $(this).toggleClass("flipped");
});

マウスオーバーやマウスアウト時に#card102flippedというクラスを追加したり取り除いたりするだけでかまいません。

感想

3Dを実装するのもCSSのプロパティすら知っておけば気軽に試せるので、どんどん試していきたいと思います。

参考



CSS Spritesで読み込む画像を減らそう

読み込む画像の量が多いとどうしてもサーバとの通信回数が増えるので、サーバの表示速度が落ちてしまいます。よって今回は、CSS Spritesというテクニックをつかって、1つの画像を分割して使用することにチャレンジしてみました。

CSS Spritesのサンプル


今回はこちらの画像をサンプルとして使わせて頂きたいと思います。素材は、http://usui.moo.jp/rpg_tukuru.htmlからお借りしました。

導入方法

  1. 切り取りたい画像の縦横のサイズを図る
  2. 切り取りたい画像は左上から何ピクセルの位置にあるかを計算する
  3. CSSでbackground-positionの設定

1.切り取りたい部分の縦横のサイズを図る

今回は下の右から2番目の画像を切り取って表示させたいと思います。少し困った顔の画像ですね。
画像全体のサイズが、384×192pxなので、1つの大きさは96×96pxですね。

2.切り取りたい画像は左上から何ピクセルの位置にあるかを計算する

1つが96×96pxなので、切り取りたい画像の位置は(96×2),(96×1)pxの位置、すなわち(192,96)pxの位置にありますね。

3.CSSでbackground-positionの設定

あとは、CSSを書くだけです。以下のようになります。

#chara1{
    width:96px;
    height:96px;
    background-position:-192px -96px;
    background-repeat: no-repeat;
    background-image:url(http://horicdesign.com/archives/001/201409/5420d33f3080d.png);
}

実行結果

こんなかんじでサイト上で使う画像が小さければ、1つの画像にまとめて位置をづらして表示するのもありなのではないでしょうか?それでは。


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド