KENスクールブログ-パソコンスクール パソコン教室 KENスクール

Dreamweaver

HTMLを始めよう! その4

前回は、HTML5の「section要素」についてお話しました。
今回は、「article要素」についてお話しましょう。

article要素はsection要素より、さらに使い方が明確です。

article要素の使い方
サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立っている必要があり、article要素の内容だけ抜き出して違和感がないもの。

まずは、見出しと段落のみで構造を記述してみましょう。

srticle1

 

続いては、HTML5のルールでより明確なマークアップをしましょう。

srticle2

見出しと段落をsection要素で囲みました。
section要素で囲むことで、見出し1に対しての段落までの内容が、文章の「節」の意味となります。

ここに「article要素」を加えます。

srticle3

見出し1と3つのセクションをarticle要素で囲むことで、1つの内容となり、独立した自己完結コンテンツと定義されます。

section要素とarticle要素の違いは難しいですが、記事が自己完結しているかどうかを判断しましょう。

次回は、article要素とarticle要素の組合せ方をご説明します。


カテゴリー: Dreamweaver Web プログラム

Dreamweaver CC2014のライブビューを活用する

今回はDreamweaver CC2014でライブビューを活用する一例をご紹介したいと思います。

Dreamweaver CC2014では、ライブビューで直接編集ができるようになりました。

Dreamweaverのライブビューでは、webkitと同じプレビューが可能ですので、デザインビューより正確なコーディングが行えます。

 

下の図のように、[挿入パネル]→[ヘッダー]のボタンをライブビューにドラッグします。

pic-20160524_01

こうするだけで、ライブビューへ直接、headerタグの挿入ができます。

 

挿入後、下記の図のようにid名もしくはclass名をつけるためのボタンが出てきます。

pic-20160524_02

「+」のボタンを押し、「#test」と入力します。

pic-20160524_03

すると、図のようにheaderにid名がtestとついた状態でコードを記述してくれます。(Class名であれば「.」をクラス名の前につけます。)

pic-20160524_04

 

このように、DreamweaverCC2014では、ライブビューによる正確なコーディングが行えますので、是非試してみてくださいね。

 

この記事に関連する講座

Webサイト作成の定番ソフトDreamweaverを使いこなす!

詳しくはこちら


カテゴリー: Dreamweaver Web デザイン

Dreamweaverでコードをきれいに書き直す方法

student-849825_640

みなさんこんにちは。
今回はDreamweaverでコードをきれいに書き直す方法をご紹介いたします。
まずは、下の図を見てください。

図1

このように、コードを書いていると必要のないところに改行やインデントを入れてしまうことってありませんか?
そのような時にDreamweaverで役立つ機能が「ソースフォーマットの適用」です。
この機能は、乱雑なコードも見やすいようにきれいに書き直してくれます。
では、実際にこの機能を使ってみましょう。
下の図の、赤い矢印が指し示しているボタンをクリックし、
「ソースフォーマットの適用」をクリックします。

図2

適用した結果は以下になります。

図3

無駄な改行やインデントが消え、きれいにコードが並んでいるのが分かります。
このような機能を使えば、見やすいコードを誰でも簡単に書くことができます。
コードを書く上で、とても便利な機能なので、是非使ってみてくださいね。


カテゴリー: Dreamweaver Web デザイン