くりっくねっと☆パソコンブログ

2022年8月18日木曜日

Visual Studio Code

ホームページの作成にテキストエディタを試してみました。

マイクロソフトの無料ソフトです。

インストールして、テーマを白に変えてしばらく使ってみます。

l VSCode

https://azure.microsoft.com/ja-jp/products/visual-studio-code/　ダウンロード

https://www.javadrive.jp/vscode/install/index4.html　日本語化

2022年5月16日月曜日

ホームページビルダー21　環境設定（2022年版）

ホームページビルダー21のオプション、環境設定のおすすめ設定の忘備記録です。

画像ファイルで残しています。

インストールしたままだと、自動でソースが変換することがあるので変換されないように設定しているものです。

これは、こちらの設定で真似をされる方は、自己責任で行ってください。

「ホームページビルダー・クラシック21」編集される方へ下記設定をお願いします。

①ホームページビルダーは、最新にしてください。(Windows10：ビルダー18以上）
　【ヘルプ】→【最新版へアップデート】バージョンを確認する。アップデータモジュールをダウンロードしてください。
ホームページビルダー環境設定
■はじめに出てくる「ようこそ画面」での編集スタイルは「スタンダード」を選択する
■オプションの設定をします。ツールバーのツールから以下をチェックして同じようにしてください。
<ファイルタブ＞要注意

ツール→オプション：ファイルタブ→htmlファイルの拡張子は、「html」に変更する
ツール→オプション：ファイルタブ→（オフ）DOCUMENT出力
ツール→オプション：ファイルタブ→（オフ）HTMLソースにGENERATORを組み込む
ツール→オプション：ファイルタブ→保存オプション　（オフ）バックファイルを作成する
ツール→オプション：ファイルタブ→文字エンコードをMETAタグで指定する　「自動」を選択
ツール→オプション：一般タブ→HTMLソースを自動整形する（オフ）
ツール→オプション：一般タブ→構文エラーを自動整形する（オフ）
ツール→オプション：一般タブ→構文エラー時の操作　すべてのエラーを無視
ツール→オプション：一般タブ→ページ作成モードの選択→標準モード
ツール→オプション：ソース編集タブ→出力文字　タグ：「小文字」にする
ツール→オプション：ソース編集タブ→出力文字　属性：「小文字」にする
ツール→オプション：ソース編集タブ→スタイルシート：詳細設定→お勧めボタンを押す
ツール→オプション：ソース編集タブ→表示設定→ソース自動改行は（オフ）
ツール→オプション：ソース編集タブ→表示設定→行数表示（オン）
ツール→オプション：編集タブ→表の属性の「省略可能なTBODYを表示する」は（オフ）
ビルダーのウィンドウ
画面については、使いやすいように使ってください。最小限は、以下です。
ツールバーの表示→かんたんナビをオフ
ツールバーの表示→ツールバー→標準と書式のみオン
ビルダーの全般的なヘルプはツールバーのヘルプ→ガイドマップをみるにあります。
不安な方は、マニュアルを見る→入門編をさらりと目を通してください。

ホームページの準備
パソコンで、拡張子を表示しましょう。（必須）　
フォルダオプションの「詳細設定」ボックスから「登録されている拡張子は表示しない」のチェックをOFF
HTMLファイル：html htm
画像ファイル：jpg　gif　png
スタイルシート：css
ジャバスクリプトやJクエリ：js
申請書類などダウンロード書類：pdf

2022年1月7日金曜日

HTMLやCSSの検証サイトの利用。

ホームページの新規作成やリニューアルの時には、試作段階でソースを検証してみましょう。

数年の間に、ごみが残っていたり、古くなっています。

赤信号もあれば、エラーではないけど、黄色信号もはやい段階で見つければ、間違いがすくなくすっきりします。

今回は、レスポンシブをモバイルファーストでスタイルシートを書き換えたいので、まずはソースを修正します。

【保存版】HTML・CSSの構文チェックツール5選

このなかのひとつを試してみました。

Another HTML-lint 5

ここで、サンプルページをutf-８に変更してから検証してみました。

ふつうです。46点

たくさんありますが、分類すると

●<H4> が 140行目の <H2> に続いていますが好ましくありません。
●<LI> と </LI> の間が空です。
●コメント中に `--` を書くことはできません。
●<INPUT TYPE="CHECKBOX"> には VALUE 属性が必要です。
●<DIV> と </DIV> の間に空白文字しか含まれていません。
●<A> のアンカー `ウィンドウ（タブ）を開きます。` は 260行目で異なるリンク先を指しています。
●<BR> が多数連続しています。

対処してみます。

上記を修正しました。

ケアレスミスなどはこれで防ぐことができます。

何より100点はうれしいです。