noindex

noindexとは、メタタグの一種で、サイト内の指定したページを
グーグルなどの検索エンジンにインデックスさせないために使います。

そのためnoindexを指定すると、検索結果には表示されなくなります。
あまり意味の内容に感じるかもしれませんが、適切に使うことで、
不要なページや未公開のページをnoindexすることで、サイト全体の価値を上げることができます。

noindexを指定するとすれば、テストでアップしたページやコンテンツの内容が不完全な状態のページなどです。

低品質なページでサイトに必要がないページは、noindexを使うより、削除したり、コンテンツ内容の品質を上げることが好ましいです。

ただし、404エラーページなどは、コンテンツ内容が充実したものではありませんが、ページが見つからないということを示すには必要なので、
noindexをかけて残しておいたほうがよいでしょう。

IE11でのflex

コンテンツを上下中央に配置する場面がよくあります。

flexを使用すれば簡単に実現できるのですが、IEでのブラウザで見たときとほかのブラウザでの動きに注意しなければなりません。

クロームなどのブラウザでは上下中央揃えになりますが、
IEでは右中央に表示されてしまいます。

flexをかけた直下の子要素にmargin autohを指定していると、IEでは中央揃えにならないため
解決策としては、

mzrgin:autoが指定されている要素をdivで囲うことで解決ができます。
flexは便利ですが、IEなどのブラウザなどの見え方に気を付けないと、時間がかかってしまうので、理解して使用していきたいですね

SVGが表示されない場合

SVGはレスポンシブなどに便利で、
JPEGやGIF、PNGなどの、ビットマップ画像ではなく、
ベクター画像なので、拡大・縮小しても画質の影響などで、荒れたりしません。
スマホや、Retinaディスプレイなどでは非常に重宝します。

コーディングの際では、普通にimgファイルとして使用でき、

上記のようにsrc属性で指定できます。

便利なSVGですが、サーバー環境によってブラウザ側でうまく表示されない場合があります。

その場合.htaccessに以下のコードを追加します。

これを記述した.htaccessをサーバー側にアップすることで、SVG画像が使用可能になります。

JavaScriptの読み込み位置

JavaScriptの記述場所といえばheadの内部に記述するケースが多いと思いますが、
bodyの終了タグの直前に記述するケースも増えてきました。

ページの最後にjsを記述する利点として、
script要素の記述位置によってページの表示速度が変わるということです。

javascriptを読み込んでいる時間HTMLの表示が止まってしまうため、WEBサイトが表示されるのが遅くなってしまいます。
なので、jsをページ末尾に記述してやることで、ページ全体の描画画を止めることなく、スムーズに表示させることが可能になります。

ユーザーのボタン操作や、ページが表示されてから機能するjsなどや、アクセス解析用のタグなどは、ページ下部で機能させてもよいですが、
パララックスなどのスクロールして、jsが機能していないと表示されないようなページの作りの場合などhead内に記述したほうが良い場合もありますので、
レイアウトや表示スピードを見て、読み込み位置を調整したほうがよいでしょう。

WordPressの編集画面でCSSが編集できない場合

サイトで、レイアウトを編集で管理画面からCSSを編集することがあるかと思います。

HTPからCSSファイルをダウンロードしてきて、編集、アップロードの作業をするのも中々手間ですよね。

ですが、管理画面でCSSを編集しても、サイトに反映されていないという経験をした人もいるのではないでしょうか。

原因の一つにキャッシュというものがあり、ブラウザ側が古いほうのCSSを読みに行くため、新しいCSSを読み込めないということがあります。

上記のように
PHP関数「filemtime()」を使い、そのファイルの最終更新日を取得して、新しいファイルを読み取りに行くように指定してあげることで、
キャッシュによる問題を解決することができます。

ファイルを更新してもサイトに変化がない場合、試してみるとよいでしょう

jQuery クリック連打を制限する

メニューボタンやプルダウンなど、アニメーションが終わる前に、開閉ボタンを連打すると、
何回もメニューの開閉をしたり、挙動が変わってレイアウトが崩れてしまうなど問題が起きてしまう場合があります。

何回もメニューボタンを押す人は少ないでしょうが、意図した問題が起きないように、
クリック対策をしておくのも必要でしょう。

連打によって連続で動作させたくない場所に .stop(true, false) を追加します。

上記のようにmenu.stop(true, false)を.animateの前に記述することで、連打したとしても、連続でメニューが開閉しないようになります。

font-feature-settingsで文字詰め

CSSのプロパティのfont-feature-settingsで自動カーニングをすることが可能です。

ですが、すべてのフォントで自動カーニングしてくれるわけではありません

利用できるフォントは、

1,OpenTypeフォント
2,プロポーショナルメトリクス情報がフォントに含まれている

上記の条件を満たすフォントは

ヒラギノ角ゴシックヒラギノ明朝、游ゴシック、游明朝

webフォントではNoto Sans CJK JPなどです。

文章などに基本的に使用するメイリオにはプロポーショナルメトリクスの情報は含まれていません。

ですのでfont-feature-settingsでは自動カーニングが残念ながらできません。

EdgeやIE11では

text-align:justify
text-justify:inter-ideograph
font-feature-setting : “palt”

上記をあわせて使用した場合、両端揃えができないなどの不具合がありますが、

プロパティ自体の対応状況は、大体のモダンブラウザで使用できます。
Notoフォントなど和文フォントを使用する際などに利用してみると、きれいに読みやすくなるサイトになるかと思います。

jqueryのみでrssを読み込み

Google Feed APIが終了したとのことで

Google Feed APIの代替策としてjqueryを使用したrssの収得方法です。

以下のコードでは同じドメイン内の RSS を読み込んで表示することが可能です。

jqueryのみで簡単にrssを取得可能なので、ブログの最新記事などをhtmlサイトに表示させたいときなどに便利ですね。

デバイスサイズなどでjsの条件分岐

レスポンシブサイトでは、pcやタブレット、スマートフォンなどで見え方やデザインが大きく変わったり、処理したいプログラムを変更したい場合があるかと思います。

今回はブレイクポイントごとににJavaScriptの切り替える方法を紹介します。

これを利用すれば、グローバルナビゲーションのpcからスマホ表示まで、
変更を十何にすることができます。

IEなどでフォントサイズcalc(% + vw)の計算

calc()は値を計算式で指定できる便利なプロパティです。

また、異なる単位で計算することができ、%やvw, vh、pxなどと計算できます。

ですが、フォントサイズをcalcで(100% * 2vw)などと計算するとIEやEdgeなどのブラウザでは、正確な計算をできません。

上記のように指定するとIE,Edgeのブラウザでは、ほかのブラウザと違う表示サイズになってしまいます。

なので%とvwの計算はせずに

上記のように%などではなくemなどの単位を使って計算をしてやる必要があります。