ウェブサイト製作に使った便利サイト集
- 公開日：2020年8月20日
サイト製作は2019年の秋ぐらいからスタートし、公開は2020年の8月。
のんびり製作していたため、相当時間がかかっていますが、時間をかけて作ってよかったなと思います。昔のバックアップなんて、見られたものじゃないですからね。
せっかくなので、この製作期間中にブックマークした主なサイトやツールをまとめてみました。そして、このページのリンクをお礼に代えさせていただきたいと思います。ありがとうございました。
なお、このサイトはWordPressなどのCMSではなく、手書きのHTMLサイトなので注意してください。
テキストエディタ
TeraPad
メモ帳で書くのもあれなので、HTML初心者でも使えそうな、シンプルなテキストエディタを探していたら、なんとなくTeraPadにたどり着きました。
メモ帳とTeraPad以外のテキストエディタを使ったことがなく、メモ帳との比較しかできませんが、相当便利なエディタです。
Visual Studio Code(VScode)
少しハードルが高そうで敬遠していたのですが、そこそこ慣れてきたところで、おすすめしている人が多いVisual Studio Code(VScode)に乗りかえ。
フォルダ一覧とブラウザみたいなタブがあるだけで、メモ帳系のエディタより作業効率は格段に上がります。
初心者だからと遠慮せず、最初から使っておけばよかったなぁ。
HTML&CSS
HTML&CSS
HTMLやCSSのことをGoogleで検索していると、嫌でも(失礼)目にすることになるサイト。
デザイン案やテンプレートも豊富で、シンプルなものが多く、初心者には助かります。
シンプルなタグ辞典。目的別とABC順と特殊文字一覧は便利。
セレクタ
CSSのセレクタをなかなか覚えられないので、自分用のまとめリンクです。
調べれば分かるけど、調べないと分からないような状態がずっと続いてるなぁ。
CSS Peeper
Chromeのアドオン。アイコンをクリックするとスタートで、気になるところにマウスを置き、点線で囲まれる場所をクリックすると、カラーコードや高さや余白などを表示してくれます。
さらに、カメラのマーク(ASSETS)→上のExport Allをクリックすると、そのページの画像全てを一括でダウンロード可能。
至れり尽くせりのアドオンなんですが、自分はあまり活用できていません。まぁ、このレベルのサイトを作るには、そこまでする必要はないってことかなと。
フォント
フォント周りのCSSを参考にさせてもらいました。というか、「まとめ」(最下部)のCSSをそのまま使わせてもらっています。
ブラウザ上のフォントが簡単にわかるchromeのアドオンです。
カラーコード
カラーサンプル
配色に困ったら、とりあえず、この2つを開きます。
カラーパレット
マウスを動かすだけで、色を選べる直感的なカラーパレット。最大5色まで同時に選べます。
文字通りに色々試しましたが、細かい配色を決めるのは、自分のセンスでは時間の無駄だと気づきました。
それに気づけたのは、この便利なカラーパレットのおかげかもしれません。
自分にとってはこれが一番使いやすいシンプルなカラーパレット。
カラーサンプルで気に入った色を選んで、PALXを使えば、統一感のある配色にできます。
下記で紹介しているGoogle公式のカラーパレットを見つけたあとも現役で使用中。
ColorPick Eyedropper
chromeのアドオン。アドオンを追加し、アイコンをクリックしてから、調べたい場所にマウスを乗せるだけで、そのカラーコードが分かります。
Google公式のカラーパレット
2021年8月まで存在すら知らなかった、Google神公式のカラーパレット。
カラーサンプルだけではなく、アイコンやunicodeまで全て揃います。しかも、直感的で非常に使いやすい。
ウェブサイト制作には必須といってもいいんじゃないでしょうか。もっと早く教えてほしかったなぁ…。
テーブル
テーブル作成
Excelからコピーして貼りつけるだけでテーブルが完成。かなりお世話になっています。
ただし、結合された表には対応していないことには注意が必要です。
直感的に表を結合したり、classをつけたり、見出しをつけたりできるサイト。
こちらはcolspanとrowspanを使った結合テーブルにも対応。
便利なテーブル作成サイトだと思いブックマークをしてあるんですが、意外に出番がないサイト。
ただ、Excelを持っていなければ、かなり便利なはず。
テーブルデザイン
3ページとも、テーブルデザインのサンプルが載っています。勉強になりました。
ファビコン(favicon)
ファビコンとはなんぞや？という疑問を解決してくれるのがこのページ。
画像を1発でファビコンに変換できるサイト。favicon generatorの使い方と作った画像の使い方は、上記のまとめページで説明してくれています。
peamon.netのファビコンも、ペイントで適当に作った画像を、このサイトでファビコンにしています。
コード整形
HTML・CSS・javascriptのコードを整え、見やすくしてくれるサイト。インデントのスペースや改行の保持もオプションで選択可能。
日本語で非常に使いやすく、大変お世話になっています。
Dirtymarkup Formatterは、整形と同時に文法のチェックなどもできるみたいですが、英語だし使いこなせていません。
少なくとも、HTMLを整形するだけなら、SYNCERのほうが使いやすいと思います。
コードチェック
HTMLエラーチェッカー
Chromeのアドオンです。右上にあるアイコンをクリックするだけで、タグの閉じ忘れチェックが可能。
ローカルファイルをチェックするには、「拡張機能」にあるHTMLエラーチェッカーの「ファイルのURLへのアクセスを許可する」にチェックを入れるだけでOK。
一番手軽にチェックできるので、まずこのアドオンを通しています。ただし、文法ミスまではチェックしてくれません。
あくまで、タグの閉じ忘れや、クロスしたタグなどのチェックのみ。
The W3C Markup Validation Service
「HTMLエラーチェッカー」の次に通すのは、公式のエラーチェッカー。
ローカルファイルのチェックは、タグ真ん中の【validate by file upload】をクリックし、ファイルを選択すればOK。英語ですが、ノリでなんとかなります。
Another HTML Lint - Gateway
最後は一番厳しい?こちらのサイト。
ローカルファイルのチェックは、右上にあるタブの【FILE】をクリックし、ファイルを選択するだけ。
文章校正
いきなりテキストエディタに書き込むとミスが増えると思うので、まずはWordに下書きしています。
Wordの校正機能は頼りにしなければ、なんだかんだで優秀。
Enno
無駄なスペースもチェックしてくれるのが嬉しい。
文章校正ツール
Yahoo!のAPIを使っている文章校正サイトは多数ありますが、文字数の制限(10000字)はあるものの、こちらが個人的に一番使いやすいと思います。
一括置換
TextSS.net
TeraPadを使っていた頃の一括置換は、TextSS.netを使っていました。使用時にバックアップを自動で取ってくれるので、安心して使えていましたが…。
VScode
VScodeに乗りかえてからは、ソフト付属の一括置換機能を使っています。
左端にある虫眼鏡アイコンをクリックするか、shift+ctrl+Hで簡単に可能です。
プライバシーポリシーの書き方
peamon.netのプライバシーポリシーは、上記のサイトなどを参考に作成しました。
その他の便利なサイト
- Can I use... Support tables for HTML5, CSS3, etc
- StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
- Namechk | Username, Domain, and Trademark Search | Username Registration
- Web便利ツール/メールアドレス変換フォーム［エンティティ表記］ - TAG index
- ハンドルネームジェネレーター15選！ペンネームなどの名前を作成！｜iwakoのネタとエンタメブログ
- アナグラム自動生成ジェネレーター
- 全角半角変換ツール - ブラウザで使えるWeb便利ツール
- ブラウザのHTMLとCSSの対応状況を確認できる。
- OSや検索エンジン、ブラウザ、ソーシャルメディアなどのシェアが分かる。
- 入力した文字列が、ドメインやユーザーネームで使用可能かどうかを確認できる。
- メールアドレスをエンティティ表記に変換できる。
- ハンドルネームジェネレーターのまとめページ。
- アナグラムを自動生成する。
- 全角を半角に、半角を全角に変換できる。
タイピング
ウェブサイト製作に直接関係はないものの、製作の効率には間違いなく影響があるタイピングの速度。有名どころをまとめておきます。
ちなみに、自分は2020年7月現在、e-typingで平均270点前後、最高は351点です。