タグ 「CSS」 の記事

1年ぶりくらいにコーディングしてみまして、なんだかんだで使いたくなる上下左右センタリング。昔はネガティブマージンとか使ってせっせとやってたのですが、最近調べてみると画期的に省エネな方法がありました。毎回検索するのも面倒なので自分用の備忘録として残します。 こんな感じにマークアップしているとします。 CSSはこうなります。 section { display: flex; justify-conte…続きを読む

最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的な…続きを読む

案件でこういうのが必要になって、コーダーから「出来ない」と報告を受けたけども「できるんちゃう」と思って実験したらできたのでメモ。 よくあるtable-cellを使うんやけども、縦並びなのはドンピシャな例が見つからなかったんで書いておきます。 デモ » こちらから コーポレートサイトの左右ナビに使いそうなやつです。 作り方 マークアップ方法です。display:table-ce…続きを読む

こういうケースって俺だけかもしれませんが、さっきまでドハマりしてたので書いておきます。 案件で「display : table-cell」を使ったレイアウトを実装しようとサンプル作りまくって検証してたんですが、IEだけ全然効かない。8、9、10全部。しかもtable-cellのとこだけ効かない。IE8以降対応しているはずだからおかーしーなー。 と思いきや、そもそも検証用の簡易サンプルの作り方が問題…続きを読む

ちゅうわけで、新しくジャズカルテット組んだのでサイト作ってみましたよ、と。 » CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き viewportのスケール指定とかは、このサイトが詳しく検証して下さってます。 » Viewport [iPhone生活] レスポンシブでのスマホ対応の長所と短所(私見) …続きを読む