コピペでOK CSSのみで記事内で写真をメイソンリーレイアウト

カスタマイズ

2019/02/24 2019/02/27 8

vanillaice (Akira)

初心者向け HTML CSS Instruction Playground

複数枚の写真を掲載する時にメイソンリーレイアウトにしてみよー (o'ω')ﾉ

事前説明と使用注意点

私が制作したテンプレートで使うためのhtml, CSSです。他者製作テンプレートで使うにはCSSが足りないかもしれません。ご質問は弊テンプレートをご利用の方に限定させてくださいね。

CSSで簡単にできますが、テンプレートレイアウト(ページ全体レイアウト)としての採用不可です。理由は表示順序が横方向ではなく縦方向になるためです(左上 → 左下 → 右上 → 右下)
時系列が重要なブログで縦に配列というのは問題があると思いますので不可。並び順に特別な意味を持たない画像などの配列にご利用ください。

lazyloading用htmlはスクロール位置ズレ防止のために若干内容量が増えています。

共通html

通常掲載用

<div class="tile-container">
  <!-- 画像一枚分 -->
  <div class="tile">
    <img src="画像URL" alt="">
  </div>
  <!-- ここまで -->
</div>

lazyloading掲載用

<div class="tile-container">
  <!-- 画像一枚分 -->
  <div class="tile" style="padding-top: calc(縦 / 横 * 100%);">
    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像URL" alt="">
  </div>
  <!-- ここまで -->
</div>

から  までを複写してください。デフォルトでは最大横3枚並びになりますので最低でも3つの画像が必要です。

lazyloading用をご利用の方は画像の縦横サイズ指定をお忘れなく。

CSS

シンプル

ソースコードを見る

通常

.tile-container {
  column-count: 2;/* スマホでの横並び数 */
  column-gap: 10px;/* アイテム間の余白 */
}

@media screen and (min-width: 700px) {
  .tile-container {
    column-count: 3;/* 指定サイズ以上の画面幅(タブレット, パソコンなど)の並び数 */
  }
}

.tile {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
}

.tile img {
  width: 100%;
}

lazyloading

.tile-container {
  column-count: 2;/* スマホでの横並び数 */
  column-gap: 10px;/* アイテム間の余白 */
}

@media screen and (min-width: 700px) {
  .tile-container {
    column-count: 3;/* 指定サイズ以上の画面幅(タブレット, パソコンなど)の並び数 */
  }
}

.tile {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  display: inline-block;
  position: relative;
  width: 100%;
}

.tile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ブレイクポイントは適当です。ご自身のページを確認しながら(ブラウザ幅を拡大・縮小しながら)最適なポイントを探してください。デフォルトは 700px にしてあります。

角を丸くしたい場合は .tile img に border-radius: 数値px; を追加してください。

写真風枠付き

ソースコードを見る

通常

.tile-container {
  column-count: 2;/* スマホでの横並び数 */
  column-gap: 10px;/* アイテム間の余白 */
}

@media screen and (min-width: 700px) {
  .tile-container {
    column-count: 3;/* 指定サイズ以上の画面幅(タブレット, パソコンなど)の並び数 */
  }
}

.tile {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  border-top: 1px solid white;
}

.tile img {
  width: 100%;
  border: 10px solid rgb(240,240,240);/* 枠の色 */
  box-shadow:0px 0px 0px 1px rgb(221,221,221);
}

lazyloading

.tile-container {
  column-count: 2;/* スマホでの横並び数 */
  column-gap: 10px;/* アイテム間の余白 */
}

@media screen and (min-width: 700px) {
  .tile-container {
    column-count: 3;/* 指定サイズ以上の画面幅(タブレット, パソコンなど)の並び数 */
  }
}

.tile {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  display: inline-block;
  position: relative;
  width: 100%;
  border-top: 1px solid white;
}

.tile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid rgb(240,240,240);/* 枠の色 */
  box-shadow:0px 0px 0px 1px rgb(221,221,221);
}

まとめ

せっかくのメイソンリーですから画像のアスペクト比はバラバラの方がおもしろいですね。
その他の画像で遊ぼう記事はコチラ

はてなブログの【写真をタイル状に並べる】をFC2でやってみよう

はてなブログさんの機能パクりというか。まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・｀)...

アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう

昨日ははてなブログさんのレイアウトを真似てみましたが、今回はアメーバさんを。...

初心者向け HTML CSS Instruction Playground

8 コメントをどうぞ

There are no comments yet.

オカンチ

こんにちは　東京は暖かく　とても良いお天気ですー

色々な事が　まだまだ　理解出来ていないのですが
コチラの画像の載せ方の勉強にきました
@media screen and (min-width: 700px) {
.tile-container {
column-count: 3;
は　ソースコードの　どの位置に入れたら良いのでしょうか？

Akira

To オカンチさん

オカンチさん、こんにちは ('0')/

お天気良すぎて5年ぶりの花粉症に悩まされておりますー（￣∀￣；）
次男が耳に穴を空けてくれとうるさいので先にそっちやってきます(笑)
のちほど追記しますね。

----
そのCSS内容は mediaqueries(メディアクエリ)といって、画面サイズのブレイクポイント(横幅に応じてレイアウトを変更する際のポイント)を示すものです。
で、この内容をhtml要素に入れ込む(style属性によるインラインCSS化)はできません。
インラインCSSにできないCSSは他に

::before
::after
などの疑似要素
:hover
などの擬似クラス

などが挙げられます。ですからこの場合はスタイルシートに記すか、あるいは以下の記事を参照してください(追記のinnerHTMLを用いると良いと思います)

参考記事: body内のstyle要素が一定条件下で再びエラーに
https://vanillaice000.blog.fc2.com/blog-entry-796.html

オカンチ

ありがとうございます
頭の中が　チンプンカンプン？？
参考ページを拝見しながら　頭を整理し　再度挑戦させて戴きます

Akira

To オカンチさん

こんにちは (o'ω')ﾉ

たぶん根本的なところじゃないかなぁ、と思います。
Yahoo!ブログではレンダリング後の内容を「コピペ」するために旧htmlの廃止要素や廃止属性てんこ盛りの内容を使わざるを得なかったという問題がまずあります(高度なCSS内容は基本的にコピーできません)

例)
<table cellspacing="" cellpadding="" border="" background="">

これ全てもうとっくに廃止されて「使ってはいけない」とされる属性群です。ただ「コピーする」という場面では便宜上htmlはコピー可能ですからわかってて使っている人、わからず使っている人とまちまちだと思います。
というかわかってる人はこの書き方はしていないはずだけど(笑)

そしてこれら廃止属性を使わずにやろうと思えばstyle属性を利用したインラインCSSということになりますよね。でもインラインCSSの場合全ての内容が問題なくコピーできるとは限りません。

-----
「本来htmlとCSSは分離させるべきもの」という考え方が無い、という方もYahoo!には多かったのかもしれません。Yahoo!はスタイルシートの提供がありませんので、代替手段としてインラインCSSあるいは廃止属性利用が広まったのではないかと。
(廃止属性はもとから廃止だったのではなく2014年のhtml5勧告で廃止になりましたのでそれ以前の方法としては妥当です)

オカンチさん、masaさんという方ご存知ですかね。たぶん「htmlファイル作成からのコピペ」って、彼が広めたと思うんですよ。広めたというより「困っている人に代替手段として教えた」という感じだと思います。
代替というのは「wikiの」ですね。wikiを使うことの危険性(今実際お引越しで困っている方が多くこれはmasaさんの先見の明と言えます)

で、masaさんは「便宜上の方法」「致し方ない方法」だとはっきりわかってますしそのつもりでやり方を提示したと思いますが、わかってない人にどんどん伝わって広まってしまった結果なのではないかと。masaさんも嘆いてました(笑)
彼とはFBフレンドです ('0')/

オカンチ

私も　理解出来てないままに　使っていました
装飾文字は　楽しかったから　有難かったです

高度なソースは作れませんし・・・
もっともっと　勉強しないと駄目ですね
焦らず　頑張ります

https://okanchi1027.blog.fc2.com/blog-entry-13.html
此処のページ　までは　どうにか出来たと思うのですが

Akira

To オカンチさん

Yahoo!でのやり方から通常のやり方に直そうと思うと2段階を踏まないといけません。
1. htmlでの装飾を利用しない(廃止要素・廃止属性の排除)
2.インラインCSSはイレギュラーな方法であるという認識

オカンチさんの場合1の段階は既に済んでます。私が書き換えを勧めましたよね。html5になったのだから廃止属性は使わないようにしましょうね、ということでソースの書き方を大きく変更されているはずです。現にオカンチさんが今やっているのはインラインCSSであって、htmlでの装飾ではありません。
ですから1段階スキップできます。

あとは2の「インラインCSSは本来のやり方ではない」という点を知ることですよね。FC2ブログはスタイルシートが使えるわけであって、Yahoo!はスタイルシートが使えないため致し方なくインラインで書いていたのだ、という事実を知るという意味です。
実際web一般でもインラインCSSは非推奨です。極力スタイルシートに記すように、とされています(当たり前だけど)
とはいえケースバイケースで、インラインCSSで書いておいた方が良い、と思われる場面もありますので、今後は使い分けを考えながらやっていかれると良いと思います。

オカンチ

毎回　丁寧に教えて下さり　ありがとうございます
スタイルシートの事を　理解しないと　ですね

Akira

To オカンチさん

はい。少しづつで良いと思います。
お疲れ様です :)

0 この記事へのトラックバック

この記事にトラックバックする(FC2ブログユーザー)

カスタマイズ

事前説明と使用注意点

共通html

CSS

シンプル

写真風枠付き

まとめ

コメント 8 コメントをどうぞ

トラックバック 0 この記事へのトラックバック

8 コメントをどうぞ

0 この記事へのトラックバック