サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
tech-blog.tomono.jp
ストライプの作り方 長方形を一つ作って、それにリピートグリッドを適用します。マージンを適宜調整します。 ここでのサンプルは縦ストライプですが、横でも同じ要領です。 斜めストライプの作り方 長方形を一つ作ってを斜めにし、リピートグリッドを適用します。マージンをマイナスに調整し、斜線の縦横をピッタリ合わせます。 ※斜めストライプの場合は、コーディングの際のbackground-repeatするため画像を、ピッタリ合うように注意して書き出してくださいね。 ドット(水玉)パターンの作り方 水平垂直のドットパターン 正円を一つ作り、リピートグリッドを適用します。マージンを適宜調整します。 斜めのドットパターン 正円を一つ作り、その直径と縦横同じ距離だけ離れた正円をもう一つ作ります。それらをグループ化し、リピートグリッドを適用します。縦横のマージンも正円の直径と同じ距離にします。 ギンガムチェックパタ
レスポンシブ対応のときに、ウィンドウサイズによって何かしらの処理を行うことがあります。 CSSではメディアクエリを使って、ウィンドウサイズによってスタイルを指定することができます。 p { font-size: 18px; } @media screen and (max-width: 768px) { p { font-size: 16px; } } @media screen and (max-width: 375px) { p { font-size: 13px; } } しかし、JavaScriptではwindow.innerWidthやjQueryのwidth()でウィンドウ幅を取得して、判定しなければならず、CSSと違ってウィンドウサイズが変更されたらそれを検知して実行する必要があります。 これがまた一手間で、ブラウザによっては挙動が違ったり、検知に負荷がかかってしまったり…。
このページを最初にブックマークしてみませんか?
『tech-blog.tomono.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く