レスポンシブの表組み②

「複数列のレスポンシブ」のコードをまとめ。 基本的に縦方向にレイアウトは無理があるので「横方向にスワイプ（スクロール）」で処理する。 色んな方法が考えられるが、PC時のレイアウトをゴニョゴニョしない...

レスポンシブの表組み①

今やレスポンシブなのは当たり前。そんな時悩むところが「表組み」だ。 単純な「項目名と内容」の２列から複数列までスマホ時の表示をどう表現するか、今まで対処してきたコードのまとめ。

スケジュールカレンダー作成

カレンダーに「休業日」とか「スケジュール」なんぞ入れ込めるものが欲しいとの問い合わせ。 レスポンシブにするけどスマホ表示はどうする？と考えた場合、表組みだと難がある。 そこでブレイクポイント以下の...

CSSアニメーション Animation

CSSでアニメーションを実装する「animation」プロパティ。 同じ類でtransitionもあるが、こちらの方が段階を追って細かく指定できるので個人的にはわかりやすい。 でもやっぱり検索して調べないと不安・・・っ...

CSSアニメーション Transition

手軽にスムーズに動くことやJSを介さなくとも動く点などメリットも多いCSSでのアニメーション。 速度やイージング、時間の調節など細かい部分も設定出来る。 細かい設定…ってことで、やっぱりどう書くかすぐに...

CSSで要素の変形 ３Dで表現

transformの関数にはCSSで３D表現（遠近感ってやつ）が出来る。 問題は３D空間での想像・設計出来る脳があるか否か・・・が悩みどころ。 確認しながらいじくってみるのが一番か。

CSSで要素の変形 transform

昔はJSでゴニョゴニョしてたが、今はCSSが流行り。その方が所謂「ヌルヌル」動く。 ただベンダープレフィックスが付くと、途端に覚えが悪くなる。 「trance・・・なんだっけ？」まとめようっと。

レスポンシブデザインでiframe埋め込み

Google mapやyoutubeの埋め込みのコード取得は以外と簡単。 だけどレスポンシブデザインで決まったレイアウトに埋め込もうとすると、CSSにちょっとした工夫が必要になる。 コピペで済むレベルなんだけど、いつ...

横並び配置 flexbox

中央、均等揃えなど比較的シンプルな記述で表示出来る、今や当たり前の様に使つてる「flexbox」。 子要素の順番入れ替えなんかも出来て、レスポンシブデザインには欠かせない。 そんなflexboxの普段使いのまとめ。

CSSでふわっと変わるボタン

CSSのみでhover時「ふわっと変わる」ボタンの作成。応用すると単なるリンクから、ちょっとリッチな感じになる。 これも「trans…なんだっけ？」と良くなるのでまとめ。