Emmetでコード入力を速めよう

テキストを含む要素の展開

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素にテキストを加える方法についてご説明します。
講師:
03:00

字幕

このレッスンでは要素にテキストを 加える方法について説明します。 今開いている HTML ドキュメントですけども カラムの設定がしてあります。 「タイトル」とありますが ここをちょっと打ち直しましょう。 h2 要素で「見出し」というタイトルを 入れたいと思います。 その場合には { } で囲ってあげて 入れたい文字をタイプします。 「見出し」と。 そうしておいて行の最後で Tab キーと いうことで「見出し」と入ります。 では このカラムの下の方なんですけども 「テキスト」という文字がありますが テキストではちょっと短過ぎるので もうちょっと何か長い文字を 入れたいという場合があります。 いわばダミーテキストですね。 そういう時には Lorem ipsum と呼ばれる テキストを使う事があります。 Wikipedia で Lorem ipsum の 説明ページを開きました。 ラテン語が元になっているらしいんですが 意味はないと、そういう文章です。 頭が Lorem ipsum で始まるので この名前がついています。 意味があるとその意味の方に デザインが引っ張られてしまうので 意味のないテキストということで使われます。 HTML ドキュメントの p 要素ごと 書き換えましょうか。 p で そして子供の要素にして lorem とタイプし Tab キーを打ちます。 そうすると先程の Lorem ipsum の 意味の分からない文章が入ります。 複数入れることも勿論出来ます。 その場合に ではこちらで入れ直しましょう。 p で 3つ、掛ける3ということで lorem という風にして Tab を打ちます。 一回保存してブラウザで見てみましょう。 「ブラウザでプレビュー」です。 下の方にスクロールします。 そうすると3つの段落が入っていますけれども 見ていただくと3つの段落の文章が 意味が分かりませんけれども みんな違っていますね。 ここもちょっと気が利いています。 英語でなく日本語のダミーテキストが 欲しいという場合には そういうサービスをやっている サイトがありますので そこを利用されるといいでしょう。 ダミーテキストということで検索をかけると このようにいくつかのサイトが リストアップされるので その中から使いやすいものを お選び下さい。 このレッスンでは要素にテキストを 加える方法について説明しました。 テキストが決まっている場合には { } で囲って そのテキストを打てばいいですし 英語の場合 Lorem ipsum を 使いたいという場合には lorem と打って Tab キーを押すと いう事でした。

Emmetでコード入力を速めよう

EmmetはHTMLやCSSのコーディングを強力に支援するプラグインです。Dreamweaverをはじめ、さまざまエディタにも対応しています。このコースではHTMLとCSSの基礎を学んだ方向けに、Emmetを使うさいの基本的な入力方法について解説します。このコースでEmmetを学習して、コーディングの効率を大幅にアップしましょう!

1時間02分 (19 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年04月25日

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

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

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