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設定です。 HTML5の設定(<html>内にOGPの使用を宣言する) OGPタグの設定(<head&...
CSS・HTML

正方形の中に異なったサイズの画像を収める<レスポンシブ対応CSS>

楽天やヤフーショッピングのゴールドやトリプルやランキングページを作成するときに同じサイズの正方形の中に異なったサイズの画像を収めたい場合があります。 そんな時に使えるCSS。 高さ、幅を決めた骨組みにイメージを入れます、イメージは骨...
CSS・HTML

楽天、ヤフーショッピングなどで商品名を3点リーダーで省略する<複数行に対応CSS>

楽天やヤフーショッピングのゴールド、トリプルでページを作成する場合どうしても長い商品名を省略したい場合ばあります。 2行で省略、3行で省略、簡単に実現できるCSSが下記、IEにも対応しています。 ※IE対応で見栄えを揃えるため1行省略で...
スポンサーリンク
タイトルとURLをコピーしました