ライブラリなどを使わずにlightboxを作れないかのテスト。
lightboxさせるのは1枚だけ。
.wrapperにimgが入っている。そのimgをクリックすると.wrapperの中に.lightboxというモーダルの背景になるdivを作成。その中に元のimgを複製。
そしてその状態で.lightboxをクリックすると元に戻る。
まぁ想定外に時間がかかったけどなんとかできた。
See the Pen lightbox by Y38design (@y38) on CodePen.
See the Pen lightbox by Y38design (@y38) on CodePen.
tableなど、画面幅からはみ出す要素を画面幅以内のdivなどで囲い、overflow-x:auto/scroll、（縦はtableの高さそのまま）とした場合、水平のスクロールバーは下端にしか出ません。
tableの行が多い場合、画面を下までスクロールしないと水平スクロールバーが現れず、横にスクロールできるかどうかがわかりにくいです。
方法として2つ見つけました。
ひとつは囲ったdivをtransformで上下反転し、その中身をさらに上下反転してスクロールバーを上に持ってくる方法。
これが一番楽なやり方かと思います。
（参考：https://dev.classmethod.jp/articles/css_scrollbar_adjustment/）
しかし、下までスクロールすると今度は下にスクロールバーが無いのが不便になります。
そこでjavascriptを使って上下にスクロールバーを表示させます。
.scrollbarという上部スクロールバーを表示させるためだけのdivと、.scrollboxという実際にoverflowさせるdivの二つを用意するのがポイントです。
（参考：https://qiita.com/kuro-wassan/items/86b6a24787116797a5d0）
しかし、参考サイトのままだとちょっと使えないところがあるので修正します。
まずはjqueryを使わないようにします。
そしてscrollbox、scrollbarを使う要素が複数あってもちゃんと動くようにします。
完成形が以下です。
以前少しだけいじってみていたGit、もう少しちゃんと使ってみたくて解説をちょこちょこ読んでたのだけど、さっぱりわからない…
試しにフォルダ作ってmasterにindex.html、そこからcss1というブランチ作って1.cssというファイルを編集、masterからまたcss2というブランチ作って2.cssというファイルを編集。
masterにチェックアウトしてcss1とcss2のブランチをマージ、というのをやってみた。
css1はブロックのcss、css2は細かいスタイルのcss、というふうに目的を分けてやってみた。
すると確かにmasterにそれぞれが反映されている。
なるほどなーと思ったけど、一人でやってると今どのブランチかなんて意識することなく全部のファイルをがーっと編集してブランチもなにもあったものじゃない未来しか見えない…
1と2というブランチを作ったとしても、1の編集をするには2の編集結果も必要になるから、結局逐一masterにマージすることになって複数のブランチを使い分ける必要性が無い、ような。
けどせっかく便利な機能だからもう少し触ってみたい。
前から気になってたこのサイトの、”Blog”とかのタイトル部分、上のコピックの写真とともに彩度が高くて区切りがはっきりしない部分、ようやく手を入れた。
コピックの写真と彩度を変えたりしたけどイマイチパッとせず。フラットすぎるのがダメかと思い、タイトルの上下に影を入れて違うレイヤーに感じるように変更。
あとはその影による立体感をはっきりさせるために、タイトルの上には暗い、タイトルの下には明るい、1pxのラインを入れて厚みを出した。
そのラインも単にborderでつけるのではなく、after要素で1pxの半透明を重ねて下地の色を活かすようにした。
これで印象はあまり変えずに、コピックの写真とタイトル部分、コメントやフッターの部分の意味づけがはっきりできた、と思う。
[WordPress]スマホアプリで改行と段落をどうするのかを色々と模索
iPhoneでwordpressの投稿を書く時、改行が全部段落になってしまって非常に読みづらい文章になってしまうから早いとここれをしとかなきゃだ
miやAtom、最近はVScodeばかりで今までほぼ触ったことがなかったDreamweaver、使えるようにならなきゃなーと思い、Adobeのプランを変更して使ってみた。
htmlでテンプレ使えるのは便利だな、ヘッダーとか使いまわす部分を一括で編集できるのは大きい。
ただwordpress使うサイトだとwordpress自体がテンプレの集まりだからその点に関しての旨味はなくなるなー。
gitやサーバ接続できるのは他のエディタと同じ。
設定をAdobeアカウントで同期できるのはありがたい。
ただ、とにかく重い。起動も遅いしテキストの編集しててもサジェストが出てくるのも文字を打つことすら重く感じる。
そのサジェストもhtmlで入れてるクラス名とかをリストアップしてくれないのがけっこう痛い。
閉じタグの位置もコロコロ変わっちゃうとか。
option矢印で単語ごとに選択するのも他のエディタやosと違う区切りのように感じる。
画面分割もあまり自由じゃない。
Atomやcodeは設定が分かりづらいけどコーデングすること自体は最初からとても使いやすく感じたから慣れだけではないなー。
そのへん、さすがAdobe…みたいな。
そうは言っても、プログラマーじゃなくてhtml/cssのコーディングならDreamweaverはデファクトスタンダードみたいなものだろうから慣れないとなー。
プラグインもあるようだからそれで使いやすくなったりするのかな。
とにかくもう少し勉強しなきゃ。
おそらくはMontereyにしてからだと思う、再現性の無い不具合がずっと続いている。
なにか作業しててもなにも触ってなくても、突然全ての外付けHDDが強制排出される。そしてひどい時はそのまま強制再起動がかかってしまう。
繋いでるHDDはどれもUSB3、一つ二つ三つ、何個繋いでても起こるしHDDを初期化したりケースを変えても起こる。だけど同じUSBハブに繋いでるHDMIは生きてる。ハブを変えてもダメ。
ネットで探してみるとまあ同じ症状の記事が出るわ出るわ。
https://gori.me/macosx/macosmonterey/138381
とか、
https://japanese.engadget.com/macbook2020-040001675.html
とか。
HDDをうんぬんしているうちに、関連がありそうな事柄も発見。
まずディスクユーティリティでHDD1を初期化してHDD2の中身をHDD1に復元しようとすると、これができない。リソースが使用中です、的なエラーメッセージ。
この時点でMBAやHDDやハブがおかしいのではなく、Montereyの外付けディスクの管理？みたいなものがおかしいのでは？と思い始めた。
さらにふとシステムレポートのUSBの欄を見ると、外付けHDDは繋いだ分表示されてるのだけど、その上位にあたるUSBハブが表示されない。MBA本体のUSBから直接外付けHDDのケースに繋がってることになってる。
こりゃもういよいよOSのハブ、外付けディスク関係が怪しい。
上記のサイトにもアップデートされたドライバがおかしい、みたいな結論になってたし。
これでMBA本体の故障ではない、という確信に近いものになった。
まあだからと言ってどうしようもない、バグが修正されたOSのアップデートを待つしかない…
大量のデータをHDD間でコピーしてる間、強制排出されないか気が気じゃ無いから早く修正されないかな…
ギャラリーの様な縦横比ばらばら、数もその時その時で違う、そんな画像達を綺麗に並べたい、という場面は多々あると思います。
そんな時どうすれば一番綺麗に並べられるかを考えました。
一番簡単にそれっぽくするには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のことを解ってないので実際に動く様にするのには手こずりました。
でも思いつきを実現できて満足です。
この手法は画像の場合ではうまくいきますが、
文字だけや文字と画像の混在などの場合はうまくいかないことが予想されます。
あくまで画像ギャラリー用として、参考になればと思います。
参考：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('');
}
パスを返す関数を定義する：
//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%;
}