CSS・HTML

スポンサーリンク
Bootstrap4

Bootstrapが使えない、使いたくない、そんな時に便利な<CSS Grid>

レスポンシブなページを作るときに便利な「Bootstrap」、簡単に短時間でページが作れます。 でもワードプレスのページを作成するときや簡単なレスポンシブなページを作るときなど「Bootstrap」が使えない、使いたくないときもあります。...
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設定です。 HTML5の設定(<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...
スポンサーリンク
タイトルとURLをコピーしました