Bracketsでブログをカスタマイズ

HTML5のお勉強 articleとsectionとか - Qiita

HTML5では構造化タグと呼ばれる新しい要素(タグ)が追加され、
「ヘッダは<header>で囲み、フッタは<footer>で囲む」など、構造が明確になったといえる。
間違った理解をしている可能性もありますが…。
<header>...</header>
<article>...</article>
<nav>...</nav>
<aside>...</aside>
<section>...</section>
といった構造化タグをサイトやブログに追加する作業を行いました。

<div>...</div>の開始タグと閉じタグがわからなくなってしまうと、HTML5の構造化タグを追加…どころか表示が崩れてしまいますが…。

Brackets FC2ブログ カスタマイズ

FC2ブログのHTMLをBracketsで編集。
ChromeのElementsのように折りたたむ事ができるので、開始タグと終了タグの位置関係がわかりやすい。

Brackets さくらのブログ カスタマイズ

さくらのブログのコンテンツHTML、記事のカスタマイズ。
ifの分岐がたくさんあっても、折り畳む事ができるからわかりやすい。
「Brackets」オープンソースで開発されているWebアプリ開発向けのコードエディター - 窓の杜ライブラリ

オープンソースで開発されているWebアプリ開発向けのコードエディター

フリーソフト
対応環境 : Windows Vista/7/8/8.1(64bit版を含む)
作者名 Adobe Systems Incorporated and its licensors
使いやすいエディタですね。HTMLエディタで検索しても見つからないと思ったら、プログラム向けエディタに分類されていました。
Dreamweaver8が動かなくなったらAtom?
でもAtomでサイトを作るのは…大変…と思っていましたが、Bracketsなら。
しかし、Dreamweaver CCを開発、販売しているAdobeがBracketsを作っているわけでAdobeにどんなメリットがあるのか…。

AtomVisual Studio Codeも無料…。

MediBang PaintLibreOfficeも無料…。よく維持できるなぁ…と思います。

P.S
構造化タグを追加したのにレイアウトは<div class="hoge">...</div>のまま…。
「レイアウト目的での構造化タグ使用はしない」と言う記述がQiitaにありましたが、HTML5では<div>の使用は最小限…だったような。
古いブラウザにも対応させたかったので構造化タグをレイアウトに使わないようにしましたが、HTML5本来の文法はどうなのか…ですね。
posted by さとぴあ at 2018/03/19 22:07 | Web制作

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。