CSS・HTML 親要素や画像の上に文字などの子要素を中央に配置する＜上下中央、左右中央、上下左右中央＞
画像の上に文字を配置することがよくあります、その文字を上下中央、左右中央、上下左右中央にする方法。 ①親要素（下地）に position: relative; ②子要素（上に重ねるもの）に position: absolute; これは基本...
CSS・HTML
CSS・HTML CSS・HTML ユーチューブ以外の動画の埋め込みタグ＜iPhone(iOS)対応＞
「playsinline」・・・iPhone(iOS)では、「playsinline属性」必須。 「muted」・・・音声なしの動画にすることが可能、「autoplay属性」では「muted」必須。 ※参考 【保存版】HTML5・video...
CSS・HTML 共通パーツの読み込みは「iframe」それとも「.load()」？jQuery.3 では .loadは廃止？
共通パーツの読み込みはインラインフレーム（iframe）を使うことが多かったのですがレスポンスページが主流になってくるとインラインフレーム（iframe）はちょっと不便。 ブートストラップでは「比率ヘルパー」がありインラインフレーム（ifr...
CSS・HTML 子要素を画面いっぱい（全幅）に表示する場合の注意点「width: 100vw;」
楽天もヤフーショッピングも店舗デザインがだいぶ制限されてきました、やっぱりデザインを統一化したいというのが本音なんでしょうね。 そんなオリジナルデザインで良く使う手法が子要素を画面いっぱい（全幅）に表示する手法、ワードプレスでも使います。 ...
Bootstrap4 もっと見るボタンを付ける＜Bootstrap4＞
「続きを読む」 「もっと見る」ボタンのサンプルが下記サイトで紹介されていました。 参考 コピペでできる！CSSとhtmlのみで作る「続きを読む」の開閉ボタン Bootstrap4ではドグルボタンを使用してもできますが、こちらはCSSだけでい...
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リダ...