タグ「CSS」の一覧
レスポンシブデザインのメディア

レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について

スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替え...

SCSSでコントロールディレクティブを使う

初心者のためのSCSS。条件分岐のif文、反復処理for文などを使ってみよう。

SCSSを導入しようかと検討する際に、このブログの記事を参考にしてくれた奇特な方が居たそうな。どうもありがとう。で、声をいただくと書かない訳にはいかないので、条件分岐のIf文と反復処理の構文に絞った内容で書いてみようかと思う次第です。SCSSとはCSSの拡張言語です。長くなったり、...

ハンバーガーメニューはもういらない

顧客視点で考えた結果、ハンバーガーメニューをやめました

昨日私はハンバーガーを食べました。モスバーガーのオニオンリングが私の好物です。そして、このサイトではハンバーガーメニューをやめました。お客様のサイトを含め、このサイトでもハンバーガーメニューのクリック率が悪かったことが原因です。ハンバーガーメニューはUIとして良いのかGIGAZINE...

初心者のためのSCSS

初心者のためのSCSS。変数とパーシャルを覚えて統一性のあるコードを書こう

ハンバーガーメニューを使っているサイトをよく見かけますが、見た目先行で効果が出にくいようです。GIGAZINEの記事 - なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?クライアントにハンバーガーメニューを実装して欲しいと言われることもありますが、ターゲット層によっては...

CSS flexible box(フレキシブルデザインボックス)

Flexboxを使いこなして柔軟過ぎるCSSレイアウトを実現しよう。

毎朝アクセス解析を見ていると、IE8 以前のバージョンからの流入が激減しており、喜びを隠せない日々を過ごしています。実際、クライアント先の学習塾の 4 月から 7 月の IE だけの平均を見ると、IE9 が 10%、IE11 が 75%、残りが IE7、8、10 という割合です。そして、IE...

scss

初心者Webデザイナー・コーダーこそSCSSを使ってみよう。

久しぶりにWeb関連の話題を。初心者デザイナーはcssやhtmlを書くのが苦手、初心者コーダーも感覚的に作成されたデザインを見ると辟易する、ということはないでしょうか。ちなみに私は、超感覚なデザインファイルを送られると、壮絶なダメ出しをします。自分が思うに、cssが苦手、難しいと思うの...

軽量CSSフレームワーク「Skeleton」

必要な分だけの構成。CSSフレームワークは軽量でミニマルなものが良い。

Chromeの拡張機能で、Wappalyzer というものを使っておりまして、閲覧しているサイトがどんな言語や仕組みで構築されているかをよく見てます。アドレスバーの右端にアイコンが表示されるので、これをクリックするだけで丸わかりです。このWebサイトは上の画像のように少量構成ですが、Wordpress...