20200204-thumb

関連記事

デフォルト画像
2018.11.30
複数行の文末3点リーダー省略「line-clamp」で省略がされないバグ

line-clamp 仕事で憤慨したので珍しく技術エントリです。 世の中のニュースサイトとかブログサイトでは、度々「文末省略」が用いられます。 ググればいくらでも出てくる、text-overflowとかのことです。 これを使えば文末に3点リーダーを持ってきて、文章を省略することができます。 1行ならな! 2行以上になると、また別のプロパティを用いる必要が出てきます。 それが「line-clamp」。 -webkit-line-clamp: 3; ってのとそれ専用のプロパティを指定してあげると、line-clampの数の行で3点リーダー省略してくれます。 超有能。 しかしやはり制約はつきもので、webkit系ということもあってかIEやFirefox(?)などでは使えません (火狐は違ったかも) それに正直使用は推奨しないのがこれのビッグ・問題点です。 なぜならおそらくは今後制定されることのないプロパティだからー! ほぼ仕様版的な感じで、なおかつもう開発されることはないと思ったほうがいいです。 なので人間ならおとなしくPHPとかJSで区切るようにしましょう。 どっちもある程度の制約もありますが、ちゃんとプログラムでやったほうがいいよ。 【本題】line-clampで区切れない場合がある まずはこちらをご覧ください。 See the Pen line-clampで区切れない場合があることの説明 by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. このコードを簡単に説明すると ・メニューの切り替えタブと、中身のタブがある ・タブ1/2/3をクリックすると、対応した中身タブの表示が切り替わる っていうだけのものです。 使い道としては、ちゃんとデザインすればタブ切り替えメニューになったりします。 最近だとサイドバーに表示するミニランキングとかそういうの? さてここで本題、見りゃわかるんですが、タブ2をクリックして表示させますと、なぜかline-clampが効いてない状態でタブが表示されます。 もちろん、3つのタブすべてに同じcssを適用しており、理想の表示としてはタブ1のようになるものとします。 で、これを調べてたのですが、どうもwebkit系特有のバグ?だそうですね。 というわけで下記の2ページを参照。 マルチラインのラインクランプ(省略記号)は、私は、H3タグにこのクラスを適用 -webkit-line-clamp is not respected when visibility is hidden どちらも英語ページですが(上のは無理くり日本語翻訳されたもの)、言ってることはひとつです。 どうやら、line-clampは再描画?が上手くされないらしいです。 今回上のメニュー切り替えでは、隠れているものには「visibility:hidden」が設定されています。 それを切り替えタブクリックでvisibleにしているわけですね。 ですのでレンダリング時点でvisibleがhiddenしてるってのが原因だそうです。 これはwebkitのバグとして認められているのでどうしようもありません。 諦めろん。 ただし、解決策がないわけではなく、その要素を「hide().show()」とかで再描画すると直ります。 だから開発者ツールでline-clampを付けたり消したりするとなぜか直るっていう現象が起こったりするわけですが。 やってはないんですが、もしかしたらvisibilityじゃなくてdisplay:noneとかなら影響が出ないかもしれませんね。 アレも多分再描画だし。 でも色々とcssの動きが面倒になるのでやっぱりhideとshowとかで再描画させてあげたほうが楽かも? クソ雑魚js使いなので正直正しいかもわからんっす。 ぐち ぼく思うんですけど、そもそも3点リーダーの省略やめようぜって。 だってアレ面倒なだけじゃないですか。 css → できないのとできるのが多すぎ、そもそも制約デカすぎ php → 文字数制限があって日本語だと微妙、バイト制限でやっても結局多少のズレは発生する js  → 重すぎ、一番綺麗にできるけど負荷が半端ないので現実的じゃない っていう問題児なので、もし省略を誰かに頼むときは 「なんかこう、下のほうがグラデーションで消えてく感じで省略してほしい」 って頼みましょう。 下白のグラデ掛けるだけでなんとかなるので作るほうとしては非常に楽です。 あとこれは個人的な意見ですが、見栄えが「...」よりもグラデでスッと消えたほうがいいと思います。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.09.25
左門くんはサモナーを集め始めた

ジャンプ作品 今更なんですけど、左門くんはサモナーを買い集めてます。 この作品自体は去年には完結したものですが、ジャンプ読んでた時期はこれだけ読んでたんですよね。 ギャグ分高めなギャグ漫画です。 カスと天使の話。 いやまあ、アンケートすら出してないような人間が言うのもなんですが、作品は好きだったんですよね。 キャラ付けがしっかりしてるしギャグがブラック感高めで面白いし。 何より他作品オマージュネタが多くて、それでいて完成度が高いおかげで笑えます。 現状8巻まで買いましたが、ここまでほぼシリアスなし! 長引くギャグ漫画にありがちな変に極振りしたシリアスパートがない所が好きだったりします。 マステマ編?アレは人気投票のためのギャグパートでしょ? 個人的に加護ちゃんが本当に好きだったので続いててほしかった感あります。 まあでも、なんとなく斉木みたいな雰囲気があったから好きだったってのもありますね。 この作品、沼駿という方が書いてるんですが、SNSなんもやってないから現状がわからないんですよね。 サモナーが終わった後に一度読み切り書いてるみたいですけど。 うおおん、新作が読みたい。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.08.01
ブログを微妙にアップデートしました!

Ver 1.01的な感じで 見出しに使ってるh3タグを見出しっぽくしました 記事をフォルダ分けして綺麗に整理できるようにしました っていう感じです。 フロントで見れるのは前者ですかね。 ちょっと見出しっぽくなったでしょ。 適当に検索かけると出てくるブログとかで使われてそうな感じのやーつです。 なんとなくブログみたいな雰囲気が出ましたね!? この前ulタグもちょっと整えたからそれも相まって良い感じですな!? ただ、ulタグに関してはスマホ版を一切考慮してないので酷いことになっております。 多分そのうち直すと思います。 アクセスに関するなんとやら。 アナリティクスは今こんな風になってます。 面白いことに、このブログはPC率が8割なんですよ。 だから実はスマホ版なんて考慮しなくていいんじゃねえかなって! Google先生的にはそういうわけにもいかないのですが、まあ暫く放置してても問題ないでしょう。 Hexoに変えて速度が上がったからなのか、ちょっとアクセスが増えた気がしますね。 ていうか回遊率が上がった? 表示に3秒以上かかると直帰率がどうのって話を聞いたことありますし、多分そういうことなんでしょう。 意外な副産物であります。 レポートを見ると、わりと404エラーページに入ってる人もいます。 どこに入ってるのかは知りませんが、それなりに人が入るページは移してるから大丈夫なはず…。 1500件ぐらいあった記事が10分の1以下にまでになりましたからね。 そりゃ404エラーページも活用されるわって話です。 作ってよかったエラーページ。 Hexoに変えて色々メリットがあって喜んでます。 記事作るのを楽にできるようになったのが一番の良さだと思います。 管理画面入る必要がないのもグッド。 これからもちょくちょくブログを改造していくので、時折ぶっ壊れたりもしますがよろしくお願いします。 それでは今日はここらでサヨウナラー