HTML&CSS– category –

こんにちはtakosanです。 動画に点々のような、網目のようなエフェクトがかかっているのを見たことはあるでしょうか？ 正式な名称は知りませんが、僕は勝手にドットフィルターと呼んでいます。 今回はそんなドットフィルターをCSSだけで実装する方法を解説...

こんにちはtakosanです。 WindowsにもMacにも、OSの設定でダークテーマが利用できるようになって久しいですね。 今回はそんなダークモードの設定に合わせてwebページのスタイリングを変更させたい場合の便利な方法をご紹介します。 【ダークモードOn/Offで...

こんにちはtakosanです。 classやid以外で要素を指定する方法として、data属性を使うやり方があるのをご存じですか？ classやidと衝突せずに要素を指定しスタイルを当てたりすることができるので是非活用してください。 【data属性とは】 data属性とは、da...

こんにちはtakosanです。 CSSでアニメーションを設定する方法をご存知ですか？ 結論からいうと「keyframes」を使用することでアニメーションを作成＆設定できます。 これが何かよくわからずに放置していたりしませんか？ これが理解できるとWebデザインやC...

こんにちはtakosanです。 今回はボタンを押した時に、特定の要素のCSSを変更する方法を紹介します。 【サンプル】 See the Pen jQuery-basic01 by yukiwebcreate (@Yukiwebcreate) on CodePen. こちらがサンプルです。 Color01,Color02,Color03のそれぞれ...

こんにちはtakosanです。 背景にグラデーションをかけたいけどやり方がわからない。 そんな時にはlinear-gradientを使うといいのでそれについて解説します。 【まずは完成品】 linear-gradient関数を使うとこのような背景が簡単に作成できます。 See the P...

こんにちはtakosanです。 みなさんこんな風に思ったことはないでしょうか。 特定の要素の隣の要素だけスタイルを変えたい。でもわざわざ新しいクラス作りたくない・・・。 親要素をhoverしたら子要素が変化したりできないかな？ このような悩みはセレクタ...

こんにちはtakosanです。 今回はJSなどを使わずCSSのみでタブの切替表示を行う方法を紹介します。 【CSSだけで作成するタブ切替】 まずは完成品をご覧ください。 See the Pen Tabs_only_CSS by yukiwebcreate (@Yukiwebcreate) on CodePen. 今回作成したの...

こんにちはtakosanです。 モーダルを作成する際にはBootstrapを使用するのが一番簡単です。 コピペで使えるようにシンプルなコードで紹介しますのでぜひ使ってください。 【Boostrap4のモーダルの作り方】 そもそもモーダルとは？という方に向けて簡単に説...

こんにちはtakosanです。 ページ内リンクのスクロール位置がズレて困ったことはありませんか？ 固定ヘッダーのせいで、コンテンツの上部がヘッダーに隠れてしまう・・・ JavascriptやjQueryは使わず、CSSだけで実装したい 今回はそんなあなたにとっておき...