かすが– Author –

親要素の幅がすでに決まっている場合に、「ここだけは画面いっぱいに表示したい」と思った時に皆さんはどうしますか？ 私は以前まではいちいち親要素から出すというコーディングをしていました。 自分でコーディングしているならそれで良いですが、CMSで決...

img要素におけるalt属性は、画像が表示できない場合に代替テキストを表示します。スクリーンリーダーで画像の内容を説明するためにも必要な属性です。 また、img要素に適切なalt属性を設定することで、検索エンジンの画像検索にヒットしやすくなり、SEO効...

aタグにCSSで下線を引いたり、文字の色を変えてリンクであることを示すのは王道のやり方ですが、aタグには新しいウィンドウでリンク先を開く属性のtarget=”_blank”があります。 ユーザビリティの観点から通常のリンクとは別であることを示すためにtarget=”...

position:sticky;はスクロールしたときに、要素が指定した位置に来たところから固定させることができるとても便利なプロパティです。 position:fixed;と似ていますが、position:sticky;ならjavascriptも書かないとできなかった難しい指定がたった2行ででき...

CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。 要は画像として配置しているのに、「background-size」と同じことができてしまい...

WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 結論から先に言うと、初め...

今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。 「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。 「なるべくコードはシンプルにわかりやすく」を意識して書いて行きま...

先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きましたが、お役に立てたようで、意外とページビューも良くてありがたい限りです。今回はそれにあやかってせっかくなのでjQueryとCSSで作るアコーディオンメニューもやっていきたいと思...

ドロワーメニューとは? 「ドロワー」とは「タンスや机の引き出し」といった意味合いの単語になります。 Webデザインではサイトのコンテンツとは別に、画面外から「引き出して」表示するナビゲーションになります。 Webサイトごとスライドして表示したり、...

モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。 自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最...

こちらの記事と同じことをCSSでもできます。ぜひ下記の記事もチェックしてみてください。 以前、「【jQuery】コピペでOK！画像や動画を全画面にフィットさせて中央に表示する」という記事を書きました。 しかし実際に使っていると、なんだかと痒いころに手...

当サイトに掲載する素敵なWebサイトを毎日収集していて、斜め上から見たような立体的なイメージ（アイソメトリックプロジェクション）を取り入れたサイトよく見るようになりました。 立体感があって印象的なデザインになるのでショーケースをまとめて見ま...