Noto Fontsは、GoogleとAdobeが連携して制作したフォントです。
世界の言語を1つのフォントセットで表現したものです。

フォントセットにない文字を表示させようとすると豆腐文字が出てきてしまいますが。
Noto Fontsではそんなことはありません。

フォントの名前もno more tofuからきているそうです。

文字数ですが、Noto Sans JPが6,992文字
Noto Sans Japaneseが6,934文字。です。
Noto Sans JPでは漢字が35文字増えており、漢字以外は23文字増えています。

ですが問題点もあり、

文字を表示するのに時間がかかってしまうので、使用する文字などできるだけ少なくしたほうがよさそうです。

CDNのWebフォントを利用し、
日本語のWebフォントはサイズが大きいので、CDNなどの利用者のブラウザにキャッシュされているものを使用し、Note Fontsの場合で言えば、Googleのサーバのものを指定することです。

jQueryでCSSの属性値を変更したりできます。これを応用すれば動的にcssの変更などができるようになります。
基本的には下記のようになります。

■css

#js {
    font-size:16px;
    font-weight: bold;
}

■js

$(function() {
    $("#js").css({
        "font-size": "16px",
        "font-weight": "bold"
    });
});

上記のように記述すれば同じ効果が得られます。

文字の先頭と最後をあわせるのにTABや空白などを入れて調整するときもありますが、text-justify-lastを使うと、文字の頭と最後を揃えて字間が調整されるので、便利です。

letter-spaceなどで調整もできますが、字間の調整も一括でできるのでより使いやすい方法だと思います。

  text-align: justify;
  text-justify-last: inter-ideograph;

フッターなどにカテゴリのリストをリンク付きで表示させることができるWordPressタグです。
カテゴリーを直接記述するのもいいですが、カテゴリーの数が多くなってくると管理も大変なので、
カテゴリを管理画面から編集することができるので、システムで動的に吐き出したほうが、制作は楽です。

:matches()擬似クラスは複数のセレクタをたった1行で簡潔に記すことができるものです。

.contents h2,
.contents p,
.contents ul, {
　　margin:10px 0;
}

同じ親要素内の子にスタイルを適用しているのですが、そのまま並列して記載しており、記述が長くなってしまいがちです。
ですが、:matches()を使えば、下記のようにシンプルにまとめることができます。

:matches(.contents) :matches(h2, p, ul) {
　　margin:10px 0;
}

FirefoxやChromeではベンダープレフィックス対応で:any()擬似クラスを使用したほうが良いです。

:-webkit-any(.contents) {
　　margin:10px 0;
}

:-moz-any(.contents) {
　　margin:10px 0;
}

フォントサイズをjqueryで変更は必ず必要とは限りませんが、ブラウザで文字サイズ変えられたり、拡大の方法がわからない人にとっては、必要になります。
(ブラウザの標準機能として文字の拡大の方法を知らないユーザーが多いことから、文字拡大機能を見える形でページ上に設置したほうが親切ということです。

下記では「大」「中」「小」とボタンを表示し、それぞれ押すことで、サイトの文字サイズを変更することが可能です。
■html

     

       
小
       
中
       
大
     

$(function(){ 
	$("#font li").click(function(){
		$("#fontSize li").removeClass("current");
		var fontCss = $(this).attr("class");
		$(this).addClass("current");
		if(fontCss == "large"){
		  $("body").css("fontSize","0.875em"); 
		}else if(fontCss == "middle"){
		  $("body").css("fontSize","0.75em");
		}else{
		  $("body").css("fontSize","0.625em");
		}
 	});
});

閲覧しているページの文字サイズを大きく表示したいという必要性はあるので、
そのニーズを満たすことはできますが、これはユーザーエージェント側で担うべきです。

:only-of-typeの疑似クラスは、nth-of-type(n)やnth-child(n)セレクタと似ています。
nth-of-type(n)やnth-child(n)が複数の子要素に対するものでありますが、
only-of-typeは唯一の子要素に対して指定できます。
ページ内に3個の要素があり、商品リストなどが表示されていた場合。
販売しなくなった商品は消去していくとすると、3点示される場合と、一点だけしか表示されないこともあります。

一点しか表示しない場合、空のボックスは表示せず、全幅で表示するようにすることができます。

■html

  
      
商品01
      
商品02
      
商品03

■css

list li{  
      float: left;
      margin-right: 10px;
      width: 100px;
    }

    article:only-of-type {  
      width: 100%;
      margin-right: 0;
    }

リンクにtarget=”_blank”を指定してリンクを新しいウィンドウで表示してサイトに訪問者を残しておくようにするサイトは多くなってきています。

リンクをどう開くかは訪問者に決定させる、インターネット倫理の基本原則がある

ダウンロードなどのファイルなどで、PDFドキュメントにリンクするときTarget=”_blank”が最適です。
それは、初めて開く場合にはPDFを読み込むのに時間がかかるからです。
pdfの読み込みの間に、現在のページにある情報をもっと読んでもらうことができる

Target=”new”

ターゲット値に_blankを使用すると、開くたびに新しいページを表示されますが、
_newを指定すると1つの新しいウィンドウが表示され、
その後にクリックされたターゲット値が_newのリンクは全て最初に表示されたウィンドウ上に置き換わって表示されます。

否定疑似クラス「:not」は非常に便利です。
疑似クラスは指定した属性を持っていない要素に対して定めることができます。

:not(p) { padding: 20px; }

p要素ではない要素に適用されます。

「E:not(s)」のEはなくてもいい

Eの部分はあってもなくても構いません。

a:not(:first-child):not(:last-child){
   padding: 20px;  
}

Eの部分をつける場合:first-childや単純セレクタで要素を指定することができます。

「E:not(s)」のsに入れられるのは、単純セレクタのみです。
単純セレクタとは>や+などの結合子がないセレクタです。なので、sの部分に結合子が入ると動きません。

イメージマップの座標マッピングを自動で行ってくれるサイトがあります。
それがHTML Imagemap Generatorです。

イメージマップを利用することは多くはありませんが、ワールドマップを押したときに、その国のリンクに飛ぶように設定したりなど、利用する機会はあります。

ですが、リンクの形が複雑になるほど、座標マッピングは複雑なものになってしまいますが、HTML Imagemap Generatorなら簡単にできてしまいます。

利用方法は画像をアップロード
↓
短形を描く
円形を描く
多角形を描く
の三つから選んで、座標を指定していくだけです。