タグ別アーカイブ: CSS

CSS：スマホページのdiv要素にスクロールバーを表示

Posted on by
1

スマホ（スマートフォン）ページで、一部のdiv要素にスクロールバーを表示させた時の方法をメモします。

利用規約など文章が長い場合、その要素にスクロールバーを表示して見せることがあると思います。

PCと同じようにコーディングしてスマホページを確認するとスクロールはできても、
スクロールバーは表示されませんでした。

しかし、CSSで「-webkit-overflow-scrolling:touch;」を記述するとスクロールバーを表示させることができます。
下記に「-webkit-overflow-scrolling:touch;」を使用した時の方法を記載します。

■ スマホ　div要素にスクロールバーを表示

【CSS】

スクロールバーを表示させる要素に
「overflow: scroll;」
「-webkit-overflow-scrolling: touch;」
を指定します。

?
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
div#scroll {
    height: 300px;
    width: 80%;
    padding: 5px;
    overflow: scroll;
    border: 1px solid #CCC;
    -webkit-overflow-scrolling: touch;
}
</style>

表示させる要素の高さ（height）を指定しないとスクロールバーが表示されないので注意してください。

【HTML】

スクロールして表示させる内容をスタイルを指定して記述します。

?
1
2
3
4
5
6
7
<div id="scroll">
スクロールして表示させる内容<br>
スクロールして表示させる内容<br>
　　　　・
　　　　・
　　　　・
</div>

【表示例】

sp_scroll

縦方向と横方向にスクロールバーを表示することでき、慣性スクロールをさせることができます。

上記はiPhoneでのみ確認しているので、他のAndroidなどの機種は試していないです。
後、OSのバージョンによって「-webkit-overflow-scrolling」が効かないみたいなので確認が必要です。

CSS：ぶるぶる振える効果を出せるプラグイン「CSShake」

Posted on by
返信

CSSの「CSShake」プラグインを使用してみました。
「CSShake」はクラスを指定した要素をぶるぶると振える効果を出すことができます。

「CSShake」

CSShake_1

ライセンスはMITライセンスです。

使用方法はとても簡単で「CSShake」プラグインを読み込み、
シェイクさせたい要素にクラスを設定するだけです。

指定するのは要素でも画像でもOKです。

下記にCSSの「CSShake」プラグインを使用して、指定した要素をぶるぶると振えさせた時の方法をメモします。

■ CSShakeの使用方法

下記URLより、「CSShake」プラグインをダウンロードします。
一番下にダウンロードのボタンがあります。

http://elrumordelaluz.github.io/csshake/

ダウンロードしたCSSを読み込み、ぶるぶる振えさせたい要素にクラスを設定します。

【読み込むファイル】

?
1
<link rel="stylesheet" type="text/css" href="csshake.css" />

【HTML】

「CSShake」を使用する要素に「class=”shake”」を記述します。

?
1
<div class="shake">test</div>

imgタグに設置する場合

?
1
<img src="test.png" class="shake" />

クラスの指定を変更すれば、動きを変更することが可能です。

クラス 動作
shake 基本動作
shake shake-hard 激しく動く
shake shake-slow ゆっくり動く
shake shake-little 小さく動く
shake shake-horizontal 左右に動く
shake shake-vertical 上下に動く
shake shake-rotate 回るように動く
shake shake-opacity 半透明で動く
shake shake-crazy 激しく大きく動く
shake shake-constant 常に動く
shake shake-constant 常に動く
shake shake-constant hover-stop 常に動き、マウスオーバーしたら止まる

CSSでぶるぶると動きを出せるのは面白いですね。

クリックさせたいものなどに「CSShake」を設置しぶるぶると動かしてみると、
クリック率などがもしかしたら上がるかもしれないです。

強調させたい時など使うと良いかもしれないですね。

CSS：cssでマウスカーソルを指マークにする

Posted on by
返信

テキストにマウスを置いた時のマウスカーソルは通常下記のような表示になります。

mouse_cursor1

リンクにマウスを置いた時のように、マウスカーソルを指マークにしたい時があります。

テキストにマウスを置いた時にマウスカーソルを指マークで表示する場合は、下記のように設定します。

■ CSSでマウスカーソルを指マークに設定

設定する箇所に下記のスタイルを追加します。

【CSS】

cursor: pointer;
cursor: hand;

※IE6に対応させる為、「cursor: hand;」も記述します。

【HTML】

?
1
<span style="cursor: hand; cursor:pointer;">テキスト</span>

【設定例】

テキスト

cursorプロパティには他にも色々なものがあるので、その時に応じて変更するといいと思います。

jQuery：css()メソッドで指定した要素にCSSを追加する

Posted on by
返信

jQueryで指定した要素のスタイルを追加・変更する場合、css()メソッドを使用します。

css()メソッドは下記のように使用します。

?
1
$('要素').css('プロパティ', '値');

CSSプロパティを複数設定する場合は下記のように使用します。

?
1
$('要素').css({'プロパティ':'値', 'プロパティ':'値'});

アクション時に指定した要素のスタイル変更させたいなど、色々な場面で使うことが多いと思います。

今回はjQueryのcss()メソッドを使用して、指定した要素のCSSを追加・変更する方法をメモします。

■ ボタンをクリック時、指定した要素のCSSを追加・変更

jQueryを読み込みます。

?
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

【HTML】

?
1
2
3
4
5
<input type="button" id="click" value="クリック">
 
<div id="hoge">
テキスト
</div>

【JS】

・文字の色を変更する場合

?
1
2
3
4
5
6
7
<script type="text/javascript">
$(function(){
    $("#click").click(function(){
        $('#hoge').css('color', '#0000FF');
    });
});
</script>

・複数スタイルを追加する場合（色、フォントサイズ）

?
1
2
3
4
5
6
7
<script type="text/javascript">
$(function(){
    $("#click").click(function(){
        $('#hoge').css({'color':'#0000FF', 'font-size':'30px'});
    });
});
</script>

・CSSを削除する場合

値を空にするとCSSを削除することができます。

?
1
2
3
4
5
6
7
<script type="text/javascript">
$(function(){
    $("#click").click(function(){
        $('#hoge').css('color', '');
    });
});
</script>

CSS：ulのリストをfloatで並べて中央揃えする方法

Posted on by
返信

ulタグでfloatし、横に並べて表示することはよくあります。

css_float1

ページャーやナビゲーションなどで使用することが多いと思いますが、
ulで作ったリストを中央揃え（センタリング）をしようとした時に「margin: 0 auto;」などではセンタリングできなかったので、
floatで並べたリストを中央揃えにする方法をメモします。

また、表示する幅が固定の場合は「margin: 0 auto;」で中央揃えにすることが可能です。

■ floatで並べたリストを中央揃えにする

「position: relative;」を使用し、位置をしています。
ulのリストを50%右に移動し、liを50%左に移動させることでセンタリングが可能になるようです。

【CSS】

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
.list {
    border: 1px solid #CCC;
    padding: 10px;
    overflow: hidden;
    position: relative;
}
.list ul {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 50%;
}
.list ul li {
    float: left;
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #999;
    position: relative;
    left: -50%;
}
</style>

【HTML】

?
1
2
3
4
5
6
7
8
<div class="list">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>

【修正前】

css_float2

【修正後】

css_float1

■ 参考サイト

floatで並べたリストのセンタリング – Weblog – hail2u.net