my gallery

parts

ホームページのデザインを崩さず、ほぼコピー&ペーストでサムネイルギャラリーを取り入れられるデザインCSS。

イラストや漫画・小説のサムネイル展示に。

設置方法

  1. <head>~</head>の間で「my-gallery.css」を読み込みんでください
    href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください)
<link rel="stylesheet" href="my-gallery/my-gallery.css">
  1. ドキュメント(2ページ目にあります)に沿って、HTMLファイル内にタグを記述してください

サイトのデザインに合わせて設定する

このデザインでは以下のカスタムプロパティを変更することでデザインの変更が可能です。

--width-sp-whitespace」の値はスマホ表示時に影響する数値です。
使用中のサイトデザインによって異なりますので、ご確認いただくことをおすすめします。

カスタムプロパティ概要初期値
--width-sp-whitespaceスマホデザインの左右余白24px
--border-color枠線色#333
--shadow-color影色rgba(51, 51, 51, 0.5)
--new-bg-colornewマーク背景色rgba(255, 255, 255, 0.5)
--new-text-colornewマークテキスト色#333
--caption-bg-colorキャプション背景色rgba(0, 0, 0, 0.2)
--caption-text-colorキャプションテキスト色#fff

※rgba設定の項目も、透過させない場合はカラーコードで指定でOK

「--width-sp-whitespace」の設定

余白を計算する方法

my galleryを設置する要素と、そのすべての親要素の以下の値を加算してください。

値の確認はディベロッパーツール(スマホ表示にしてください)を使用すると楽にできます。

  • margin-left, right
  • padding-left, right
  • border-widthbox-sizing: border-box; が設定されている場合は不要)
  • widthcalcで設定されている場合は要確認

demo.htmlの場合の計算

demo.htmlでは、my galleryをarticle直下に設置しています。
body > main > article の構成になっているため、今回確認する要素は以下の通りです。

  • body(親要素)
  • main(親要素)
  • article(my galleryを設置する要素)
article {
    margin: 0 0 30px;       // right, left = 0
    padding: 0 0 15px;      // right, left = 0
    border: 2px solid #fff; // 2px 左右分なので倍にする = 4px
    border-radius: 5px;
}
main {
    display: block;
    width: calc(100% - 20px); // 減算している 20px が余白
    max-width: 700px;         // スマホ表示の場合700px以下になるので影響がない
    margin: 0 auto;           // autoなのでwidthが影響する
}
body {
    margin: 0; // right, left = 0
    ~~~ 省略 ~~~
}

上記のコードの通り加算すると、初期値の24pxになります。

ディベロッパーツールで数値を設定してみる方法

  1. 「設置方法」通りに「my-gallery.css」を読み込む
  2. demo.html」の「基本の表示」のコードをコピーし、my galleryを設置する箇所にペーストする
<div class="gl-base">
    <div><img src="https://images.unsplash.com/photo-1464564531096-f0163633a18a?w=250"></div>
    <div><img src="https://images.unsplash.com/photo-1506543277633-99deabfcd722?w=350"></div>
    <div><img src="https://images.unsplash.com/photo-1597696929736-6d13bed8e6a8?w=300"></div>
    <div><img src="https://images.unsplash.com/photo-1464564531096-f0163633a18a?w=250"></div>
    <div><img src="https://images.unsplash.com/photo-1506543277633-99deabfcd722?w=350"></div>
    <div><img src="https://images.unsplash.com/photo-1597696929736-6d13bed8e6a8?w=300"></div>
</div>
  1. 2で編集したhtmlファイルをWebブラウザで開く
    (※説明ではGoogle Chromeを使用)
  2. F12キーを押してディベロッパーツールを開く
  3. Toggle device toolbarボタンをクリックし、スマホ表示に切り替える
    (スマホであれば端末は適当でOK)
  4. 右側に表示されているソースコードから、<div class="gl-base">の直下の<div>を探してクリック
  5. Stylesエリアをスクロールして:rootを探し、「--width-sp-whitespace」の数値を変更する
  6. Stylesエリアで数値を変更すると、左側のプレビュー画面でレイアウトが動く
  7. ぴったり3列表示になる数値を探す
  8. 数値が確定したら、my-gallery.cssの「--width-sp-whitespace」の値を変更する

更新履歴

2021/10/20公開・配布開始

ドキュメント

次のページにドキュメントをご用意しています。

タイトルとURLをコピーしました