タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
この記事をかんたんに書くと… Chromeのタブが「横並びの2段組みで表示」されるようなってしまった 隠された設定で、「縦一列で重ねて表示」する以前の方法に戻すことができる 万が一、Chromeに不具合が発生した場合には初期状態に戻す (2021年5月27日 追記) Google Chromeの最新のアップデートでバージョンが91になりました。これにより、今までのタブ表示に戻すために必要な「Tab Groups」がなくなってしまいました。実質、今までのタブ表示には戻せなくなっています。 「Temporarily unexpire M89 flags」や「Temporarily unexpire M90 flags」を「Enabled」にすることで、「Tab Groups」が表示されるようになるのですが、これで今まで通り「Disabled」に変更しても元に戻ることはありませんでした。海外のサ
概要 Web で文字数が不定の文章を縦書き段組みでいい感じにレイアウトするのは意外と難しい、ということを紹介する記事です。[1] 環境 Next.js App Router: v14.2.5 React を簡単にセットアップしたかっただけで、ほとんど関係ないです Windows 11 Google Chrome: v127.0.6533.120 実装 今回は「小説のような長さ不定の文章を、縦書きかつ縦スクロールで読みたい」という要望に応えることを想定します。 長い文章を縦書きかつ縦スクロールで読むには、読みやすさの観点で段組みするしかないと思います。 また一般の Web サイトにはヘッダーやフッターがあるので、最低限それらを模したレイアウトに収めることを目標にします。 縦書きで段組みする まず共通パーツとして夏目漱石の小説『こころ』の中身を詰め込んだコンポーネントを作っておきます。(中身は
制作の久保田です。 今回は、段組みレイアウトの書き方に関してご紹介します。 段組みレイアウトは、flexboxが使えるようになってすごく簡単になりました。 flexboxで段組みレイアウトと一言で言っても、書き方が幾通りもあるので、これがベストじゃない?って書き方をご紹介したいと思います。ポイントはcalcとnth-childを組み合わせて使うことです。 flexbox、calc、nth-childでつくる段組みレイアウト 上記のような、よくある3カラムレイアウトの場合を見ていきます。 コンテンツ幅は可変、各要素は幅に応じて伸縮するけど、要素間は30pxの余白をつけます。 短いので最初に全コード掲載します。 flexbox、calc、nth-child の基本的な使い方がわからないって場合は先に次章からご覧ください。 <!DOCTYPE html> <html> <head> <style
PCでAppleのサイトを表示した時のフッターメニュー (フッターサイトマップ) のように段組みして、なおかつ、画面サイズに応じて段の数を調整しつつ、内容の流し込みをする、columnsプロパティという非常に便利なCSSプロパティがあります。 しかし、実際に使ってみると、各ブラウザで意図したとおりに表示されない場合があって四苦八苦したので、意図したとおり表示される場合とされない場合を合わせてご紹介します。 各種プロパティの基礎知識 columnsプロパティは段組みを設定するプロパティで、段の数を設定するcolumn-countプロパティと、段の基準幅を設定するcolumn-widthプロパティを一括設定できるショートハンドプロパティです。 column-countプロパティとcolumn-widthプロパティを同時に設定すると、column-countプロパティは段の最大数を意味するように
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く