HTMLおよびCSSに関する記事はこのタグを使用すること。
HTML/CSS [css]grid-gapを％で設定したら親要素の高さがおかしい
cssのgridを使ってコンテナの高さ幅にそれぞれギャップ（間）を持たせるために、％で指定をしたところ、親要素の高さが「grid全体の高さ−（設定したギャップ×row数）」になってしまい、次の要素が被...
HTML/CSS [Sass]@mixinと@extend使い分け
久しぶりにCSSではなくSassを使いました。過去、Sassは変数の定義やbreak pointの設定が便利なので、使ってはいたもののそこまで使いこなせてはいませんでした。ま、今も使いこなせてはいない...
HTML/CSS 構造化データの記述
構造化データとは、検索エンジンにサイト内コンテンツの内容を理解させるためのデータを指します。（セマンティックWEB）>Google 構造化データの仕組みについて構造化データのボキャブラリーボキャブラリ...
HTML/CSS Google検索結果にアイコンを表示する方法
google検索でURL左脇にファビコン（アイコン）が表示されるが、その表示が出なかった時の解決策です。
HTML/CSS Googleクローラー｜XMLサイトマップとrobots.txtの書き方と設置場所
Googleクローラーとは、検索結果に情報を登録するために膨大なサイトを駆け巡っている仕組みを指します。Googleにインデックス登録（検索結果に載せる）してもらうために、サイトマップとrobots....
HTML/CSS wordpressにInstagramを埋め込みしても画像が表示されない時の対処法
wordpress記事にインスタを埋め込みしても画像が表示されない時の対処法です。個人的にこのような現象に遭遇したので、対処の方法をメモします。＜前提＞・投稿はadmin権限で行っている = scri...
HTML/CSS 【Autoprefixer】ベンダープレフィックスを自動化
レガシーなブラウザーにも対応させるためにCSSではベンダープレフィックス地獄です。。。そんな互換記述を必要に応じて自動的に行ってくれるプラグインがありますのでご紹介します。環境Visual Studi...
HTML/CSS 【css】Swiper.jsを使ってアクティブなスライドにanimationをつける
jQuery不要でsliderを実装する事ができるライブラリーSwiper.jsを使ってsliderを実装しました。今回やりたい事は、・Sliderで写真とテキストを表示・アクティブなSliderに対...
HTML/CSS 【Sass】@mixin を使ってメディアクエリを召喚する（超効率的なレスポンシブ構築）
cssではメディアクエリをいちいち書く必要があります。毎回メディアクエリ書くのも手間ですし、ブレイクポイント（サイズ）が変更になった場合は、全て修正しなければなりません。そこで、メディアクエリの@mi...
HTML/CSS CSS filterを使って脱Photoshop
写真などのぼかし処理は、今までphotoshopで行っていました。ぼかし具合の変更があるたびにphotoshopで修正して、、、確認して、、修正して、、、いちいち面倒くさい！それが、CSSで処理ができ...