ドロップキャップっていうらしい

こういうの

パラグラフの先頭文字だけ大きくするcss

といっても別に cssのプロパティであるわけではなく, 「先頭の文字」を指定して,  font-sizeを大きいものを設定してやるだけ. 

<div class="test1">
    といっても別に cssのプロパティであるわけではなく, font-sizeを先頭の文字だけ大きいものを設定してやるだけ.
</div>
<style>
.test1:first-letter{
    font-size: 3.0em;
    float: left;
    line-height: 1;
}
.test1{
    font-size: 1.0em;
}
</style>

コード的にはこんな感じ. ポイントは疑似要素 :first-letter. これで「最初の文字」を指定している.
ちなみに float: left;, line-height: 1;は演出用. これがないと,

たとえば------------------------------------------------改行した際に, こんな感じに次の行にいってしまう---------------------

じつはこんな要素指定していないのに一文字だけデカく表示されるバグのことを調べているときに見つけたのは内緒. しかもそのバグとは全く関係なかったし…(・ω・`).

selectタグで詰まった話

selectタグをいじってる際,  スマホ上での見せ方で詰まったのでメモメモφ(・ω・ )

selectタグの高さとスマートフォン

selectタグを使ってドロップダウン？な選択をさせたい, といった時, なんか(表示領域)小さいね, といった一言から始まった問題.

問題点は「selectタグの領域に heightがうまくかからない端末がある」 といった現象.


ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ ∩( ・ω・)∩ ヽ(;´Д`)ノﾀｽｹﾃ～

<select class="face_collection">
<option>ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ </option>
<option>∩( ・ω・)∩</option>
<option>ヽ(;´Д`)ノﾀｽｹﾃ～</option>
</select><br />
<br />
<style>
.face_collection{
height: 40px;
}
</style>

PCで見ればなんら問題なくなんか太いドロップダウンメニューができるはず.
但し, このページを, おそらくAndroid4.1系のデフォルトブラウザで見ていただければわかるはず.

「別に太くなんて無いんだけど…(・д・`)」

iPhoneや Android2.x系では太くなるのに, なぜか Android4.1系では太く表示してもらえない.
また, 太くならないのはデフォルトブラウザでのみらしく,  Chromeであれば "少し"太く見える.
一体なんなんだか…('A`)

ﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ ∩( ・ω・)∩ ヽ(;´Д`)ノﾀｽｹﾃ～







まぁ font-sizeを大きくしてやれば, それに合わせて大きくなるんですがね( ´_ゝ｀)

cssのアニメーション

jQueryのfadeやらなにやら, アニメーションを表現するものの中には機種依存を起こす物がちらほら. そんななか, 「cssの animationを使えばなんとかなるよー」ということなのでやってみた.

cssでアニメーション

1. やりたいこと

いわゆるフェードイン/アウト. しかしjQueryの.fade系は機種依存起こすかも, だとか. なので cssの animationで, cssのプロパティの opacityを操作する. 

( ﾟдﾟ )

おわかりいただけただろうか…

2. アニメーション内容の宣言

いじるのは css. jsはあくまで addClassしてクラスを切り替えるだけ. この切り替えられたクラスに合わせて cssで表現してやると, 再利用性は格段にアップするはず.

用意するコードはいつもとはちょっと異なり, 「アニメーションの動作内容」の部分と「作ったアニメーションを使うことを宣言する」部分に分けられる. 要するにアニメーションメソッドを作って, それを呼び出す, みたいな流れ.

<div class="testface">
( ﾟдﾟ )
</div>

上の例の場合は, まずはフェードするアニメーションを作成する.

@-webkit-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

注意点としては, レンダリングエンジンごとに用意してやる必要があること. Chromeや Safariなら webkit. firefoxならmoz.
上が webkit用, 下は moz用の宣言. 中身を変えてしまうと当然動きも変わってしまうから注意. コピペ推奨.
1行目がレンダリングエンジンの設定と そのアニメーションの名前. 名前は自由に設定できるので, わかりやすい名前を付けてやろう.
2行目から4行目は, 開始の状態. この場合は 「opacity: 0;」透明度100%状態からスタート, となる.
そして5行目から7行目が終わりの状態.  「opacity: 1;」透明度0%状態となり, 完全に出現した状態となる.
この fromと toは, それぞれ 0%, 100%と書くこともでき, また 33%等, 途中の状態も設定できる.
これでアニメーションの内容は宣言できた. 割と簡単.

3. アニメーションの実行を宣言

アニメーションを作ったら, それを付与してやる. この時いろいろプロパティがあり, これがまたいろいろ悩ませてくれる. 

.testface{
    color: red;
    -webkit-animation: anime1 2s linear infinite alternate;
    -moz-animation: anime1 2s linear infinite alternate;    
}

color: red;はキニシナイ. webkit, moz用に2つ設定. 内容は同じ.
最初の anime1は 2.で設定したアニメーションの名前.  ここでどのアニメーションを使うか宣言する.
2s は「2秒」. アニメーション1周期を何秒で描画するか, を設定する.
linearはアニメーション方法の指定, この場合は fromから toまで一定の速度で変化する方法. 他にもいろいろ.
infiniteは描画回数. 単に 6など数字を入れればその回数描画してくれる. この場合は無限回の指定.
alternateはアニメーション方向. 要するに fromから toへアニメーションするか, その逆に toから fromへアニメーションするか, といった設定. alternateは「奇数回目は from→ to, 偶数回目は to→from」という特別な設定. 例にあるとおり, from→ to→ from→ toと, アニメーションの設定を行き来してくれる.
他にも, アニメーションの開始を遅らせるプロパティなども. これらをセットしたら準備OK.


ちなみに opacityをいじっていたところを marginをいじるように変更すれば, こんなものもcssだけでできる.↓

ガクガク (((( ﾟдﾟ ；)))) ブルブル

参考

javascriptでもEnum型

以前javaのEnumをまとめたけど
javascriptでもやる機会があったので

javascriptでもEnum型

やり方は簡単.

var counter = {
    a: 0,
    b: 1,
    hoge: 10,
}

シンプル. これを呼びだすのも,

console.log("counter is " + counter.a);
// or
console.log("counter is " + counter["hoge"]);

なにがおいしいかって, 後から追加も楽なこと.
たとえば,

<div class=".hoge">
    <ul id="animal">
        <li></li>
        <li></li>
    </ul>
    <ul id="fish">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

なんていうのがあり, 各 ulの liを順番に表示, 非表示にするようなギャラリーが作りたい, なんて時. 順番に回すのはいいけれど, 今どれが表示されているのか管理したい！でもこの後 ulがどんどん増えて, counterに名前なんて付けてられない！なんて時. あるのかね(・ω・`)
.

$(".hoge ul").each(function(){
    var idName = $(this).attr("id");
    counter[idName] = 1;
});

だいたい想像はつくはず. これで,

    console.log(counter.animal);
    console.log(counter.fish);

でそれぞれのカウンターが用意される. 応用するといろいろできるはず！




ちなみに

window.location

なんてのもこれだったりする.

Selectタグの見た目を変える

なんか面白いものを見つけたので

<select>の見た目を変える

1つめのoption2つめのoption3つめのoption
コイツの見た目を変えたい！というお話.
使うプロパティは

appearance

こいつを使う.
とりあえずボタンにしてみる

select{

    /* 見た目をinputのtype=buttonに */
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;

}

この設定をしてやると…
1つめのoption2つめのoption3つめのoption
となる. あとはボタンと同じようにデコレーションしてやればいい.
ただPCで見ると, たまに選択肢の描画がなんかおかしい. スマホならそれぞれのダイアログが開くので気にはならないかと.

ちなみに

select{

    /* 見た目をcheckboxに */
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    appearance: checkbox;

}

とかしてみると…

1つめのoption2つめのoption3つめのoption

これはひどい…('A`)

cssで吹き出し

なんか面白かったからつい…
というかどういう必要性に駆られて生まれたのかが気になる(・ω・`)

cssで吹き出しを作ろう

たとえばこんな感じ

('A`)




Σ('A`)

構造はこんな感じ

<style>
.fukidashi_outline{
    padding-bottom: 10px;
    position: relative;
}
.fukidashi_msg{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg:after{
    content: '';
    position: absolute;
    border-top: 10px solid #ccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: -9px;
    left: 6px;
}

</style>

<div class="fukidashi_outline">
    <div class="fukidashi_msg">
        たとえばこんな感じ
    </div>
</div>

メッセージ本体部と, 周りとの距離を測る部分, そこに吹き出しの三角形部分を作る cssを足して吹き出しに見せる. それだけ.シンプルです.

キモは15～23行目. ここで疑似クラスの :afterを用いて三角形を作り, 角を丸めた長方形の下にきれいにつくように配置する.

要するに三角形の位置と向きななわけだ

('A`)

Σ('A`)

三角形を横にするのもシンプル. 斜線を leftと rightで作っていたのを topと bottomに, 上底?を書いていた borderを border-leftにしてやり, 後は位置調整.

<style>
.fukidashi_outline2{
    padding-right: 12px;
    position: relative;
    display: table-cell;
}
.fukidashi_msg2{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg2:after{
    content: '';
    position: absolute;
    border-left: 10px solid #ccc;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    top: 10px;
    left: 110px;
}

.fukidashi_set2{
    display: table;
}

.fukidashi_chara2{
    display: table-cell;
    bottom: 10px;
}
</style>

<br />
<div class="fukidashi_set2">
    <div class="fukidashi_outline2">
        <div class="fukidashi_msg2">
            要するに三角形の位置と向きななわけだ
        </div>
    </div>
    <div class="fukidashi_chara2">
        ('A`)
    </div>
</div>

応用するとこんなことも…

('A`)

参考: CSSだけで簡単に吹き出しを作成する方法4つ！