Właściwości CSS związane z odstępami tekstu

Articles

Ten artykuł wyjaśnia właściwości CSS związane z odstępami tekstu.

Możesz dowiedzieć się o zastosowaniu i sposobie pisania właściwości takich jak line-height i word-spacing.

YouTube Video

Tworzenie HTML do podglądu

css-text-space.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Typografia (Związana z marginesami tekstu)

Właściwość `line-height`

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height to właściwość CSS używana do ustawiania odstępów między liniami (wysokości wiersza). line-height określa pionowy odstęp między liniami, używany do poprawy czytelności lub dostosowania odstępów jako część projektu.

Główne zastosowania `line-height`

Liczby bez jednostek

1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}

Określ wysokość w odniesieniu do rozmiaru czcionki. Na przykład określenie 1.5 ustawia wysokość wiersza na 1,5-krotność rozmiaru czcionki. Ta metoda jest przydatna w projektowaniu responsywnym.

Procenty

1p {
2    line-height: 150%;
3}

Określ wysokość wiersza jako procent rozmiaru czcionki. Na przykład określenie 150% ustawia wysokość wiersza na 150% rozmiaru czcionki.

Wartości stałe (px, em, rem, itp.)

1p {
2    line-height: 20px;
3}

Określ wysokość wiersza w jednostkach bezwzględnych. Na przykład możesz określić konkretną wartość, taką jak 20px, ale może brakować elastyczności w projektowaniu responsywnym.

`normal`

1p {
2    line-height: normal;
3}

Określenie normal stosuje domyślne ustawienia odstępów między liniami przeglądarki. Zazwyczaj będzie to około 1,2 do 1,4 razy rozmiar czcionki.

Przykłady użycia `line-height`

Czytelne akapity

line-height w granicach od 1.5 do 1.6 jest zwykle zalecany dla lepszej czytelności. Jeżeli odstępy między liniami są zbyt małe, tekst będzie ciasny i trudny do odczytania, a jeśli są zbyt duże, tekst będzie sprawiał wrażenie niespójnego.

Projektowanie nagłówków

W przypadku nagłówków i tytułów, gdzie tekst jest większy, można zmniejszyć odstępy między liniami. Często stosowane są ustawienia takie jak 1.1 lub 1.2.

Podsumowanie

line-height jest istotną właściwością poprawiającą zarówno czytelność, jak i wygląd tekstu.
Używanie wartości względnych (liczb lub procentów) ułatwia dostosowanie do responsywnych projektów.
Dla nagłówków z dużym tekstem i akapitów z mniejszym tekstem kluczowe jest ustawienie odpowiednich odstępów między liniami dla każdego.

Wykorzystanie tej właściwości może sprawić, że tekst będzie bardziej czytelny i poprawi jego jakość wizualną.

Właściwość `letter-spacing`

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing to właściwość CSS umożliwiająca regulację odstępów między znakami (szerokość liter). Ta właściwość może być używana do poprawy projektu tekstu, zwiększenia czytelności oraz osiągnięcia określonych stylów.

W tym przykładzie jest określona w następujący sposób.

normal: Domyślna szerokość liter. Jest to standardowa wartość określona przez przeglądarkę i czcionkę.
4px: Przykład poszerzonych odstępów między literami. Dodaje 4 piksele odstępu między każdą literą.
-1px: Przykład zawężonych odstępów między literami. Zmniejsza odstęp między każdą literą o 1 piksel.

Jak używać `letter-spacing`

Wartości z jednostkami

1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}

Ustawienie wartości dodatniej zwiększy odstępy między literami.
Ustawienie wartości ujemnej zmniejszy odstępy między literami.
Jednostki są zazwyczaj określane w px (pikselach) lub em.

Domyślnie: `normal`

1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}

Użyj domyślnego odstępu między literami. Zwykle stosowany jest standardowy odstęp między literami zdefiniowany przez czcionkę.

Przykłady użycia `letter-spacing`

Poprawiona czytelność: W przypadku małych rozmiarów czcionek lub zbyt ściśniętych czcionek można poprawić czytelność, zwiększając wartość letter-spacing.
Dopasowanie projektu: Możesz dostosować odstęp między literami, aby wizualnie zaakcentować elementy projektu, takie jak tytuły lub logotypy.
Dostosowanie między słowami: Możesz dostosować odstępy na poziomie liter zamiast między słowami. letter-spacing reguluje odstępy między literami, ale używaj word-spacing, aby zwiększyć odstępy między słowami.
Równowaga projektu: Jeśli zbytnio zwiększysz odstęp między literami, cały tekst może wyglądać zbyt rozciągnięty. Z kolei, jeśli zbytnio go zmniejszysz, tekst może stać się ściśnięty i trudny do odczytania, dlatego ważne jest zachowanie odpowiedniej równowagi.

Podsumowanie

letter-spacing to właściwość, która dostosowuje odstęp między literami, wpływając zarówno na projekt, jak i czytelność.
Możesz zwiększyć odstępy dodatnimi wartościami i zmniejszyć je wartościami ujemnymi.
Jest skuteczne w przypadku tytułów i określonych elementów projektu, ale uważaj, aby nie pogorszyć czytelności.

Korzystając z tej właściwości, możesz dostosować wygląd tekstu i uzyskać atrakcyjne projekty.

Właściwość `word-spacing`

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing to właściwość CSS, która kontroluje odstęp między słowami w tekście. Odpowiednie użycie tej właściwości może poprawić równowagę wizualną i czytelność tekstu. word-spacing jest szczególnie przydatny w projektach skoncentrowanych na typografii oraz w scenariuszach projektowania responsywnego.

W tym przykładzie jest określona w następujący sposób.

normal: Stosuje domyślny odstęp między słowami. Jest to wartość początkowa przeglądarki.
4px: Przykład zwiększonego odstępu między słowami. Dodaje 4 piksele odstępu między każdym słowem.
-1px: Przykład zmniejszonego odstępu między słowami. Zmniejsza odstęp między każdym słowem o 1 piksel.
odstępy-między-wyrazami-i-literami: Przykład zmniejszonych odstępów między wyrazami i literami. Zmniejsza odstęp między wyrazami o 0.1em i między literami o 0.05em w porównaniu z normalnym ustawieniem.

Korzystanie z wartości dodatnich i ujemnych

Ustawienie dodatniej wartości dla word-spacing zwiększy odstęp między wyrazami. Z kolei używanie wartości ujemnych zmniejsza odstępy między wyrazami. Wartości ujemne mogą być stosowane w celu podkreślenia efektów wizualnych lub zmniejszenia odstępów między literami z powodów projektowych.

Różnica między `word-spacing` a `letter-spacing`

word-spacing to właściwość dostosowująca odstęp między wyrazami, natomiast letter-spacing reguluje odstępy między literami. Łącząc te właściwości, można uzyskać bardziej precyzyjną kontrolę nad typografią całego tekstu.

Ostrzeżenia i najlepsze praktyki

Nadmierna regulacja odstępów: Zbyt częste używanie word-spacing może prowadzić do spadku czytelności. Zwłaszcza zbyt duże lub zbyt małe odstępy mogą być uciążliwe dla użytkowników, dlatego ważne są umiarkowane dostosowania.
Projekt responsywny: Określanie wartości względnych za pomocą em lub rem jest skuteczne w projektowaniu responsywnym, ponieważ zapewnia prawidłowe wyświetlanie na różnych rozmiarach ekranów.
Regulacja stylu nagłówka: Poszerzając odstęp między wyrazami w tekście nagłówka, można dodać wizualny akcent. Pozwala to wyjaśnić hierarchię treści i osiągnąć elegancki projekt.

Właściwość `word-break`

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break jest właściwością CSS kontrolującą, jak tekst jest zawijany, gdy przekracza szerokość kontenera. Zazwyczaj przeglądarki łamią linie na granicach słów, ale konkretne ustawienia mogą poprawić wygląd i czytelność w przypadku długich słów lub adresów URL.

Dla właściwości word-break można określić następujące wartości.

normal

normal to domyślna wartość. Gdy słowo przekracza szerokość kontenera, zostanie ono złamane na granicy słów. To ustawienie jest powszechne w językach takich jak angielski, i złamania nie występują w środku słów.
break-all

break-all to ustawienie, w którym złamania linii mogą być wstawiane po dowolnym znaku, w razie potrzeby. Szczególnie w przypadku długich słów lub adresów URL, złamania linii występują na poziomie znaków, aby zapobiec zakłóceniom układu.
keep-all

keep-all to ustawienie szczególnie stosowane do języków azjatyckich (japoński, chiński, koreański, itp.). W tym ustawieniu całe słowo jest zachowane i nie występują złamania w środku słów. Jednak w językach oddzielanych spacją, takich jak angielski, stosowane są normalne złamania na granicach słów.

Ten przykład pokazuje trzy różne ustawienia word-break. Z word-break-normal, całe słowo jest zachowane i złamanie następuje na granicy słów, jeśli przekracza szerokość kontenera. Z word-break-break-all, złamania występują nawet w środku słów. word-break-keep-all pozwala na naturalne złamania dla języków azjatyckich, takich jak japoński, oraz złamania na granicach słów dla języka angielskiego.

Scenariusze zastosowania `word-break`

Urządzenia mobilne i projektowanie responsywne

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

Na urządzeniach mobilnych szerokość ekranu jest ograniczona, co może powodować przekroczenie szerokości ekranu przez tekst, w tym adresy URL lub długie słowa. W takich przypadkach stosowanie word-break: break-all; pozwala na złamanie linii na poziomie znaków, aby dopasować szerokość ekranu, poprawiając czytelność.

Właściwość `hyphens`

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

Właściwość hyphens jest używana w CSS do określenia, jak ma być obsługiwane dzielenie słów (dzielenie słów za pomocą łącznika) podczas łamania linii tekstu. Odpowiednie ustawienie tej właściwości może poprawić czytelność i wygląd tekstu. Dzielenie wyrazów jest szczególnie przydatne, gdy długie słowa muszą być podzielone na części.
Ponieważ zasady dzielenia słów różnią się w zależności od języka, właściwość ta zależy od ustawień regionalnych tekstu.

Składnia

1element {
2    hyphens: none | manual | auto;
3}

Właściwość hyphens może być ustawiona na następujące wartości:.

none: Nie stosuje się automatycznego dzielenia słów. Słowa zazwyczaj dzielą się tylko na końcach wyrazów.
manual: Dzielenie słów jest stosowane ręcznie. W tym przypadku punkty podziału słów muszą być ręcznie określone w kodzie HTML. Na przykład możesz użyć  (miękki łącznik).
auto: Przeglądarka automatycznie stosuje dzielenie słów w odpowiednich miejscach. W takim przypadku język dokumentu (atrybut lang) musi być poprawnie określony.

Notatki

Znaczenie ustawień językowych: Przy użyciu hyphens: auto; poprawne dzielenie słów wymaga odpowiednio ustawionego atrybutu lang w dokumencie HTML.
Zależność od czcionki: Niektóre czcionki mogą być nieodpowiednie do dzielenia słów.
Użycie słowników podziału słów: Zasady dzielenia słów zależą od słowników używanych przez przeglądarkę. Dlatego może nie działać zgodnie z oczekiwaniami dla niektórych języków.

Podsumowanie

Odpowiednie wykorzystanie właściwości hyphens może znacząco poprawić układ tekstu. W szczególności dla wielojęzycznych stron internetowych i projektów przyjaznych dla urządzeń mobilnych, odpowiednie korzystanie z wartości auto i manual może poprawić doświadczenia użytkownika.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z tekstem Właściwości CSS do wyświetlania kodu i cytatów

Właściwości CSS związane z odstępami tekstu

YouTube Video

Tworzenie HTML do podglądu

Typografia (Związana z marginesami tekstu)

Właściwość line-height

Główne zastosowania line-height

Liczby bez jednostek

Procenty

Wartości stałe (px, em, rem, itp.)

normal

Przykłady użycia line-height

Czytelne akapity

Projektowanie nagłówków

Podsumowanie

Właściwość letter-spacing

Jak używać letter-spacing

Wartości z jednostkami

Domyślnie: normal

Przykłady użycia letter-spacing

Podsumowanie

Właściwość word-spacing

Korzystanie z wartości dodatnich i ujemnych

Różnica między word-spacing a letter-spacing

Ostrzeżenia i najlepsze praktyki

Właściwość word-break

Scenariusze zastosowania word-break

Urządzenia mobilne i projektowanie responsywne

Właściwość hyphens

Składnia

Notatki

Podsumowanie

YouTube Video

Właściwość `line-height`

Główne zastosowania `line-height`

`normal`

Przykłady użycia `line-height`

Właściwość `letter-spacing`

Jak używać `letter-spacing`

Domyślnie: `normal`

Przykłady użycia `letter-spacing`

Właściwość `word-spacing`

Różnica między `word-spacing` a `letter-spacing`

Właściwość `word-break`

Scenariusze zastosowania `word-break`

Właściwość `hyphens`