CSS– tag –
-
CSSのFlexboxとは？詳しい使い方と実践で使えるサンプル集を解説
みなさん、レイアウトが超簡単になるCSSのFlexbox使っていますか？ この記事では、HTMLとCSSの基礎を一通り学んだ方に向けて、CSS Flexboxの基本的な考え方から、プロパティの使い分け、よく使われる実践的なパターンまでを、初心者にも分かりやすく丁寧に... -
【CSS】親要素からはみ出して子要素を画面いっぱいにする
親要素の幅がすでに決まっている場合に、「ここだけは画面いっぱいに表示したい」と思った時に皆さんはどうしますか？ 私は以前まではいちいち親要素から出すというコーディングをしていました。 自分でコーディングしているならそれで良いですが、CMSで決... -
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で作るアコーディオンメニューもやっていきたいと思います。 どちらの方法でも問題はありませんが、テクニックの引き出しは多いに越したことはないですから... -
意外と簡単！モーダルウィンドウをプラグインなしで作る
モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。 自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最... -
CSSだけで作るアコーディオンメニュー
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなし... -
【CSS】animation・keyframesを徹底解説
今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイ... -
【CSS】フルスクリーン・レンスポンシブに最適なViewport (vw・vh)を覚える
CSSでボックスの幅や高さを指定する場合、パーセント（％）やピクセル（px）で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブに適したCSSの単位です。今回はこのViewport (vw・vh)を解説して行きたいと思います。...
12
