CSSに関する自分用メモ
「* {color: skyblue;}」すべての要素 「h1, p」複数のセレクタ 「div span」div の下にある階層の span 全て 「div > span」div の直下にある s…
View Article【HTML】 hoge.valueとhoge.style.colorのカラー形式(RGB/HEX変換)
Qiita初投稿です。 HTMLでの<input="color">の値の取得で詰まったのでまとめました。備忘録です。 <input="color">について こちら見てもらえるとわかりやすいと思いま…
View Article一部iOSでoverflow-y: scrollが効かない
ム！この画面、スクロールが効いてないぞ .scroll { width: 100%; overflow-y: scroll; } 自分はiMac Proを使っていますが、Windowsで実装した作業…
View ArticleHTML/CSS 項目の横並べ
ホームページを作るうえで必ず出る項目の横並べ よく使われるコードを記載します flexbox これが一番良い See the Pen Untitled by はーと (@spite400k) on …
View Article今日の学び
少ないけど今日学んだこと！ ・三点リーダーの付け方 text-overflow: ellipsis; overflow: hidden; white-space: nowrap; こんな簡単に実装で…
View Articleグリッドレイアウトの配置アルゴリズムを理解する
はじめに CSS グリッドレイアウトはHTML/CSSを使って2次元レイアウトを柔軟に実現できるCSSの仕様です。 2022年6月にIE11のサポートが終了したことはまだ記憶に新しいですが、IEのサ…
View Articleパンくずリストの書き方
今日学んだこと！ 割と簡単なことだけど、忘れないように。 ・パンくずリストのCSS ul { display: flex; } ul li { list-style: none; } ul li:n…
View Article【JavaScript】 Dynamic viewport (lvh, svh, dvh)が効かない時は、Visual viewportを使おう
はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更され、ビューポート単位にLarge viewport、Small…
View Article[React]のスクロールイベントを削除
<input type='number' />ではデフォルトの挙動ではスクロールしても何も起こらないと思いますが、スクロールに従って数値が上下するという現象に出会いました。 勝手に数値が変動するとU…
View ArticleSassを基本からまとめてみた【Sass入門】
Sassとは? Sassとは「Syntactically Awesome StyleSheets」の略称で、日本語では「サース」と読む。 各ワード「Syntactically＝構文的に」「Aweso…
View Article【基本シリーズ】タブメニューの実装
See the Pen tab UI(js) by wataruNakai (@wataruNakai) on CodePen. jsを使って情報量が多いサイトなどによくみられる、タブメニューの実…
View ArticleX番目系のCSSまとめ
最初とか最後とかXの倍数とかありきたりのは割愛。 最後からX番目 :nth-last-child(X) ある要素の最後からX番目 :nth-last-of-type(X) X番目以降（X番目から最後…
View ArticleJavaScript で矢印キーで移動する枠をつくってみる
JavaScript で矢印キーで移動する枠を簡単につくってみる 出来上がったやつのイメージはこんな感じ HTML 3×3 のマス用意 <!doctype html> <html> <head> <…
View Article初めてのグループ開発で三日坊主解消アプリを作成してみた
初めてのグループ開発で三日坊主解消アプリを作成してみた グループ開発をすることになった経緯 私はとある大学の情報系の学科に属しているのですが、これまで、アプリケーションを開発した経験が全くなく、この…
View ArticleVSCodeのCSS Peekがpugファイルに対応しない
pugも対応フォーマットに含まれているのに？？ とあるブログでpugも対応している。と記載しているところもありました・・・。 結論：CSS Peekはpug未対応です！ 公式の説明ページではHTML…
View ArticleSassを基本からまとめてみた【便利な使い方】
Sassを利用するメリット ネスト（入れ子構造）で記述できる &(アンパサンド)の使い方 変数が利用できる .scssファイルを分割管理できる コードを複数箇所で使用できる メディアクエリ(ミックス…
View Articlesafariでwebkit-line-clampによる行数制限が効かない
はじめに 👆画像のようなQiitaの記事をカードで表示するようなものを実装したところ、 Safariで👇のように潰れて表示されてしまった。 これを解消した時のメモ 環境 Safari 16.1（18…
View ArticleCSSの文法
■link要素 HTMLから外部情報を関連づける際に使用 rel属性、href属性と一緒に使用するのが一般的 ■rel属性 relationの略で、参照先のファイルが現在のファイルとどのような関係で…
View Article[Vue]画面スクロールに合わせてバックグラウンドのalphaを調整
経緯 フロント何もわからんない...OSSにコントリビュートして武者修行してみよう。 要件 1度何となく作ってPR出してみたら「要件不足してたから定義するね」って言ってくれた。優しい。詳細は以下。 …
View Article【MEMO】height: calc(100vh - 8px)がはみ出る話
height: calc(100vh - 8px)がはみ出る話 検索窓を「bottom: 0」で表示しても出ないとき。 PCだと問題ない。が、スマホだと下にはみ出てしまう模様。 ナビゲーションバーと…
View Article