pepeです！
今回は、私がオリジナルアプリを作成する際に使用し、便利だなーと感じたCSSを紹介していきたいと思います！
具体的には、改行と右画面スクロールです。オリジナルで作成しているECサイトにおいて、商品詳細ページに商品の説明を記述したかったのですが、説明文がうまく枠内に収まらず困っておりました、、、
また、商品紹介が長くなると、画面左側に空白が生まれてしまいUI的に微妙だと感じておりました。
簡単なCSSですぐに改善できましたので紹介させていただきたいと思います！
ぜひ一緒にやってみてください！
※画像内で使用しているサンプル分は以下のサイトを参考に致しました。
日本語文
https://www.zaitakuf.jp/user/kijiwarning_pages
英字文
https://okwave.jp/qa/q5138471.html
改行
まず、全くCSSを指定しないとどのような表示になるのか実際に確認してみましょう。
日本語文章の場合
単語の区切りに関係なく、自動的に改行されます。
英語文章の場合
スペースに合わせて自動的に改行されます。
ただ、URLなどの長い文字列については改行されずにはみ出してしまいます。
日本語や英文は自動的に改行されるため、必要なのは微調整かと思います。
以下で紹介するのは、
URLのような長い英数字を改行したい際に便利なCSSとなります！
overflow-wrap
この記述は、表示範囲に収まらない長く連続する英数字を途中で改行させるかどうかを調整するためのものです。日本語文の場合、表示は変わりません。
記述方法は、以下の通りです。
# デフォルトと同じ
sample {
overflow-wrap: normal;
}
# 長い英数字の場合、単語の途中で改行されるようになる。
# 適度なスペースのある英文の場合、単語の切れ目で改行されるようになる。
sample {
overflow-wrap: break-word;
}このCSSを適用すると、先ほどの画像が以下のように変化します。
上記のように、長い英数文は途中で改行され、英短文は単語の切れ目で改行されるようになりました。
word-break
この記述は、表示範囲の最後まで文字が到達した時に単語の途中で改行させるかどうかを調節するためのものです。
記述方法は以下の通りです。
/*英数字でも単語の途中で自動改行される。*/
sample {
word-break: break-all;
}
/*表示範囲を超えたとしても、決められた場所でしか改行されない。*/
/*英数字 ・・・ スペース、-、?など*/
/*日本語 ・・・ 句読点、スペース、ー、？など*/
sample {
word-break: keep-all;
}このCSSを適用すると、画像は以下のように変化します。
日本語文（word-break: keep-all;）
英文（word-break: break-all;）
英文（word-break: keep-all;）
組み合わせることで思い通りの表示へ！
改行について、overflow-wrapとword-breakの２パターンの方法を紹介しましたが、単語の途中で切れてしまったり、句読点で区切れるけどはみ出してしまう部分があったりとなかなか思い通りの表示ができなかった方もいらっしゃるかもしれません。
そんな時は、２つを組み合わせて実装してみましょう！２つのいいとこ取りをして思い通りの表示に近づけていくことができます！
以下に、２つの記述を組み合わせた例を掲載します。
sample {
overflow-wrap: break-word; /*単語の途中でも改行*/
word-break: keep-all; /*句読点などの区切りで改行*/
}すると、表示は以下のようになります。
右画面スクロール
これが一番やりたかったです！フロントサイドを実装する際に色々なサイトを参考に見てきましたが、右側の画面だけスクロールするのがなんかかっこよくてやってみたかったです！（笑）
しかも、何となく難しい実装が必要な感じがしていましたがそんなこともありませんでした！
ちょっとしたCSSの記述だけで実装ができますのでぜひ皆さんも使ってみてください！
/*leftとrightの親要素*/
.all {
display: flex; /*子要素が横並びになるように*/
position: relative; /*position: sticky;の基点*/
}
/*左画面*/
.left {
position: -webkit-sticky; /*Safari用*/
position: sticky;
top: 0;
width: 50vw; /*左側の画面を半分に設定。（お好みの幅で大丈夫です。）*/
height: 100vh; /*画面の高さをフルに設定*/
}
/*右画面*/
.right {
width: 50vw;
}以上の記述で完成です！
実際の画面は以下のようになります。
まとめ
難しそうに思える実装も、取り組んでみたら「意外と簡単！」ということはたくさんあると思います！（本当に難しい場合も多いですが、、、笑）
ぜひ、今回ご紹介したCSSを活用して素敵なWEBサイトを作ってみてください！
コメント