HTML&CSS– category –
-
【CSS】videoにドットフィルターをかけよう
こんにちはtakosanです。 動画に点々のような、網目のようなエフェクトがかかっているのを見たことはあるでしょうか? 正式な名称は知りませんが、僕は勝手にドットフィルターと呼んでいます。 今回はそんなドットフィルターをCSSだけで実装する方法を解説... -
【ダークモード】CSSスタイルを切り替える方法
こんにちはtakosanです。 WindowsにもMacにも、OSの設定でダークテーマが利用できるようになって久しいですね。 今回はそんなダークモードの設定に合わせてwebページのスタイリングを変更させたい場合の便利な方法をご紹介します。 【ダークモードOn/Offで... -
data属性の使い方
こんにちはtakosanです。 classやid以外で要素を指定する方法として、data属性を使うやり方があるのをご存じですか? classやidと衝突せずに要素を指定しスタイルを当てたりすることができるので是非活用してください。 【data属性とは】 data属性とは、da... -
【初心者向け】CSSでアニメーションをつける方法
こんにちはtakosanです。 CSSでアニメーションを設定する方法をご存知ですか? 結論からいうと「keyframes」を使用することでアニメーションを作成&設定できます。 これが何かよくわからずに放置していたりしませんか? これが理解できるとWebデザインやC... -
ボタンクリックでCSSを変更する方法
こんにちはtakosanです。 今回はボタンを押した時に、特定の要素のCSSを変更する方法を紹介します。 【サンプル】 See the Pen jQuery-basic01 by yukiwebcreate (@Yukiwebcreate) on CodePen. こちらがサンプルです。 Color01,Color02,Color03のそれぞれ... -
【背景グラデ】linear-gradientの使い方
こんにちはtakosanです。 背景にグラデーションをかけたいけどやり方がわからない。 そんな時にはlinear-gradientを使うといいのでそれについて解説します。 【まずは完成品】 linear-gradient関数を使うとこのような背景が簡単に作成できます。 See the P... -
【CSS】隣接セレクタ間接セレクタ直下セレクタの使い方
こんにちはtakosanです。 みなさんこんな風に思ったことはないでしょうか。 特定の要素の隣の要素だけスタイルを変えたい。でもわざわざ新しいクラス作りたくない・・・。 親要素をhoverしたら子要素が変化したりできないかな? このような悩みはセレクタ... -
【JSなし】CSSだけでタブ切り替えをする方法
こんにちはtakosanです。 今回はJSなどを使わずCSSのみでタブの切替表示を行う方法を紹介します。 【CSSだけで作成するタブ切替】 まずは完成品をご覧ください。 See the Pen Tabs_only_CSS by yukiwebcreate (@Yukiwebcreate) on CodePen. 今回作成したの... -
【Bootstrap4】モーダルの作り方&使い方
こんにちはtakosanです。 モーダルを作成する際にはBootstrapを使用するのが一番簡単です。 コピペで使えるようにシンプルなコードで紹介しますのでぜひ使ってください。 【Boostrap4のモーダルの作り方】 そもそもモーダルとは?という方に向けて簡単に説... -
【CSSのみ】スクロール位置を調整する方法
こんにちはtakosanです。 ページ内リンクのスクロール位置がズレて困ったことはありませんか? 固定ヘッダーのせいで、コンテンツの上部がヘッダーに隠れてしまう・・・ JavascriptやjQueryは使わず、CSSだけで実装したい 今回はそんなあなたにとっておき...
12