ブログ

cssであればメディアクエリをつかってデバイスサイズに応じたcssを適用させることは簡単です。では、javascriptの場合はどうでしょう？ javascriptではwindow.matchMediaというメソッドをつかって、設定したブレイクポイントごとに適用させるjavascriptを変えることができます。 他にも色々方法はあると思うのですが、このwin …

コーディング時の要素の横並び。僕がWEBデザインやコーディングを覚え始めたときはfloatをつかうのが定石でした。 それが近年、CSS3が出てきてからはflexboxをつかうようになりました。floatをつかった方法よりも汎用性が高く、簡単ですし、clearfixも必要ない。 そんなflexboxですが、アイテムの数と列の数の組み合わせ次第では、どうしても最 …

サイトやページの制作時に、YouTube動画を埋め込むことが多々あります。今回は、YouTube動画をPCでもタブレットでもスマホでもきれいに表示出来るように、つまりレスポンシブ対応するためのCSSを紹介します。 実装方法 HTML まずはYouTubeから、動画の埋め込み用ソースを取得して、下記のように<div class="movie&q …

サイトやページで横長のtableをつかっているとき。PC表示時であればそれほど悩むことはないですが、スマホでの表示方法に悩むことがあります。きちんとデバイスの幅に合うよう組み方を変える方法もありますが、場合によっては肝心の表の見やすさが損なわれてしまうときもあると思います。かといって、対策を何もしないとページ全体からtableだけ突き抜けてしまって不格好な表 …

フリーランス、個人事業主のWEBデザイナーとして働き始めてから半年以上経ちました。ここ何ヶ月かありがたいことにもの凄く忙しく、誇張表現抜きで「寝ているか、食事をしているか、仕事をしているか」という感じでした。 会社員時代に続けていた朝のジョギングも全く時間が取れなくなってしまい、今年に入ってから3か月近く全く運動をしなくなってしまっていました。元々ダイエット …

ページの読み込み時、パッと表示されるだけだとつまらない、デザインの雰囲気と合わない・・・そんなときに試してほしいのが、今回紹介するCSSだけでページのフェードインを表現する方法です。 javascriptをつかった方法の方が一般的ですし、フェードアウト部分まで実装できるので使い勝手は良いですが、フェードインだけだったらCSSでも実装可能です。そして何より簡単 …

レスポンシブデザインが当たり前のようになってきたここ数年。ユーザーによってサイトやページの閲覧環境がこれだけ違ってくれば、まあ当然の流れだと思います。 今回紹介するDrawer.jsは、その名の通りドロワーメニューを実装するためのjavascriptライブラリです。レスポンシブデザインではメニューの置き方、見せ方に悩むことがよくあると思いますが、このDraw …

ここ最近、WEBのデザインではノングリッドデザイン、ブロークングリッドデザインが流行っているとされています。要するに、これまでのグリッドでしっかりと仕切られたデザインではなく、一つ一つの要素を自由に配置するというデザイン手法のことです。 サイトやページに個性を出したい際に多用されているようですが、グリッドデザインよりも配置のバランスやホワイトスペースの使い方 …