Y38design

プロダクトデザインをはじめとして、
Webデザイン、グラフィックデザインなどを手がけるデザイナーY38のサイトです。

Blog

Categories

CSS:Flexで任意の数で折り返す、あるいは横Masonry

ギャラリーの様な縦横比ばらばら、数もその時その時で違う、そんな画像達を綺麗に並べたい、という場面は多々あると思います。

そんな時どうすれば一番綺麗に並べられるかを考えました。

一番簡単にそれっぽくするにはMasonryかと思います。
こんな感じでcolumn-countに任意の段の数値を入れればすぐにできます。

See the Pen Masonry by Y38design (@y38) on CodePen.

See the Pen Masonry by Y38design (@y38) on CodePen.

簡単にギャラリー様にできるcolumn-countですがデメリットがあります。
まずは
1.配置が左から縦に並ぶこと
2.下端が揃わない
3.画像の数によらずcolumn-countに指定した段数を守るので画像の枚数が少ないと段すべてを埋めることができない。
というのが挙げられます。

個人的には1.は画像ギャラリーの場合は特に気にしませんが問題は2.と3.です。
2.はMasonryはそういうものだとは思いますが気に食わないです><
この下端が揃わない状態を回避したい。
最大の問題は3.。上のcodepenの下のように画像が少ないのに段数を守ってしまい右が余ってしまいます。
これはなんとしても避けたい。

ということで考えたのが、Flexで任意の倍数で折り返すことができないかというもの。
ざざっと検索したところではいい解決方法は見つからず、自力でなんとかすることに。

考えた理屈としては、js(jquery)を使い、
1.折り返したい倍数の後ろになにがしかの要素を追加する
2.その追加した要素にwidth:100%、flex-shrink:0を指定し折り返す。
 その時height:0を指定すれば見た目にはこの要素は見えず単に折り返した様に見える
3.画像の幅 / 高さの数値をcssのflex-growに割り当て、画像の高さ / 幅の値をflex-shrinkに割り当てる
そうすれば画像の高さが揃い、その中で縦横比を守ったまま自由に幅が伸び縮みするのではないか、と考えました。

それが以下。

See the Pen Ratio_0 by Y38design (@y38) on CodePen.

See the Pen Ratio_0 by Y38design (@y38) on CodePen.

cssでulをflexにし、wrapさせる。
jsで画像の縦横比からそれぞれにflex-growとflex-shrinkを指定する。
同じくjsで折り返したい倍数の後ろに.breakをinsertAfterで追加する。
cssで.breakにwidth:100%; flex-shrink:0; height:0を指定する。

これでだいたいうまくいきました。
cssでliにflex-grow:100;としているのは、jsとcssの読み込み順によってはjsで指定するflex-growが効かなかったからです。

ただこれでは問題があります。
以下の様に倍数の余りが少ない時、その分の画像が大きくなりすぎ、画像の全体が見えなくなってしまいます。

See the Pen Ratio_1 by Y38design (@y38) on CodePen.

See the Pen Ratio_1 by Y38design (@y38) on CodePen.

これをどう解決するか考えた結果、
1.ulの中の要素の数を取得する
2.その数を折り返す数値で割り、余りが多ければそのまま、余りが少なければ折り返す位置の数を変更する
という考えに辿り着きました。

それが以下

See the Pen Ratio_2 by Y38design (@y38) on CodePen.

See the Pen Ratio_2 by Y38design (@y38) on CodePen.

今までと同じ様に基本は6の倍数で折り返します。
ただし、liの要素の数を6で割った時の余りが少ない時(ここでは1、2)は、折り返しの倍数を変更(ここでは4)します。
ここのjsのif文はもっとちゃんとした書き方があるかもしれません…

また、これだけだと1px単位まできっちり縦横埋めてはくれないので、imgにtransform:scale(1.15)とほんの少〜しだけ大きくしliにoverflow:hiddenではみ出す部分を隠す、ということをしています。(codepenを埋め込むと表示が小さくなりすぎるためscaleを1.15にしていますが、実際には1.05程度で大丈夫でした)

これで、画像の高さを揃え、幅は可変、親要素を埋め尽くす、という見た目にできました。
横並びのMasonryとか、flexを任意の場所で折り返す、みたいなものです。

理屈を思いつくのはすぐだったのですが、jsのことを解ってないので実際に動く様にするのには手こずりました。
でも思いつきを実現できて満足です。

この手法は画像の場合ではうまくいきますが、
文字だけや文字と画像の混在などの場合はうまくいかないことが予想されます。
あくまで画像ギャラリー用として、参考になればと思います。

SASSで背景画像に使うSVGの色を変更する

参考:https://tomisan.com/2018/07/background-image-svg-color-sass-scss/

@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}

@function url-encode($string) {
$map: (
"%": "%25",
"<": "%3C", ">": "%3E",
" ": "%20",
"!": "%21",
"*": "%2A",
"'": "%27",
'"': "%22",
"(": "%28",
")": "%29",
";": "%3B",
":": "%3A",
"@": "%40",
"&": "%26",
"=": "%3D",
"+": "%2B",
"$": "%24",
",": "%2C",
"/": "%2F",
"?": "%3F",
"#": "%23",
"[": "%5B",
"]": "%5D"
);
$new: $string;
@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}
@return $new;
}

//function
@function bg-svg($string) {
@return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}');
}
//variable
$icon-color1: #CCC;
$icon-color2: #555;
//style
.icon-view {
background-image: bg-svg('');
}

Sassの画像パスに変数を使う

参考:https://www.it-swarm.dev/ja/css/sass%E3%81%AE%E7%94%BB%E5%83%8F%E3%83%91%E3%82%B9%E3%81%AB%E5%A4%89%E6%95%B0%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/941216378/

パスを返す関数を定義する:

//Vars
$assetPath : "/assets/images";
//Functions
@function get-path-to-assets($assetPath){
@return $assetPath;
}

関数を使用する:

body {
margin: 0 auto;
background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
width: 100%;
}

サーバ不具合

自分で立てたmastodonのサーバ二つ、ある日携帯から見れなくなる不具合に遭遇。
ところがパソコンからとか、家なりその辺のWiFiに繋いだら不具合無く見れる。
SSLというか証明書の関係かなと思っていろいろ調べてみたけど間違ったことはしてないみたい。てかそもそも何もしてないのに、サーバ二つとも同時多発的に起こったのが引っかかる。
あと80番と443番のポートがもうすでに何個も使われてるよ!っていうエラーを吐き出してて直らない。linuxとかnginxとかmastodonの中身とかデータベースとか、全く知識が無いのに手を出しちゃったのがまあいけないんだけど。
ホントは大学の友達が集まることができるサーバを建てたいんだけどな。
とりあえずなにか新しいサービスが始まったら手をつけずにいられないこのアレが直らないからアレ

丼鯖復元

dbのバックアップを取ったタイミングでDBが壊れてしまって、何をどうやっても、いくら調べてもDBに復元できない。

もうひとつ立てている方のpostgresqlの構成を見るとDBの場所やバージョン、roleやdatabaseのユーザや権限、それらすべてが違う。

サーバのことを全く理解…というか黒い画面が怖いレベルで始めたのでなにがなにやらわからなかったけど、3週間くらい格闘してようやくDBやメディア、カスタムスタイルなど、全部バックアップから復元できた。

グーグー先生に訊いてみても、DBのインストールのやりかたが全部違うやり方だし、スペルミスも多くかなりてこずってしまった。

勉強…になるかはわからないけど、まぁDBは1回や2回や3回くらいすっ飛ばしてナンボでしょ(?

メディアクエリ ブレイクポイント

sassに慣れるべく、cssをいじるサイトはどれにしようか考えていてわざわざスタイルのためだけに静的ページつくるのもナンだったので、このサイトにメディアクエリのブレイクポイントを追加してみた。
960px〜1024pxでは元のデザインと全く違うものにしてみた。
ここの元と同じくヒーローイメージ以外はスタイルのための画像は無し。
以前から試してみたかった要素を縦書きにしたもの。
ただし、とにかく作り終えることを目標にしていたので、macのchromeでしか確認できていない。
他のブラウザでの挙動はまた後ほど。

atomでbitbucket

atom上でロポジトリを作成。
bitbucketでリポジトリを作成。
HTTPS git clone https://「bitbucketのアカウント名」@bitbucket.org/「bitbucketのアカウント名」/test.git

すばやく使用を開始
リポジトリに何かを入れる一番簡単な方法は、README または .gitignoreを作成することです。

>ローカルの Git リポジトリを Bitbucket に移行しましょう

>ステップ1: リポジトリのディレクトリに移動する
>cd /User/「ホームフォルダ名」/「プロジェクト名」/.git

>ステップ2: 既存のリポジトリをBitbucketに接続する
>git remote add origin
>https://「bitbucketアカウント名」@bitbucket.org/「bitbucketアカウント名」/「リポジトリ名」.git
>git push -u origin master

とすればローカルのリポジトリとリモートが紐付けられる。

mixin

今日も早朝覚醒したのでサブ機でコーディング。
この前までやってたものとは違う今更感があるもののテスト。mixinを使ってメディアクエリを使ってみてる。eachとかは使わない従来通りのやり方だけど。
しかし10年前の初代MBAでmountain Lionまでかな、しか入らないはずのものにhackintoshで無理やりYosemite動かしてるからか、バッテリーがすぐ切れる。
んで次に続きをやる時に何してたっけ、って忘れてしまう。
ほんとはcssで矩形とか色だけとかで組み立てるだけじゃなくaiかpsdでちゃんとしたデザインをした上でそれを実現させるコーディングしなきゃいけないのだけど…

mixin

早朝覚醒した時は持ち出し専用のサブ機を連れてきてクルマの中で作業する。
とは言ってもエディタとブラウザだけしか入ってないからコーディングしかできないけど。
そんでここ数日は、この表サイトを弄って見た目や構造を変えたくないので裏に別ページ作ってそっちでいろいろ試し始めた。
mixin使ったメディアクエリ、いろいろ宣言しないといけなくて頭がパンクしそう。
eachだのを使うやり方もあるみたいだけどそっちはもっとぐちゃぐちゃになりそう…
cssもプログラミングチックになってきてこれらができなきゃと思うとかなりの危機感。
phpやjsが苦手な自分としては、せめてcssはなんとか会得しなければ。

あらら

て、gulpやらをインストールしようとしたらエラーがたくさん♫

to Top
Menu