CSSで追従ヘッダーをfixedやstickyで作っているときにページ内リンクがずれる問題の解決
検索するとmargin-top:-100px;padding-top:100px やJavaScript, jQueryで解決するような記事が沢山出てくる。 でも一番シンプルな解決方法は scrol…
View ArticlejQueryのメモ
jQueryの基本文法 $('セレクタ').メソッド(引数) 使ったことのあるイベント hover : マウスを要素に重ねた時の動き（サイズ変えるとかくらいならcssでも可） $('セレクタ').h…
View Articleダークモードで色が変化するcssの書き方
ダークモードで色が変化するCSSの書き方 ダークモードとライトモードをサポートするウェブサイトの作成は、ユーザー体験を向上させる効果的な方法の1つです。ここでは、それぞれのモードで色が変化するCSS…
View ArticleCSS チートシート
background-color: - 背景色を変える body { background-color: red; } 背景色を変更できる。 使用できる色名→MDNドキュメント 参考： https:…
View ArticleSass(SCSS)の基本的な使い方〜アニメーションでローダーを作成〜
はじめに こんにちは！！ 現在、京都のWeb制作会社でフロントエンジニアをやってます。 業務: Wordpress, JavaScript, PHP 学習中: React×TypeScript 今回…
View ArticleCSS.escape()でCSSセレクターとして使えない文字をエスケープする
この記事の概要 かつての自分の記事で「ReactのuseIdを使って上手いこと一意なクラス名を生成しようと思ったけど:がクラス名として使えず断念」と書いたことがありました。 しかし、この事象自体はC…
View Article【CSS】素のCSSでようやくネストができるようになった
<div class="foo"> ここは青くしたい <div class="bar"> ここは赤くしたい </div> </div> .foo{ color:blue; } .foo .bar{ …
View Article【技術書まとめ】作って学ぶ HTML＆CSSモダンコーディング
現在のCSSを整理するために本書を手に取った。11冊目。 CSSの全体整理のための本。とりあえずこの本でCSS実装系はいったん終わり。 作成したデモサイト https://cerulean-cheb…
View Articlecontainer-type: inline-sizeを親に指定したら子や孫要素でposition: fixedが使えない
概要 タイトルそのままです。 .parent { container-type: inline-size } .child { position: fixed; } <div class="pare…
View Article【jsPsych】ブラウザのズーム機能には気をつけろ
はじめに 文字や画像のサイズ、あるいは位置などを決める際にはピクセル数を指定することがよくあります。ただし、参加者が所持するデバイスごとにそのディスプレイサイズや解像度は多様で、それに伴って実際に表…
View Article【CSS】要素と要素の間に等間隔で縦線を入れるサンプルコード
やりたいこと 下のデザインみたいに、要素と要素の間に等間隔で縦線を入れたい。 参考「医療法人社団神明会 佐藤歯科医院」 (https://www.dentist-sato.com/) コード フレキ…
View Articletailwindcss だけでモーダルを実装してみる
この記事が解説すること tailwindcss だけでモーダルを実装する方法を解説します。 本気で tailwindcss だけしか使えない環境はレアだと思いますが、でも tailwindcss だ…
View ArticleSassのmixinを作ってみた
はじめに CSS（Sass）を書いていて、 『何度も同じスタイルを書く・・・😮💨』 『必要なプロパティが漏れていて、表示してくれない・・・😰😰』 『毎回、都度調べ直さないといけない・・・😫😫😫』 …
View ArticleCSSの基本
CSSとは CSSは"Cascading Style Sheets"の略で，HTMLで記述されたWebページの見栄え，スタイルを効率的に定義するための技術．HTMLで文書の意味を定義し，CSSで見栄…
View ArticleHTML&CSS Day3:CSSの基本
１.概要 参考書のChapter４にてcssの基本的な使い方を学習。 サイトのヘッダーとフッターのレイアウトを調整した。 2.目次 CSSを記述する場所 CSSの基本的な書き方 使用したプロパティ …
View Article遷移ボタンを作るコードの仕組みを知る（後編）
はじめに こんにちは。Qiita株式会社で主にQiita Zineの記事制作を担当しています。非エンジニアです。記事やサイトは見るのも作るのも好きで、そこからHTMLやCSSに興味を持って調べるなど…
View Articlelink_to メソッドの復習
はじめに TecCampの学習を終了してはや１ヶ月くらい経ちました。 GWはしっかりリフレッシュしてこれから就活で大変な人です😅 オリジナルアプリの制作に取り掛かろうとしているのですが、記憶してこな…
View ArticleCSS 擬似要素と擬似クラス
擬似要素とは 擬似要素とは，要素の一部に対してスタイルを適用できる指定方法である．擬似要素を利用することで，HTMLを変更することなく，要素内の特定の部分にスタイルを適用させることができる． 擬似要…
View Articletailwindでgrid-template-rowsをカスタムして高さ100%を実現する
こちらの記事をtailwindで実現する方法 参考 CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する https://zenn.dev/catnose99/articles…
View Article【CSS】CSS Maskingを使って、フェードアウトするUIを実現する。
はじめに みなさんは、CSS Maskingを使いこなせていますか？ CSS Maskingは、デザイン性の高いLPや特設サイト等ではよく使うかもしれませんが、 Webプロダクトだとちゃんと触る機会…
View Article