CSS・HTML 次世代画像フォーマット「WebP（ウェッピー）」を従来の画像に変換してくれるツール
米Googleが開発しているオープンな静止画フォーマット「WebP（ウェッピー）」。PNGやJPEGといった画像形式よりも高い画質を保ちつつ、データを圧縮することができる、拡張子は「.webp」。 現段階ではChromeでしかWebPは表示...
CSS・HTML
CSS・HTML CSS・HTML 必要最低限のOGPタグの設定
ウェブページの情報をSNSと連携させるためのタグ「OGP（Open Graph Protocol）」、基本的なOGP設定です。 HTML５の設定（<html>内にOGPの使用を宣言する） OGPタグの設定（<head>〜</head>内にO...
CSS・HTML 正方形の中に異なったサイズの画像を収める＜レスポンシブ対応CSS＞
楽天やヤフーショッピングのゴールドやトリプルやランキングページを作成するときに同じサイズの正方形の中に異なったサイズの画像を収めたい場合があります。 そんな時に使えるCSS。 高さ、幅を決めた骨組みにイメージを入れます、イメージは骨組みに収...
CSS・HTML 楽天、ヤフーショッピングなどで商品名を3点リーダーで省略する＜複数行に対応CSS＞
楽天やヤフーショッピングのゴールド、トリプルでページを作成する場合どうしても長い商品名を省略したい場合ばあります。 2行で省略、3行で省略、簡単に実現できるCSSが下記、IEにも対応しています。 ※IE対応で見栄えを揃えるため1行省略では定...
Bootstrap4 つい忘れてしまうメディアクエリ(Media Queries)の以下/以上と文字列によるCSSの適用
つい忘れてしまうメディアクエリ(Media Queries)の以下と以上や文字列によるCSSの適用 横幅を条件にしてCSSの適用 「max-width」: 表示領域の最大幅。この横幅以下の場合にのみ適用。 「mix-width」: 表示領域...
CSS・HTML フォントの設定＜font-family＞の基本
フォントの種類は「font-family」で指定しますがこれが意外に迷います。指定によってはWindowsとMacで異なるフォントが表示されるので「イメージが違う」と指摘されたりします。 そこで「font-family」の基本をまとめておき...
CSS・HTML IE（インターネットエクスプローラー）で「Noto Sans JP」が表示されない
「Noto Sans JP」はIEで表示されない GoogleとAdobeが協力して開発したWEBフォント「Noto Sans JP」、もっとも簡単に利用する方法は <link rel="stylesheet" href=""> か @im...
CSS・HTML 文字（フォント）の大きさは「rem」を使う
昔はページのフォントサイズの指定といえば「px」、その後「em」へと変わりましたが今は「rem」。「rem」は「em」を使った場合の問題を解決するCSS3の新単位。 「em」の問題点 簡単に言うと「px」は文字のサイズの単位、ほぼブラウザの...
CSS・HTML 背景画像をレスポンシブに対応させる方法
背景画像をレスポンシブ対応させるにはBootstrap4でインラインフレーム（Iframe）をレスポンシブに埋め込む方法と同じ手法をCSSで使います。 背景画像が4:3のアスペクト比の場合 任意の画像の場合 padding-topを 高さ÷...
CSS・HTML 背景画像を横にスクロールさせたい CSS animation＜レスポンシブ/要素に対して全画面＞
一部の要素で背景画像を全幅でループさせたい場合のスタイルシート。 <div class="bg-image-loop">～</div> や <section id="bg-image-loop">～</section> ※「bg-image...