カテゴリー: コーディング

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

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

   

      
コンテンツ
   


.content{
        display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
.content-inner {
  max-width: 300px;
  margin: 0 auto;
}

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

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

  

     

      
コンテンツ
     
  

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

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

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

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

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

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

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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フォントなど和文フォントを使用する際などに利用してみると、きれいに読みやすくなるサイトになるかと思います。

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

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

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

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

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

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