Codingで複数の要素をグループ化するWebページを構成するHTMLタグは、それぞれに意味を持っています。見出し(h1)、本文(p)など、文書を構成する基本要素は、ブラウザー上でその前後が改行され、ひとかたまりとして表示されるので、「ブロックレベル要素」と呼ばれています。ここで紹介する「<div>」は、h1やpのような情報上の意味をもたない、汎用的なブロックレベル要素です。現在のWebページの作り方は、HTML上では色や文字サイズなど見た目については指定せず、CSS(カスケーディング・スタイルシート)で装飾やレイアウトについて指定するようになっています。あとから装飾を指定するためには、HTML文書中のあちこちにに散らばっている個々のブロックレベル要素を、ひとまとめにしておいた方が都合がよいのです。そこでこのdivタグを使って、複数の要素をひとつのブロックとしてグループ化しておきます。Codingでは、このようなdivタグを使ったグループ化も、かんたんにできるようになっています。<div><p>本文段落1</p><ul><li>箇条書きリスト1</li><li>箇条書きリスト2</li></ul><p>本文段落1</p></div>div要素によって「段落」「リスト」「段落」がひとつのブロックとして扱われる。範囲の選択divタグでグループ化したいHTML要素を選択する。選択範囲のラップを選択+キー(秀丸エディタの場合++キー)を押して、選択範囲のラップを選択する。abbreviation]ダイアログボックスで省略形「div」を入力し、[OK]をクリックする。省略形の展開ショートカットキーで省略形を展開する。コードが展開された「div」が「<div></div>」と展開され、divタグでHTML要素がラップされる。Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。Codingを使えば、かんたんな「省略形」だけでHTML/CSSタグがどんどん入力でき、複雑なHTML/CSSも、あっという間にコーディング可能です!同じタグの繰り返しや入れ子構造、連番も一発で自動変換。Webページ制作が画期的にスピードアップできます。Codingのはじめての解説書です。購読規約に同意するWeb担メルマガを受け取る!※いつでも購読をキャンセルできます※このフォームの送信はSSLで保護されていますWeb担メルマガについてもっと知りたいプライバシーポリシーを見るコメントを追加この記事の筆者こもりまさあき(cipher)フリーランス1972年生まれ。黎明期からWebサイト構築などに関わる。現在はWeb関連業務に加えてテクニカルライティング、講師など、業種を限定せずに活動しながら、Twitter(@cipher)でたまに毒を吐く日々。コーディングベストプラクティス』(MdN・共著)など。http://eee.am/cipher岡部和昌(おかべ・かずまさ)Webデザイナー1983年生まれ、埼玉県の田舎出身。大学で応用化学を学んだ後、ヤフー株式会社初のデザイナー新卒採用にて入社。同社サイトの大規模リニューアルのマークアップを数多くメインで担当した経験を持つ。ScriptやPHPを用いた動的なサイト構築が得意分野。JAPANが実践するWebの高速化」(共著)。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!「おもてなし」は思考停止ワード。いいね!私は変人コレクター。位置情報データ活用デジタルによる「仕事の自動化」、日本は無関心な人が主流。Webプロデューサー】マーケティング戦略プランニングからコンサルティング、そしてクリエイティブ制作まで手掛けるデジタルマーケティングエージェンシーでの募集です。Drive」提供アマゾン日本事業の売上高は約1.7兆円【Amazonの2019年実績まとめ】デジタルによる「仕事の自動化」、日本は無関心な人が主流。「おもてなし」は思考停止ワード。各週の人気記事ランキング記事を見るはてなブックマークですべての人気記事を見る今日の用語インタースティシャル広告ページ移動時にページとページの間に独立ページとして表示する広告のこと。日本発のブランドはまだ自動車が強い。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。