CSS・HTML 子要素を画面いっぱい（全幅）に表示する場合の注意点「width: 100vw;」
楽天もヤフーショッピングも店舗デザインがだいぶ制限されてきました、やっぱりデザインを統一化したいというのが本音なんでしょうね。
そんなオリジナルデザインで良く使う手法が子要素を画面いっぱい（全幅）に表示する手法、ワードプレスで...
CSS・HTML
CSS・HTML 
Bootstrap4 もっと見るボタンを付ける＜Bootstrap4＞
「続きを読む」 「もっと見る」ボタンのサンプルが下記サイトで紹介されていました。
参考 コピペでできる！CSSとhtmlのみで作る「続きを読む」の開閉ボタン
Bootstrap4ではドグルボタンを使用してもできますが、こちらはC...
Bootstrap4 Bootstrapが使えない、使いたくない、そんな時に便利な＜CSS Grid＞
レスポンシブなページを作るときに便利な「Bootstrap」、簡単に短時間でページが作れます。
でもワードプレスのページを作成するときや簡単なレスポンシブなページを作るときなど「Bootstrap」が使えない、使いたくないときもあります。...
CSS・HTML CSSの擬似要素＜before/after＞画像の大きさを変更する
CSSの擬似要素＜before/after＞で画像の大きさを変更したい場合の方法
通常の指定方法
content: url(〇〇〇);
これだと画像の大きさを変更することはできません。
画像を背景で指定してあげれば大きさは変更可能。
...
Bootstrap4 Bootstrap4で背景に画像を使うときの「スタイルシート（CSS）」
Bootstrap4で背景に画像を使う方法。
背景に画像を入れるCSSのおさらい
background-image: url("画像へのパス"); ・・・ これは説明不要ですね。
background-repeat: 繰り返しの指定; ・...
CSS・HTML 静的ページのサイトマップをグーグルに送信してグーグルの検索結果に表示してもらう
ワードプレスなどの動的ページではグーグルにサイトマップを送信するのはプラグインなどを使えば簡単ですが静的ページはSSL化と同様に自力でやるしかありません。
手順は簡単。
「サイトマップを作製」 → 「グーグルに送信」 これだけです。
...
CSS・HTML 静的ページのSSL化＜http、http://wwwからhttpsへのリダイレクト設定＞
ワードプレスのような動的ページはプラグインで一瞬でHTTPS化が終わってしまいます。ところが静的ページのWEBサイトではプラグインなんて使えませんので自力でやるしかありませんね。
静的ページでSSL化で必要な.htaccessでの301リダ...
CSS・HTML 次世代画像フォーマット「WebP（ウェッピー）」を従来の画像に変換してくれるツール
米Googleが開発しているオープンな静止画フォーマット「WebP（ウェッピー）」。PNGやJPEGといった画像形式よりも高い画質を保ちつつ、データを圧縮することができる、拡張子は「.webp」。
現段階ではChromeでしかWebPは表...
CSS・HTML 必要最低限のOGPタグの設定
ウェブページの情報をSNSと連携させるためのタグ「OGP（Open Graph Protocol）」、基本的なOGP設定です。
HTML５の設定（<html>内にOGPの使用を宣言する）
OGPタグの設定（<head&...
CSS・HTML 正方形の中に異なったサイズの画像を収める＜レスポンシブ対応CSS＞
楽天やヤフーショッピングのゴールドやトリプルやランキングページを作成するときに同じサイズの正方形の中に異なったサイズの画像を収めたい場合があります。
そんな時に使えるCSS。
高さ、幅を決めた骨組みにイメージを入れます、イメージは骨...