06 ホームページ中級講座便利なEmmet!

2020年4月11日2024年1月26日

URLをコピーしました！

16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。

テキストにマークアップを行なっていきます

下記のテキストをコピーして、HTMLファイルとして保存しておきましょう。

ネットワークサービス　株式会社
NewWorkService
Home
Service
Access
Contact
Blog
社長の挨拶
枠組みも対象文を列挙し記事ますんため、引用するられるフリーを検証毎厳格の活用内容をするれても満たすあっ、記事の原則は、利用作るメディアと陳述しこととして著作自由ないでてなりますあれ。しかし、疑義の出版作も、ペディアの決議即し前記有効ある原則を一見し、そのルールであたりてtheで依頼掲げることが決議よれれます。ただしで、引用下が利用されるている文章をそのままさ満たすことは、決議でなけれ、場合に対しては該当日の既存としてライセンス上の問題は含むことに、本投稿会は、可能の引用をするて要件に制裁さたておくますます。
また、誰と問題がしものが「削除権」の禁止ない。
方針の方針が公開するれる以下を重要ます目的ですばとするから、企業を著作するます状態を文章ないを既存するて、さらにありななか。著作権が削除あるれん言語だあるば問題はたかもしなます。ただし、既存権と該当さればください文章を主題なで修正行わば、「文献が、これでも著作が明瞭」ますFree文字をしに対する条件の形式を引用示しでます。
Copyright © 2019 NET WORK SERVICE .All rights reserved.

マークアップしながらEmmetの練習

Emmetはこれまでも使ってきましたが、コードを入力する際に簡単な記述方法を使ってコード入力のスピードアップができるプラグインです。今回はbracketを使ってコードを入力していますが、プログラム入力では人気のMicrosoft Visual Studio CodeでもEmmetは使えます。

動画で学ぶWebデザイン教室　 Fuku…

Visual Studio Codeのインストールとセットアップ | 動画で学ぶWebデザイン教室　 Fukuokamiyako Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できま…

HTMLのマークアップを入力する

テキスト文章を使って、HTMLで下記のマークアップを練習しましょう。emmetを使う場合は、チートシートも参照されてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ネットワークサービス　株式会社</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <header>
            <h1>NewWorkService</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Access</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
        </header>
        <article class="clear_fix">
            <section>
                <h1>社長の挨拶</h1>
                <p>
                    <img src="images/laptop.png" alt="パソコン" class="f_left"> 枠組みも対象文を列挙し記事ますんため、引用するられるフリーを検証毎厳格の活用内容をするれても満たすあっ、記事の原則は、利用作るメディアと陳述しこととして著作自由ないでてなりますあれ。しかし、疑義の出版作も、ペディアの決議即し前記有効ある原則を一見し、そのルールであたりてtheで依頼掲げることが決議よれれます。ただしで、引用下が利用されるている文章をそのままさ満たすことは、決議でなけれ、場合に対しては該当日の既存としてライセンス上の問題は含むことに、本投稿会は、可能の引用をするて要件に制裁さたておくますます。
                </p>
                <p>また、誰と問題がしものが「削除権」の禁止ない。</p>
                <p><img src="images/line_chart.png" alt="グラフ" class="f_right">方針の方針が公開するれる以下を重要ます目的ですばとするから、企業を著作するます状態を文章ないを既存するて、さらにありななか。著作権が削除あるれん言語だあるば問題はたかもしなます。ただし、既存権と該当さればください文章を主題なで修正行わば、「文献が、これでも著作が明瞭」ますFree文字をしに対する条件の形式を引用示しでます。</p>
            </section>
        </article>
        <footer>
            <p><small>Copyright © 2019 NET WORK SERVICE .All rights reserved.</small></p>
        </footer>
    </div>
</body>
</html>

画像ファイルは別途準備ください。