コース: Vue.js 入門

今すぐコースを受講しましょう

今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。

HTMLドキュメントに要素とスタイルを定める

HTMLドキュメントに要素とスタイルを定める

コース: Vue.js 入門

1ヶ月の無料トライアルを開始 法人向けサービス

HTMLドキュメントに要素とスタイルを定める

“

このレッスンでは要素とスタイルを使って エディタの画面レイアウトを作ります。 今開いている HTML ドキュメントなんですが Vue のライブラリは読み込んでいます。 CDN からですね。 でも body には何も入っていませんから ほぼまっさらな状態といえます。 一応確認しましょうか。 ［ファイル］＞ ［リアルタイムプレビュー］です。 真っ白ということですね。 では body に要素を 加えていきましょう。 body でまず全体を div 要素で囲みます。 id をつけます。 editor としまして 閉じましょう。 それから２つ要素を加えます。 １つは textarea です。 文字を１つ加えておきましょう。 Hello ということで あと１つは div 要素で、 これは今のところ空です。 また保存して確認します。 ［ファイル］＞［保存］して ［リアルタイムプレビュー］ テキストエリアがありまして 文字が Hello と入ってます。 div の方は見えませんので 何もでてこないということですね。 スタイルは Vue の公式サイトから 借りることにしましょう。 日本語の jp.vuejs.org ですね。 そこで［例］というのがありまして その一番先頭がエディタなんですね。 このようなレイアウト、これを使いたいと 思いますので CSS を見ます。 全部このまま 借りてしまいましょう。 先頭から最後まで コピーします。 Dreamweaver に戻りまして head の中に style 要素を加えます。 そしてここにペーストしましょう。 ちょっと選択が変ですか。 ペーストします。 これでいいでしょうか。 一旦［保存］して ［リアルタイムプレビュー］で 確認します。 先ほどのサンプル、 例と同じような感じになりましたね。 左右２つに分かれて 文字は Hello ですけど フォントも少し変わっています。 これで画面は一応出来上がりです。 このレッスンでは要素とスタイルで エディタの画面のレイアウトを作りました。 body 要素の方は全体を div で囲んで その中に textarea、文字が Hello と入っていて 空の div 要素です。 スタイルシートの方は Vue の例というところから CSS をそのまま コピー＆ペーストしました。…

目次