スマホメニュー

メディアクエリを使わずにcss1行だけでフォントサイズをレスポンシブ対応にする方法【CSS】

レスポンシブサイトを作る時に一番面倒なのが、ビューポイントに合わせてメディアクエリを使い、細かく指定することだと思います。
その指定の中で今回は、フォントサイズをレスポンシブに対応してみます。

フォントサイズの指定で代表的な方法はvwを使うことですが、これだけだと正直使いづらいと感じています。
使用率はどんなものでしょうか?スマホだけに使ったり部分的に使うのはたまに見ますが…

そこで、calcと組み合わせて、vwを使いやすくしようと思います。

Classを付けるだけで要素が画面上までスクロールした時に要素を動かすJavascriptライブラリ【ScrollEffect.js】

パララックスと言うか、ページをスクロールして、画面内に要素が現れたら要素を移動・変化させるプラグインは数あれど、使い方が良くわからなかったり何かと面倒です。
なので、classをつけるだけで動くライブラリを作って見ました。

スマホサイトで使う開閉メニューを3つ程作って試して見た

MVサイト製作日記 part.05
スマホ用のページを作っていて悩んだのがナビゲーション部分です。個人的に開閉式(ページを開いた時は見えなくて、ボタンを押すとメニューが開く)はあまり好きではなく、始めから全て画面に表示させていたのですが、メニューの数が多くなるとそうも言っていられません。
というわけで、3つほど開閉するメニューを作って比べてみました。

高さの違う要素の縦の線(border)を引く3つの方法

MVサイト製作日記 part.02
デザインが出来上がってコーディングを進める中で、並列に並んだ高さの違う要素の左右に線(border)を引くのに少し悩みました。MVサイトで言えば、メインのコンテンツ部分とサイドのコンテンツ部分です。
今回は、この時悩んで見つけた3つの方法をメモして置きます。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2024年4月
« 10月    
 123456
78910111213
14151617181920
21222324252627
282930  

タグ

Social