仕事をする上で、情報収集は欠かすことが。
そのために、多くでも情報に触れられるよう、効率よくで情報を得ることが重要になります。
そこで、今回はGoogle Chromeの拡張機能をご紹介します。
ウエブサイト上で表示されている色を抽出することができる拡張機能です。
ウエブサイトを閲覧していて、画像などに使用されているカラーコードを知りたい時に、マウスポインタを合わせると、カラーコードを表示してくれます。
記事が3～4ページに分割されたウエブサイトがあります。
AutoPatchWorkは、分割されたウエブページをひとつのページにまとめて、スクロールのみで最後まで閲覧することができます。
公開されているブラウザの種類は数多く存在しますが、一般的に使用されているブラウザの代表格といえば
Internet Explorer (IE)
Firefox (FF)
Google Chrome
Safari
Opera
の5種類ではないでしょうか。この5種類のブラウザの特徴を紹介していきたいと思います。
Mozillaが開発しているブラウザです。軽量・軽快な動作が可能で、豊富な拡張機能が特徴です。さらに、カスタマイズ性が非常に高く、オプション設定やセキュリティ機能など幅広いユーザーから支持を集めています。
アップルが開発しているブラウザです。Macintoshに標準で搭載されています。フォントも美しくて読みやすいのが特徴で、快適にブラウジングを楽しむことができます。タブブラウジングと広告のブロック機能も搭載しiPhone､iPod touch、iPadなどのアップル製品にも採用されています。
Googleが開発した軽量・超高速が特徴のブラウザです。使い勝手の良さが良く、着実にシェアを伸ばしているブラウザです。読み込み速度がとても早く、どんなページでもサクサク表示することが可能です。カスタマイズ性も高くて幅広い環境に対応したブラウザです。
ノルウェーで開発されたブラウザです。広く採用されているブラウザであり、androidといったスマートフォンなどに使われています。OSもWindowsだけでなく、LinuxやUnixなど、ほぼすべてのパソコンで利用することができます。
Windows10にはIE11がインストールされていますが、標準ブラウザーとして「Microsoft Edge」が搭載されています。IEを長年使ってきた人のブラウザの変更は、機能や使い勝手で選ぶ人もいますが、Windows10でも「IEがあるならそっちを使う」という人も多いと思います。
IEとEdgeは、異なるレンダリングエンジンでWebページを表示しています。html5など最新の技術が利用されたWebページを快適に表示できる上に、拡張機能に優れています。さらに他ブラウザとの相互運用性も高められている点が、IEとの大きな違いです。
HTML5の新しい要素のサポート状況を評価する「HTML5 Accessibility」では、Microsoft Edgeが100％を達成しました。Microsoft Edgeは、Internet Explorerの次世代ブラウザとしてWindows 10の標準ブラウザになっており、技術サポートに期待がかかります。
まだまだ、IE8への対応を考えて、コーディングを気をつけていますが、IE8への対応をいつまで考えるべきでしょうか。
最新のモダンブラウザでは高機能を活かした表示をして、古いブラウザでもそれなりに表示することができるようにコーディングをする。
このようなWebコンテンツ制作はプログレッシブ エンハンスメント(Progressive Enhancement) と呼ばれています。
最新ブラウザでは HTML5 と CSS3 による高機能な表示を、古いブラウザ ( IE8 や IE9 ) でもそれなりに使えるサービスを提供する、といった制作方針です。
パソコンでのシェアでは、日本国内での IE8 と IE9 のシェアはあわせて 7% ほどです。
古いブラウザで利用できて、安全が高いWebサイトを制作するというのは、時として相容れません。
両立することはできませんから、選択が必要です。
対応としては1.HTML5のタグにCSSを設定しないことや、2,html5.jsを使用して、ライブラリを組み込むことによって、IE8 未満でも HTML5 の新要素が認識されるようになるので対応は可能といえば可能ですが、
IE8のサポートは終了するけど、IE8を使わない人がいないわけではないので、念のため最低限は対応するか、安全性を考慮して切り捨てるか、選択するする必要があるのかとも思いました。
WordPressのパーマリンクのカスタマイズをご紹介します。
WordPressは動的にページが生成されますので、URLには「.html」が付きません。
が、疑似的につける方法があります。
アクションフックを使って、デフォルトのパーマリンクを上書きします。
下記をfunction.phpに記述しましょう。
/**
* 固定ページのパーマリンクを投稿名.htmlに変更
*
*/
add_action( 'init', 'mytheme_init' );
if ( ! function_exists( 'mytheme_init' ) ) {
function mytheme_init() {
global $wp_rewrite;
$wp_rewrite->use_trailing_slashes = false;
$wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
}
}
カスタム投稿を使っている場合には、下記のプラグインも有用です。
Custom Post Type Permalinks
サーバ上にフォントをアップロードすることによって、閲覧者のPCのブラウザで扱えるようにすることで、PCの環境に左右されないで、フォントを表示させることが可能です。これをWebフォントといいます。
ですが、フォントの形式によって、注意すべき点があります。
それは、InternetExplorerが認識できるフォントは.eot形式であることです。
また、この.eot形式はIE独自のものなので、FirefoxやGoogleChromeなどのモダンブラウザでは認識できません。
もし、TTF形式のフォントをWebフォントとして用いた場合、GoogleChromeとIEでは以下のように表示されるフォントが異なってしまいます。
そこで、フォントを変換してくれる便利なサイトを紹介します。
otf to eot converter
https://everythingfonts.com/otf-to-eot
otfファイルをeotファイルに変換してくれるので、とても便利です。
対象ブラウザがIE8以上の案件がまだまだ多いですね。
IE7対応を考えなくても良くなってコーディングはしやすくなりましたが、「IE8」でもまだまだ使えないプロパティが多いです。
そこで今回は、「IE8対応のポイント」をまとめます。
HTML5のサイトでhtml5shiv.js IE8に読み込ませて対応する。
ですが、html5shiv.js を使った方法では、 HTML5要素をレイアウト崩れしないようにしてくれるのですが、あくまでもそれだけです。
opacityのプロパティを設定すると背景が濃くなってしまったりするケースがあります。
IE8のopacity操作には注意が必要です。
IE8 では未対応なので対応させる為には jQuery プラグインなどを使用するか、imgなら100%指定が可能なのででposition:absolute;で設定する必要があります。
:first-childは使用可能なので、:first-child+*などcssの書き方を変えて、対応するしかありません。
IE8ではbackground-sizeの指定が効きません、そこで jquery.backgroundSize.jsというプラグインを使用することによって、 background-sizeのプロパティの指定ができます。
auto 自動で算出する（初期値）
contain 縦横比は保持したまま、背景の領域に収まる最大サイズになります
cover 縦横比は保持したまま、背景領域を覆う最小サイズに拡大します
px pxで数値指定
% %で数値指定
カラムの横並びのマージン指定のときに:nth-childは便利です。しかしIE8以下は対応してません。
※ :first-child のみ対応してます。
どうしてもie8でもnth-child擬似クラスを使いたいときのハック。
ul.line-boxies > *:first-child+*+*{
margin-right:0;
}
first-childの+*(次)+*(次)で3番目にfirst-childを適用しています。
アニメーション・エフェクトを使用すれば、ウェブサイトのデザインを魅力的に魅せるだけでなく、ユーザーの注目を集めることができます。
今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。
ホバー時にアニメーションさせるには「transition」というプロパティを使用します。
■transition プロパティ 時間 アニメーション;
最初のプロパティはアニメーションさせるプロパティを指定します。例えば「all」とすれば設定したすべてのプロパティがアニメーションされます。
アニメーションの種類は「ease」「linear」「ease-in」「ease-out」「ease-in-out」「cubic-bezier」を指定することができます。
.transition01{
transition: background-color 3s linear 0.1s;
}
.transition01:hover{
background-color: red;
}