デザインのメモ

プラスってCSSで作れますかー？ 作れますよー プラス See the Pen CSSだけで、プラスをつくる by 125naroom (@125naroom) on CodePen. HTML CSS マイナス See

...

スマホでホバーってできますか？ あー、こんな感じだったら可能ですよー jQuery サンプルではaタグを指定。PCのときと同じ動きをしてくれるというもの。※ タッチ = touchstart さいごに おー タッチしたと

...

あのー、簡単にタブを作りたいのですがー じゃあ、プラグインを使って簡単に作ってみましょう 簡単にタブを作ってみる（プラグイン使用） See the Pen 【 jQuery】プラグインのtabs.jsを使って簡単にタブ切

...

iPhoneとAndroidだけ別のURLに飛ばせますかー？ 飛ばせますよー JavaScript さいごに おー、できましたー スマートフォン用の専用ページがある場合はJavaScriptで対応できますねー

...

ラインの下に三角を作りたいのですよー おー、擬似要素で作ると簡単ですよー つくる See the Pen ラインの下に三角をつくる by 125naroom (@125naroom) on CodePen. さいごに で

...

画像を使わずに、シマシマ模様を作ってみる。グラデーションを使うと簡単。いろいろな場面で使える。 サンプル 縦しましま（縦縞） See the Pen CSSだけで、しましま（縞模様）をつくる、縦しましま（縦縞） by 1

...

ベンダープレフィックス。そろそろ必要ないかと。 ベンダープレフィックスの種類 ベンダープレフィックス不要 ※ アルファベット順※ 随時追加 ベンダープレフィックス必要 ※ アルファベット順※ 随時追加 必要か不要かを確認

...

あ、:hoverが残ってる。そんなときの記述。問題点は、iPad Proのような大きなタブレットは悩むところだったりしますが。 CSS サンプル iPad Pro横向きサイズの「1367px」以上を指定。PCの画面を縮め

...

4カラムの場合。before擬似要素、after擬似要素で空白のボックスを作る。 サンプル See the Pen 【flexbox】justify-content: space-between / Last line,

...

transform:rotateで少し回転（角度を変える）。transform-originで基点をleft、topに指定。基点は自由に変えることができる。左下を基点にするなら、left、bottom。 サンプル See

...

block要素を上下中央揃え（真ん中）にする。ベンダープレフィックスなしで動作する。IE11問題なし。 サンプル See the Pen flexbox > 上下中央揃え by 125naroom (@125nar

...

疑似クラスのまとめ。:first-child疑似クラスは、要素内で最初に書かれている子要素にスタイルが適用される。 最初 :first-child 最後 :last-child 奇数番目 :nth-child(odd)

...

あれ、line-heightの単位ってなんだっけ？ って思い調べてみる。 メモ line-heightに単位を指定すると、親要素で計算された値がそのまま子要素にも継承されるため。   line-height1.

...

統一してくれないかなと思うわけです。 px（ピクセル）とem（エム）、さらには、%（パーセント）、さらには、rem（ルートエム） と言いつつも各々メリットもあるわけでうまく使っていかなくてはいかないわけで フォントサイズ

...