日本語の折り返しをJavaScriptで制御する - LIVESENSE ENGINEER BLOG
インフラエンジニアの中野(etsxxx)です。今回はWebのフロントの話です。稚拙な部分はご容赦を。 はじめに 前提知識 解決案の候補 解決案1: 手でspanタグをつける 解決案2: サーバーサイドの処理 解決案3: クライアントサイドの処理 クライアントサイドで文節区切り 実装 結果と考察 さいごに 2024/05/16追記 はじめに 2020年12月、リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあります。 Q by Livesenseはこういう見た目のブログです。 Q by Livesenseは縦書きということで、漢数字を使っていたり、写真やイラストを使わずに純粋な文体で記事を書いていたりと、書籍のような日本語らしさが求められるデザインとなっています。 縦書きはWebエンジニアにとっても珍しい実装ですが、
CSSで実装するハンバーガーメニュークリック時のエフェクト 10 - NxWorld
いずれも同じような動きだったり過去に紹介したものに少し動きを加えたレベルにはなりますが、ハンバーガーメニューをクリックしてクローズボタンへ変化する動きをCSSで実装したサンプル集です。 今回もメニュークリック時にJavaScriptを使って.activeというクラスが追加・削除する動きを実装想定になっています。 共通のHTML 紹介するサンプルはいずれも下記のようなHTMLを使用しており、クリック時にこのbutton要素に対して.activeというclassが付与されるという想定でCSSの実装コードを紹介していきます。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { display: inline-blo
Chrome 88やEdge 88でのfont-size: calc(2ch)
利用しているフォントの「0」のグリフ幅によって変わるch単位は、実装されて久しい。これを、font-sizeプロパティーでcalc()やclamp()など計算するCSS関数を通して使うと、Chrome 88やEdge 88で想定より大きくなってしまうバグがあるようだ。Firefox 85やSafari 14では問題なく、またwidthプロパティーなどでなら発生しない。 .test .raw { font-size: 2ch; } .test .calc { font-size: calc(2ch); } このようなコードで再現する。同じ大きさ(16px前後)になるはずだが、Chrome 88やEdge 88で.calcの方が倍の大きさになってしまう。例えばNoto Sans CJK JPだと、17.76pxのはずが35.52pxになった。 2度計算してしまっているような気がするが、3chに
RailsアプリケーションのカオスなCSSに規約をゆるく導入する 〜要素セレクタ警察〜 - READYFOR Tech Blog
はじめに こんにちは！READYFORでフロントエンドエンジニアをしております、江面（ @neripark ）と申します。 最近は主に Next.js （TypeScript）を用いたSPA開発に従事しております。CSS設計、コンポーネント設計、Netlify などが好きです！ 本日はタイトルにもある通り、既存のRailsアプリケーションにCSSコーディング規約を導入したお話をしようと思います！ 既存のプロダクトのCSSで苦労している方の参考になれば幸いです。 これまでのREADYFORのCSS READYFOR は2011年にスタートした、日本初のクラウドファンディングサービスです。 その中身は Ruby on Rails で組まれた標準的なモノリシックWebアプリケーションで、サービスの成長とともに、機能開発も重ねられていきました。 その流れの中で、いろいろなエンジニアがいろいろな文脈
2021年に伸びるCSSプロパティ3選 | フロントエンドBlog | ミツエーリンクス
ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトをご存知でしょうか。 さまざまなCSSプロパティをカテゴライズし、どのくらいのユーザーがそのプロパティを知っているか、使ったことがあるかがまとめられています。 私は、当社のPodcastでもこのState of CSSについてお話ししたのですが、今回は、実際にコードベースで2021年に活躍していくであろう3つのCSSプロパティについてご紹介します。 ※対応ブラウザ状況について、最新の情報については適宜Can I useなどでご確認ください。 backdrop-filter まず1つ目はbackdrop-filterです。State of CSSでは知らないと答えた人が49.9%と全体の半数いました。 このプロパティは、すりガラスのように後ろにあるものが見えづらくなるようなぼ
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
React Component 分業の覚書
フロントエンドを Next.js 化する機会が多くなってきた昨今。いざ取り組むにしても、スタイリング込みで実装出来るエンジニアが不足気味ではないでしょうか？また、縦割り分業している現場ではこれまで、マークアップ（フロントエンド）エンジニアが html + css を納品し、それを元にサーバーサイドエンジニアがテンプレートエンジンに組み込むという業務フローも少なくありませんでした。 この様な業務フローの場合、同じリポジトリで作業してもらうという事が難しいこともあります。Next.js 移行期のこれからも同様のことが多々起きると予想しており、完全分業するうえでの最適化を考える必要があります。この件について少しまとめたくなったので、メモ書きとして残します。 前提条件 以下の座組みは React Component 分業で最適だと考えている組み合わせです。マークアップエンジニアはこれまでと変わらず
ch単位を使ったカラム幅指定 - Weblog - Hail2u.net
コンテンツのカラム幅は半角英数で45から75文字という説がある。それをem単位に直すとおおよそ25emから35emと考えられるが、実際にはフォントの横幅に依存する。一方CSSにはch単位というフォントの横幅によって変化する単位がある。ということはこの単位を幅や横方向の余白に利用すると、使用されるフォントに応じてカラム幅が適切に変化するはずだ……が、そうは問屋が卸さなかった。 利用はそれほど難しくない。ch単位は半角数字の0の横幅で決定されることさえ頭に入れておけばそれでよい。45から75文字を直すならそのまま45chから75chになるわけだ。一部でどうしても(r)em単位と組み合わせたい場合も出てくるだろうが、その場合はcalc()関数を使える。これでぱっと見はうまくいく。 しかしながらウェブフォントとの相性が非常に悪い。ウェブフォントの読み込み中と読み込み完了後でch単位の基準が変わって
垂直方向のマージンにはmargin-topを優先的に使う理由
margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar
CSSにおけるマージンの相殺を徹底解説
CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。 この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 垂直マージンのみが相殺される 隣接する要素のみが相殺される より大きなマージンが勝つ 入れ子は
UIキットやブロック・コンポーネント集など、Tailwind CSS使用時の参考リソース - NxWorld
UIキットやブロック・コンポーネント集など、「Tailwind CSS」を使用する際に参考になるリソースのまとめです。 既にTailwind CSSを使い慣れている人は活用することでよりスピーディに且つ楽に制作できるようになりますし、これからTailwind CSSを使う予定だけど公式のドキュメントだけだといまいちピンとこない人は、紹介するものをいくつか眺めてみると「こんな見栄えも表現できるのか」とか「この見栄えはこの組み合わせ方で再現できるか」など把握するのに役立つと思います。 Tailwind UI Tailwind CSSの作者が公開している公式のコンポーネント集です。 有償で且つすべてのコンポーネントを使用したい場合は金額が少しネックになるかもですが、300種類以上利用できる以外にもページレベルで用意されているものも利用可能になり、現時点では購入後もアップデートは無料とアナウンスさ
scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック
ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるようになりました。 「すべてがスムーズになる」弊害が1つあり、ページ内検索時にも適用されてしまいます。複数のキーワードがページ内にある場合は、時間がかかってしまいます。 このページ内検索時を除外して、ページ内にscroll-behavior: smooth;を適用するテクニックを紹介します。 仕様なのか、不具合・バグなのか、いずれにしろ簡単に対応できます。 Fixing Smooth Scrolling with Find-on-Page 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS-
NextJs - Add HTML Lang attribute to custom _document in object notation
I want to set the <html lang="..."> tag on a NextJs application with object notation. Im rendering a serverStylesheet for Styled-components so my current _document file looks like this: class CustomDocument extends Document { static getInitialProps = async (ctx) => { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ e
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
Next.jsにおけるCSSの取り扱い方法 2020年9月版
はじめに CSSとしたがNext.jsにおけるスタイルの取り扱い方について。 公式ドキュメント見れば基本的なことはわかるのだがIssuesやDiscussionsを追わないと分かりにくいことも多いのでまとめる。 2020年9月版としたのはすぐにでも動きがありそうなため。将来的なこともなるべく記載する。 追記 2020/12/01 時点で特に情報が古くなっていないことを確認しています。 2020/12/10 Tailwind Support について記載しました。 Build-in CSS Support Basic Features: Built-in CSS Support | Next.js デフォルトでCSSのサポートがされている。かつては @zeit/next-css を導入する必要があったが今は必要ない。 Sassについても Before you can use Next.js'
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 Intrinsic Sizing In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSでのサイズ指定方法とは 外因性サイジング 内因性サイジング: min-content 内因性サイジング: max-content 内因性サイジング: fit-content ブラウザのサポート状況 実際の使用例 終わりに CSSでのサイズ指定方法とは CSSには、内因性と外因性の2つのサイズ指定方法
CSS Containment によるパフォーマンス改善 — HACK The Nikkei
この記事はNikkei Advent Calendar 2020 19 日目の記事です。 日経電子版ウェブチームの伊藤です。 この記事では CSS Containment の紹介と電子版での利用例について書きます。 CSS Containment とは 概要 CSS Containment は DOM のレンダリングを開発者側で調整できるようにするパフォーマンス系のプロパティです。 web サイトが効率的にレンダリングされるようユーザーエージェントに伝えることができます。 次のような値を取ります。 contain: none | strict | content | [ size || layout || paint ] プリミティブな値として size, layout, paint があり、strict と content はこれらを複合した値のエイリアスで、それぞれ size layo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Underline Hover Styles for Links | Codrops
Next.jsとCSS - Qiita
Styled-componentsでEmmetが効かない - Qiita
