HTML/CSS

HTMLおよびCSSに関する記事はこのタグを使用すること。

HTML/CSS

[css]grid-gapを%で設定したら親要素の高さがおかしい

cssのgridを使ってコンテナの高さ幅にそれぞれギャップ(間)を持たせるために、%で指定をしたところ、親要素の高さが「grid全体の高さ−(設定したギャップ×row数)」になってしまい、次の要素が被るという現象が起きました。 原因追及まで...
HTML/CSS

[Sass]@mixinと@extend使い分け

久しぶりにCSSではなくSassを使いました。過去、Sassは変数の定義やbreak pointの設定が便利なので、使ってはいたもののそこまで使いこなせてはいませんでした。 ま、今も使いこなせてはいないのですが!(笑)とはいえ、以前よりかm...
HTML/CSS

構造化データの記述

構造化データとは、検索エンジンにサイト内コンテンツの内容を理解させるためのデータを指します。(セマンティックWEB)>Google 構造化データの仕組みについて 構造化データのボキャブラリー ボキャブラリーとは、マークアップの記述方式のこと...
HTML/CSS

Google検索結果にアイコンを表示する方法

google検索でURL左脇にファビコン(アイコン)が表示されるが、その表示が出なかった時の解決策です。
HTML/CSS

Googleクローラー|XMLサイトマップとrobots.txtの書き方と設置場所

Googleクローラーとは、検索結果に情報を登録するために膨大なサイトを駆け巡っている仕組みを指します。Googleにインデックス登録(検索結果に載せる)してもらうために、サイトマップとrobots.txtを用意します。本記事では、企業サイ...
HTML/CSS

wordpressにInstagramを埋め込みしても画像が表示されない時の対処法

wordpress記事にインスタを埋め込みしても画像が表示されない時の対処法です。個人的にこのような現象に遭遇したので、対処の方法をメモします。 <前提>・投稿はadmin権限で行っている = scriptタグが強制的に消える事はない・イン...
HTML/CSS

【Autoprefixer】ベンダープレフィックスを自動化

レガシーなブラウザーにも対応させるためにCSSではベンダープレフィックス地獄です。。。そんな互換記述を必要に応じて自動的に行ってくれるプラグインがありますのでご紹介します。 環境 Visual Studio Codewin10<やりたい事>...
HTML/CSS

【css】Swiper.jsを使ってアクティブなスライドにanimationをつける

jQuery不要でsliderを実装する事ができるライブラリーSwiper.jsを使ってsliderを実装しました。今回やりたい事は、・Sliderで写真とテキストを表示・アクティブなSliderに対して、写真とテキストをそれぞれスライドイ...
HTML/CSS

【Sass】@mixin を使ってメディアクエリを召喚する(超効率的なレスポンシブ構築)

cssではメディアクエリをいちいち書く必要があります。 毎回メディアクエリ書くのも手間ですし、ブレイクポイント(サイズ)が変更になった場合は、全て修正しなければなりません。そこで、メディアクエリの@mixinを定義してしまえば、それ以降では...
HTML/CSS

CSS filterを使って脱Photoshop

写真などのぼかし処理は、今までphotoshopで行っていました。ぼかし具合の変更があるたびにphotoshopで修正して、、、確認して、、修正して、、、いちいち面倒くさい!それが、CSSで処理ができるようになったと!!!ぼかし具合もコード...