CSS・HTML

スポンサーリンク
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=""&gt...
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">~&l...
CSS・HTML

要素の高さを変えたくない場合は、はみ出した文字を省略する「…」<CSS/スタイルシート>

レスポンシブのページやiframe(インラインフレーム)で表示させるページなどで、要素の高さを変えたく場合に文字数を省略させるCSS/スタイルシート。 ECサイトのランキングなどで商品名などを省略させたい場合などに使えます。 要素からは...
CSS・HTML

Font Awesome も CDNが便利

フレームワークにWEBフォント、CDNで使うのが便利なんですがFont Awesome も CDNが便利です。 Font AwesomeのCDNを読み込み フリーで使える一覧を探す ここで探せます
スポンサーリンク
タイトルとURLをコピーしました