Web技術 【CSS】:has()擬似クラスが全てのブラウザでサポートされた
/* figcaptionがあるfigure要素を選択 */figure:has(> figcaption) {}/* svgの直接の子孫がないa要素を選択 */a:not(:has(> svg)) {}/* inputの直接の兄弟があるl...
css
Web技術 Web技術 【swiper.js】最新バージョンのswiper.jsでページを外に出す方法
最新バージョンのswiper.jsでページネーションを外に出す方法は簡単。以下のcssを追加するだけでOK.swiper-pagination { position: relative !important; margin-top: 2...
Web技術 【css】CSS変数で配列のように複数の値を扱えるようにする方法
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
便利ツール 【便利ツール】HTMLをコピペするだけで1発でCSSを生成してくれるサイト。
HTMLをコピペするだけで1発でCSSを生成してくれるサイト。 このサイトを使用するようになってからCSSで記述する時間が減り、コーディング速度が1.5倍位早くなったと思う。
Web技術 【CSS】コメントアウトの使い方
CSSのコメントアウトの使い方。 セクション毎に分けるだけで視認性が上がり、修正の時でも探しやすく保守性が高くなる。これをするだけで他者からの評価は上がります。スニペット登録は必須。 /* (タイトル) ******************...
Web技術 【CSS】フォントサイズを9pxにする方法
通常では表現できないfont-size:10px以下を実装する方法 は以下の通りに実装するとできます。具体的には要素全体を0.9倍縮小させれば実質的に9pxを再現できます。 かなり力技ですが、テキストで対応してほしいと言われた時には使えます...
Web技術 【CSS】実務で使えるdisplay gridレイアウト
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
Web技術 【CSS】カードデザインで要素にリンクが複数ある時の実装方法
今回紹介するのは、カードデザインを実装する際にカードの要素にリンクが複数あるときの実装方法を記載しておく。aタグの中に複数のaタグをhtmlでは実装できないのでcssでやる方法になる。 See the Pen Untitled by 山崎毅...
Web技術 【CSS】CSSを書く時に意識したいこと
transition を指定する時はプロパティも指定する/* Bad... */a { transition: .2s;}/* Good!! */a { transition: opacity .2s;}PC/SPの画像の切替えは disp...
Web技術 【CSS】CSSの記述する際におさせておきたいポイント
構造と見た目のCSSを分ける構造と見た目を分けることによって、見た目がスッキリするのと、HTMLの構造が変わってもすぐに修正することができるので、メンテナンス性が高くなります。<button class="button button-01"...