CSS3によるタイポグラフィ

テキストの改行を扱う

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストの自動改行が、英単語の途中でも挿入されるようにプロパティを定めます。
講師:
04:45

字幕

このレッスンでは テキストの自動改行を 単語の途中でも強制的に入れる というプロパティについて説明します 「COMPETITION 」という文字は 当然1ワードですが この 幅から溢れる部分については 自動的に改行されます 単語の途中でも強制的に入れる プロパティの設定をこれからやりましょう 今 Dreamweaver で開いている html ドキュメントは デフォルトの設定のままです ですから 単語の途中で自動改行はしません COMPETITION というのは

要素 class が stack の中で 定められています そのスタイルがここです ですから ここにプロパティの 設定を加えます 今 現在の状態を確認しておきましょう 「ファイル」メニューから 「ブラウザでプレビュー」です COMPETITION の 文字が溢れていますが 単語の途中では自動改行しない というのがデフォルト設定です その設定を変更します では クラス stack のセレクターに プロパティを追加します プロパティは word-wrap です そして 値はデフォルトだと normal ですが これを break-word と言う 設定にします そして ; (セミコロン) 保存して確認してみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 強制的に改行が入りました ただ word-wrap のプロパティには 1点注意が必要です これから CSS のリファレンスを 確認してみましょう CSS リファレンスが 掲載されているサイトは いろいろありますが お勧めするのは MDN という所の CSS リファレンスです これで もう出てきました CSS リファレンス MDN MDN というのは Mozilla Developer Network の 頭文字を取っています ですから FireFox の開発元です 非常に詳細なリファレンスですので まず ここにあたってみることを お勧めします では word-wrap を探してみましょう 検索で「1件一致」と出ていますので その1件目の所に飛びます これです さて word-wrap の説明が載っています 構文とか デフォルト値が normal です どんな値を取るかというと normal と break-word そして こんな感じで書くという 説明が載っています 実際に設定した場合 ここで強制改行が入っています ここで注意したいのは 一番上に書いてある注意書きです 「注記」とあります word-wrap は CSS3 Text 仕様書の現在の草案で overflow-wrap に 名前が変わったのです 今のところ word-wrap は overflow-wrap の別名として 生きています でも 今後のことを考えると overflow-wrap の設定も しておいた方が良いでしょう これを「コピー」します そして Dreamweaver に戻りましょう 先ほど設定した word-wrap プロパティの下に 今 コピーした overflow-wrap を 「ペースト」します 値は同じで結構ですので break-word これをコピーして 下に持っていきます そして保存します 結果は変わらないですが 念のため 「ブラウザでプレビュー」しましょう 特に先ほどと変わりません 1単語の途中に 強制的に改行が入っています このレッスンでは 自動改行を設定する プロパティのご紹介をしました word-wrap というプロパティで 値は2つありました normal は単語の途中で改行しない デフォルトの設定です 今回使ったのは break-word という 行からはみ出た部分の単語を 途中でも改行してしまうというものでした 新しい仕様では overflow-wrap があります こちらも設定しておいた方が良いでしょう

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

4時間01分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年08月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。