サイト上でボタンや検索フォームなどサイトのUI(パーツ関連)を作ってくれてHTMLとCSSを生成する便利なサイトです。
カテゴリー別アーカイブ: HTML
ホームページの表示速度、コードのチェック
font-familyの指定(2021年版)
ゴシック体セット
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
“Helvetica Neue” -MacOS、iOS用欧文書体
Arial -Windows用欧文書体
“Hiragino Kaku Gothic ProN”, -MacOS、iOS用和文書体
Meiryo -Windows用和文書体
sans-serif -Android用書体
明朝体セット
body {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
Pingや接続経路を調べるツール
InfoByIp.com
というサイト、日本語もあります。
https://ja.infobyip.com/internettools.php
レスポンシブサイトでイメージマップ(クリッカブルマップ)を設置する方法
1つの画像に複数のリンクを設置したいときに便利なイメージマップですが、レスポンシブサイトだと表示サイズによって1つのリンクしか反応しなくなります。
これはイメージマップの範囲がレスポンシブのように拡大縮小しないから。
レスポンシブサイトでイメージマップを利用したいときは「jQuery RWD Image Maps」というプラグインが便利です。
これでイメージマップの範囲も画像に合わせて拡大縮小します。
https://github.com/stowball/jQuery-rwdImageMaps
プラグインの読み込みとスクリプトの記述は下記。
━━━━━━━━━━━━━━━━━━━━
<script type=”text/javascript” src=”js/jquery.rwdImageMaps.min.js”></script>
<script type=”text/javascript”>$(‘img[usemap]’).rwdImageMaps();</script>
━━━━━━━━━━━━━━━━━━━━
また、イメージマップのコード生成には「HTML Imagemap Generator」が便利
http://labs.d-s-b.jp/ImagemapGenerator/
※この記事は2018年12月現在の内容です。リンク先のドメイン変更やサイト構成変更によってリンク切れになる場合もあります。ご了承ください。
埋め込みGoogleMap の縮尺を変更する方法
まずGoogleMapで埋め込みタグを取得。
1、埋め込みたい地図を表示したら「共有」をクリック。
2、「地図を埋め込む」を表示。
3、埋め込みタグ(HTML)をコピー。
これで取得するタグは下記のような内容。
この羅列の中で「4f13.1」という表記を変更すると縮尺が変わります。
━━━━━━━━━━━━━━━━━━━━
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.426903155609!2d139.51303491525505!3d35.54315758022669!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f831781a0c4f%3A0x4225c0d743ccd56!2z44CSMjI3LTAwNjIg56We5aWI5bed55yM5qiq5rWc5biC6Z2S6JGJ5Yy66Z2S6JGJ5Y-w77yS5LiB55uu77yW4oiS77yR!5e0!3m2!1sja!2sjp!4v1544070708695″ width=”100%” height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
━━━━━━━━━━━━━━━━━━━━
「13.1」が尺度で、数値が小さいほどズームアップします。
1〜179の間で調節してみてください。
※この記事は2018年12月現在の内容です。GoogleMapの仕様変更により利用できなくなる場合もあります。ご了承ください。
リンク切れをチェックできるサービス
1ページ単位でチェックしたい場合
http://link-check.jp
サイト全体(URLを辿っていく)をチェックしたい場合
http://www.dead-link-checker.com/ja/
html,css.javascripを見やすいように整形
1行になっているソースコードを適切なインデントや改行を自動でいれて見やすくしてくれるサイト。
Syncer 日本のサイトです。
https://lab.syncer.jp/Tool/HTML-PrettyPrint/