すべての記事
-
target=”_blank”の属性を持つaタグにだけCSSを指定する方法
aタグにCSSで下線を引いたり、文字の色を変えてリンクであることを示すのは王道のやり方ですが、aタグには新しいウィンドウでリンク先を開く属性のtarget=”_blank”があります。 ユーザビリティの観点から通常のリンクとは別であることを示すためにtarget=”... -
position:stickyの使い方と上手く機能しない場合の解決方法を解説
position:sticky;はスクロールしたときに、要素が指定した位置に来たところから固定させることができるとても便利なプロパティです。 position:fixed;と似ていますが、position:sticky;ならjavascriptも書かないとできなかった難しい指定がたった2行ででき... -
CSSのobject-fitの使い方を徹底解説！CSSで画像のトリミングができる！
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。 要は画像として配置しているのに、「background-size」と同じことができてしまい... -
Sassは絶対使った方が良いよ！使い方入門編
WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 この記事を書くにあたって... -
CSSだけで作るドロップダウンメニュー（多階層）
今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。 「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードです。「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。 細... -
jQueryとCSSで作るアコーディオンメニュー
先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きました。今回はjQueryとCSSで作るアコーディオンメニューもやっていきたいと思います。 どちらの方法でも問題はありませんが、テクニックの引き出しは多いに越したことはないですから... -
ドロワーメニューを採用した参考サイト
ドロワーメニューとは? 「ドロワー」とは「タンスや机の引き出し」といった意味合いの単語になります。 Webデザインではサイトのコンテンツとは別に、画面外から「引き出して」表示するナビゲーションになります。 Webサイトごとスライドして表示したり、... -
【jQuery】モーダルウィンドウをプラグインなしで作る
モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。 自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最... -
【改良版】コピペでOK！画像や動画を親要素にフィットさせて中央に表示する
こちらの記事と同じことをCSSでもできます。ぜひ下記の記事もチェックしてみてください。 以前、「【jQuery】コピペでOK！画像や動画を全画面にフィットさせて中央に表示する」という記事を書きました。 しかし実際に使っていると、なんだかと痒いころに手... -
アイソメトリックのイメージを取り入れた素敵なWebサイト10選
当サイトに掲載する素敵なWebサイトを毎日収集していて、斜め上から見たような立体的なイメージ（アイソメトリックプロジェクション）を取り入れたサイトよく見るようになりました。 立体感があって印象的なデザインになるのでショーケースをまとめて見ま... -
CSSだけで作るアコーディオンメニュー
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなし... -
【CSS】animation・keyframesを徹底解説
今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイ...
