タグ

ブックマーク / yomotsu.net (3)

  • レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net

    いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">

    レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
  • requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net

    Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ

    requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
  • a solution to control font-size relatively with media queries in Sass | Yomotsu net

    a solution to control font-size relatively with media queries in Sass SCSS で media queries を使いながら、相対的に font-size を扱うよさ気な方法を思いついた。 I just conceived a good solution to control font-size relatively with media queries in Sass. settingsAt first, you can change… base font sizes, which is referenced by reading text like and othres… brakepoints for mediaqueries and here is the settings and mixins $font-si

    a solution to control font-size relatively with media queries in Sass | Yomotsu net
  • 1