古い日記の過去ログにハンバーガーメニューをつけました

フレームセットを使った古い日記のHTMLを書き直しました: STP^3
この作業で、フレームを撤去しましたが…。
スマートフォンでアクセスすると記事本体の上にメニューが並んでしまって…。

やはりタップするとメニュー一覧が出てくる三本線のハンバーガーメニューが必要…という事で…。

らくがき絵日記 レスポンシブデザイン

PC。

らくがき絵日記 レスポンシブデザインらくがき絵日記 レスポンシブデザイン

スマートフォンの時は、ハンバーガーメニューのタップでメニューが開閉。
HTMLとCSSだけ!要素の表示・非表示を切り替える方法

CSSだけでできるんですね。
inputのタップする場所をlabelで決めて、チェックボックスは非表示。
チェックが入ったら表示してはずれたら表示しない。

【らくがき絵日記】の過去ログはこちら。
posted by さとぴあ at 2019/03/01 15:54 | Web制作

フレームセットを使った古い日記のHTMLを書き直しました

フレームセットを使った古い日記のHTMLを書き直しました

<frameset>で左にメニュー、右にコンテンツ…。
画像は横幅360pxで表示するスマートフォンをエミュレートしたものです。
googleのモバイルユーザビリティテストでモバイルフレンドリーではないと出てしまいます。
仕方がないので、モバイル端末の時は左側のメニューページにリダイレクトがかかるようにしていましたが…。
Google ウェブマスター向け公式ブログ: モバイル ファースト インデックスを開始します

モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。
コンテンツではなく、メニューだけインデックスされるようになりました。

フレームセットを使った古い日記のHTMLを書き直しました

だったら、<iframe src=""></iframe>、つまりインラインフレームを使ってPCで表示する時は左右分割フレームのようにして、スマートフォンの時はメニューが上に移動するようにすれば…。
HTML5で<frameset>タグが廃止されたのはおそらく、代わりに<iframe src=""></iframe>を使えという事なんだろうな…と思いました。

ところが、CPU使用率が100%になり、「このページは応答していません」になってしまいます。
インラインフレームで長い縦スクロールは…想定されている操作ではないのかもしれません。

PCでも負荷が高くなってブラウザが固まる…となると、モバイル端末ではさらに…。

書き直す事にしました。

フレームセットを使った古い日記のHTMLを書き直しました

左のメニューの位置を固定したので、スクロールするのは右側のコンテンツだけ。
まるで左右分割フレームのようになりました。

しかし、この書き方では…。
すべてのページに左側のメニューが必要です。
フレームを使っていたのは、それが面倒だったからなのですが…。

秀丸エディタのgrepして置換を使ってどうにかしました。

フレームセットを使った古い日記のHTMLを書き直しました

スマートフォンの時は、メニュー上、コンテンツが下、どちらもスクロールするように。

フレームセットを使った古い日記のHTMLを書き直しましたフレームセットを使った古い日記のHTMLを書き直しました
/*疑似フレーム*/

.menu {
width: 218px;
margin: 18px 0 0 16px;
position: fixed;
top: 0;
}
.content {
width: calc(100% - 258px);
position: absolute;
left: 250px;
margin: 8px 0 0 0;
}
左メニューの幅は8+18+218=242です。最初の8pxはbodyのデフォルトのマージンです。
右側のコンテンツは、左から250pxの位置から…。
250-242=8px分の余白を確保するためです。
右側のコンテンツの幅は 100%-258px 。100%-250pxにすると、右側の余白が0になるので、8px分幅を狭くしました。

フレームセットを使った古い日記のHTMLを書き直しました

ChromeでiPadをエミュレート。コンテンツの左右に8px分の余白。

フレームセットを使った古い日記のHTMLを書き直しました

文字フォントがMS P ゴシックだったので、メイリオに変更して見た目を近代化…。

レガシーなタグがまだたくさん残っていますが、どうにか…。

らくがき絵日記

今回作業したページはこちら。
posted by さとぴあ at 2019/02/10 22:07 | Web制作

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制作

CSSの文法をチェックしてくれるbrackets-csslintを使ってみました

GitHub - iwehrman/brackets-csslint: CSSLint extension for Brackets
Brackets brackets-csslint

セレクタにIDを使わないでください。
セレクタにID3つマジですか?
0に単位を入れないでください。
marginの指定はまとめる事ができますよ?
見出しのタグを装飾しないでください。

英文のエラーメッセージをコピーする事ができれば、Googleで翻訳できるんだけどなぁ…と思いながら目視で確認しながら英文をタイプして翻訳…みたいな事をやりました。
C:\Users\hoge\AppData\Roaming\Brackets\extensions\user\brackets-csslint\thirdparty\csslint.js

拡張機能の中身はjavaScriptなので、コードのエラーメッセージ部分をコピーして翻訳の一覧をあらかじめ作っておくとか?

該当エラー行の確認作業をしていたら…
<h2 class="title"><a href="hoge">hoge</a></h2>
の装飾がh2とtitleで二重指定されている事がわかり修正…。このブログのCSSなんですけどね。

Atomのlinter-csslintは、なぜか動作しない…。

Brackets コードの折りたたみ

コードの折りたたみ。

秀丸も、Atomもコードの折りたたみに対応していますが…。
Bracketsは要素単位で折り畳めるので、例えば
<head>...</head>
は折りたたんで作業したい時といった時に便利ですね。
本文の修正作業だけに集中したいのに、途中にjavaScript。うっかりいじってjavaScriptのコードを壊したくない…という時も折りたたんでしまえばいいので助かります。
Brackets 1.0:テーマカラー89種類まとめ - Qiita

約1年前の記事なのでそんなに変わってないだろう…と思いながら、テーマをインストール。
目が痛くならないコントラスト+可読性…。

なかなかいいものがみつかりません。

Atom1.24のダークカラーと同じにできたらいいのになぁ…と思ったら。
GitHub - moritzw1/one-dark-theme-for-brackets: Inspired by One Dark Theme for Atom Editor.
Atom1.24とほぼ同じ背景色と文字の色。
とても見やすい…。
AtomとBracketsを行き来する時にも困らない。
1年前の情報はすでに古い…という。

Brackets テーマ New One Dark

テーマ、New One Dark。

Atomにあって、Bracketsに無いもの…。
linter-htmlhint
でも、Atomでエラーを確認したら、修正作業はBrackets…みたいな感じに。
<p>...</p>のように<p>のタグを閉じるべきなのですが、古いHTMLエディタのソースが残っていて閉じられていない状態で20年とか…。Atomのlinter-htmlhintはこのタグのとじ忘れを指摘してくれるのでわかりやすいんですよね。

でも、タグが閉じられているかどうかを確認する作業はタグがハイライトされるBracketsのほうが…。
AtomでもBracketsのようにタグをハイライトさせる事ができるのかもしれませんが…。
タグ:HTML CSS Atom Brackets
posted by さとぴあ at 2018/03/12 20:06 | Web制作

Bracketsを使ってみた

HTMLやCSSを書き慣れていない人にオススメ、無料のテキストエディタ「Brackets」 | 簡デザ −かんたんデザインブログ−

すごいのは、HTMLやCSSを書いたすぐそばから反映してくれること。保存とか、再読み込みとかしなくてもすぐに反映されるので、見ながらコード書いたりもできます。
史上最強のエディタBracketsに出会ってしまった | Planner(プランナー) クリエイティブの壺ツボ

初期搭載されている機能がすごい
コーディングを超加速するBrackets便利エクステンションまとめ - WEBCRE8.jp

便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているclassとIDが、属性値の記述時にコードヒントとして出てきます。
Atomを最近知ったばかり…。
そんな人が書いている記事なので、詳しい情報は上記リンク先をみたほうがいいと思います。
ただ、バージョンによって挙動が異なるようで…。

Chromeが再起動される欠点がある、デベロッパーツールが使えない→Brackets1.12+Chrome64では問題ないようです。
Bracketsのライブプレビューを使うと、別のユーザープロファイルを持つChromeが多重起動。デベロッパーツールを使う事もできる…と思います。
こちらで把握しきれていない何かがあるのかもしれませんが…。
Shizimily Multi-Encoding for Brackets
Brackets1.12はUTF-8、Shift_JISを自動で判別します。
Brackets1.12にShizimily Multi-Encoding for Bracketsをインストールすると、動作しなくなるため注意が必要です。

これまでDreamweaver8で行ってきた趣味のWebサイトの維持管理ができれば問題ないので、すでに作成しているコンテンツで試してみました。

Brackets
Brackets

画像の挿入。

画像ファイルを一覧から選ぶだけ。
タグも、Emmetという拡張機能をインストールしていればimgと書いてTabキーを押すだけで
<img src="" alt="">
まで入力される。

Brackets

右クリックでCSSのクイック編集。

リンクしていないファイルの一覧も出てくるから面倒…と思いましたが、IE8用の設定まで見渡す事ができたり…。

Brackets

CSSの定義一覧。クリックすると該当行に移動。

Brackets

HTMLエンティティのエンコード。

Brackets

ライブプレビュー。ブラウザを選択すると、ソースの該当箇所のタグがハイライトされる。ソースを選択するとブラウザの該当箇所がハイライトされる。
ソースを編集すると、保存していなくてもプレビューに反映される。

Dreamweaver8でもプレビュー画面をみながらソースを編集、という事が多かったのでこれで十分です。
Brackets CSS Class Code hint
Brackets Icons
CSSFier
Emmet
Highlight Multibyte Symbols
More HTML5 Code Hints + Fat-Free Framework Template Tags
右クリック拡張
W3C Validation (by Umoxfo)

Bracketsにインストールしている拡張機能。
posted by さとぴあ at 2018/03/10 09:18 | Web制作

Dreamweaverの代わりになるHTMLエディタ

Dreamweaver8を使い続けてきましたが、CSS3に対応していないため表示を確認する事が難しくなってきました。
またWindows7で起動するとアイコンに盾マーク。Windows10で動作するのかどうか…。

Dreamweaverの最新版を買えばいいのでは?と思いましたが…。
Adobe Dreamweaver CCの購入 | webデザインソフトウェア

Creative Cloud単体プランが2,180円/月(税別)、または、26,160円/年(税別)です。
毎年2万6千円…。
Dreamweaver8を、2006年に46,190円で購入、12年使いました。

46,190/12=3,849円/年とコスパ良好…。

これが、毎年2万6千円になったら…。

ホームページ・ビルダー21は…。

HTML5、CSS3に対応。12年前のソフトより、もしかしたら使いやすいかもしれない…。
と思いましたがダメでした。

HTMLがわからない人でも使えるソフトとして開発しているからなのか色を16進数で「#666666」のように6桁で入力したいと思っても、16進数による入力は2桁ずつ…。

CSSの編集…。
なぜ何通りものCSSの編集モードがあるのかわからない…。
従来の操作方法を残しながら機能を追加したから…でしょうか?

BlueGriffon

Netscape Composerの末裔。
フリーソフト、拡張機能は有料。

テキスト入力には使える…と思いましたが、phpを読み込んで保存してみたところコードが壊れて…。
本文中の「>」が「&gt;」に書き換えられました。

親切な機能なのですが、phpのプログラムの書き換えは…。

StyleNote

UIが…。何をどうすればどうなるのか…。

Aptana

高機能なWebオーサリングツール…のようなのですが、こちらの回線が遅いからなのか、サーバーが重いからなのかダウンロードに何度も失敗。

やっとダウンロードできた…と思ったらインストールに失敗。
ソフトウェアの使い方を覚えたらずっと使いたいのに、これでは…となりました。

Atom

学習中。

「d」と一文字入力して、候補から「div」を選ぶと…。
<div class="">
 
</div>
まで入力してくれる。

Atom

Atomで三色旗を作ってみました。

Brackets

Brackets

Bracketsでライブプレビュー。

ソースを選択するとChromeの該当箇所が強調表示され、Chromeの表示を選択するとソースの該当箇所が強調表示される。

WYSIWYGじゃなくても、ここまでできれば…。
右クリックからのCSSを編集時は、どのCSSファイルを編集しているのかを確認しなければいけないようです。気がついたらそのHTMLからはリンクされていない別のCSSファイルを編集していました。

Google Chrome。

Chrome デベロッパーツール

ブラウザですが…。
ASCII.jp:CSSの修正が捗る「リアルタイムコーディング」とは|Web制作が3倍速くなるChromeデベロッパーツールの使い方

Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。
CSSの編集方法がDreamweaver8と近い。
DevTools ワークスペースによる永続化の設定 | Tools for Web Developers | Google Developers

デフォルトでは、変更点を外部エディタに手動でコピーして貼り付けておかなければ、ブラウザを最新情報に更新すると、変更内容は失われます。
ワークスペースを使用すると、Chrome DevTools を使いながら、このような変更点をディスクに永続化できます。
chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法 | ぶちねこどっとうぇぶ

改めてChromeデベロッパー・ツールの公式マニュアルを読んだところ、ローカルファイルを直接変更・保存しながらコーディングする方法を知りました。
これができれば、Chromeで十分かも…と思いましたがなぜかできません。

Chrome デベロッパーツール ワークスペース

ワークスペースの設定画面に、バグでマッピングができないからレポートして…と…。

Chromeを多重起動しているからなのか…。

マッピングできなくてもワークスペースに作業フォルダを登録する意味はあるようで…。

Chrome デベロッパーツール

XAMPPを使ったlocalhostの表示なのに、表示しているローカルフォルダの色が変化し、表示しているファイルに緑色のマーク。

ワークスペースに登録している任意のフォルダやファイルを開いてソースを編集できる。
エディタはHTML、CSSの入力を補助してくれる。

Chrome デベロッパーツール

選択したHTMLのElementsを選択してElementsのソースをコピー。
Ghromeの「要素の検証」のElementsの内容をコピー | サイバーキューブ開発メモ
プログラムを実行した結果得られたHTMLをそのまま保存してもあまり意味が無いので、該当箇所だけコピーしてテンプレートを編集…という作業のための機能なのかもしれません。

いろいろ使い比べてみて、一番使いやすかったのはGoogle Chrome…いや、それブラウザだからという…。
Atomや、BlueGriffonも併用する事になると思いますが、今あるサイトを簡易的にメンテナンスするだけなら、Chromeがあれば…。

CSSの調整はDreamweaver8より簡単。

新規ルールを設定したり、idやclassを割り振る作業にはDreamweaver8を使ったほうがいいのかもしれません。しかし、すでに設定されているCSSの数値の変更はChromeのデベロッパーツールでリアルタイムで変化する画面を確認しながら作業したほうが早くて確実…でした。

追記。

ワークスペースにフォルダを追加してもマッピングできないと書きましたが…。
デベロッパーツールで変更すると、ローカルのCSSも変更されていて…。
デベロッパーツールで加えた変更がリアルタイムでローカルに保存できればいいわけですから、この設定で問題ない事になります。
Mapping are inferred automatically.
翻訳してみたら…自動的にマッピングしたよ…。
posted by さとぴあ at 2018/03/04 21:31 | Web制作