Bootstrap4 Bootstrapが使えない、使いたくない、そんな時に便利な＜CSS Grid＞
レスポンシブなページを作るときに便利な「Bootstrap」、簡単に短時間でページが作れます。
でもワードプレスのページを作成するときや簡単なレスポンシブなページを作るときなど「Bootstrap」が使えない、使いたくないときもあります。...
CSS・HTML
Bootstrap4 
CSS・HTML CSSの擬似要素＜before/after＞画像の大きさを変更する
CSSの擬似要素＜before/after＞で画像の大きさを変更したい場合の方法
通常の指定方法
content: url(〇〇〇);
これだと画像の大きさを変更することはできません。
h2::before {
content: ''...
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の使用を宣言する）
<html prefix="og:...
CSS・HTML 正方形の中に異なったサイズの画像を収める＜レスポンシブ対応CSS＞
楽天やヤフーショッピングのゴールドやトリプルやランキングページを作成するときに同じサイズの正方形の中に異なったサイズの画像を収めたい場合があります。
そんな時に使えるCSS。
.square_layer{
width: 30vw;
hei...
CSS・HTML 楽天、ヤフーショッピングなどで商品名を3点リーダーで省略する＜複数行に対応CSS＞
楽天やヤフーショッピングのゴールド、トリプルでページを作成する場合どうしても長い商品名を省略したい場合ばあります。
2行で省略、3行で省略、簡単に実現できるCSSが下記、IEにも対応しています。
/* 省略1行 */
.ellipsis1...
Bootstrap4 つい忘れてしまうメディアクエリ(Media Queries)の以下/以上と文字列によるCSSの適用
つい忘れてしまうメディアクエリ(Media Queries)の以下と以上や文字列によるCSSの適用
横幅を条件にしてCSSの適用
「max-width」: 表示領域の最大幅。この横幅以下の場合にのみ適用。
@media screen and...