グリッドレイアウトのコードを作成できるサイト

グリッドレイアウトのコードを作成できるサイト

グリッドレイアウトを制作するのにあたり、コードを作成してくれるWebサイトがあったので紹介します。
「Griddy」のサイトにアクセスすると、4つのグリッドが表示されおり、グリッドの数を作成したり減らしたりするには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンでグリッド数を変更します。

設定した、グリッドレイアウトのコードは画面右下に表示されているので、コードを親要素に指定すれば完成です。

「Griddy」では基礎となるグリッドレイアウトを組むことができますが、ボックスのサイズは個別に変更するなどしたい時には、子要素に対してCSSを指定する必要があります。

グリッドレイアウトの勉強をしたい時には便利なサイトなので、活用していきたいですね。

時短に使える、CSSボタンジェネレーター

角丸からグラデーションや影の設定までをCSSだけで製作すことが多いと思います。
CSSをはじめから書くのは時間がかかるという方は、CSSジェネレーターでコーディングするのも方法の一つです。
今回は、色異論設定のできる、CSSボタンジェネレーターを紹介します。

CSS Button Generator – imageless css buttons maker

ボタンの影や、文字の影を詳細に設定できるのが特徴なジェネレーターです。
シャドウを生かしたデザインに最適です。、

Button X

はじめから、プリセットが豊富で、デフォルトのままでも、十分使えるものがそろっています。
即席で使いたいという方にお勧めですね。

CSS Button Creator

ボックスの影や文字の影を詳細に設定できますが、設定できる項目が多いので、初心者には少し難しいかもしれません。

jQueryで要素を追加する

jQueryで要素を追加する場合や、特定の要素を囲うには下記のように記述します。

▼append
appendは指定した要素の最後にHTMLを追加します。

▼prepend
prependは指定した要素の最初にHTMLを追加します。

▼before
beforeは指定した要素の前にHTMLを追加します。

▼after
afterは指定した要素の後ろにHTMLを追加します。

▼wrap
wrapは指定した要素をHTMLで包み込みます。

参考:
https://2inc.org/blog/2013/03/07/3027/
http://www.re-creators.jp/blog/2008/12/09_167.html

オススメのChrome拡張機能

仕事をする上で、情報収集は欠かすことが。
そのために、多くでも情報に触れられるよう、効率よくで情報を得ることが重要になります。

そこで、今回はGoogle Chromeの拡張機能をご紹介します。

ColorPick Eyedropper

ウエブサイト上で表示されている色を抽出することができる拡張機能です。
ウエブサイトを閲覧していて、画像などに使用されているカラーコードを知りたい時に、マウスポインタを合わせると、カラーコードを表示してくれます。

AutoPatchWork

記事が3~4ページに分割されたウエブサイトがあります。
AutoPatchWorkは、分割されたウエブページをひとつのページにまとめて、スクロールのみで最後まで閲覧することができます。

ブラウザの種類

ブラウザの種類

公開されているブラウザの種類は数多く存在しますが、一般的に使用されているブラウザの代表格といえば

Internet Explorer (IE)
Firefox (FF)
Google Chrome
Safari
Opera
の5種類ではないでしょうか。この5種類のブラウザの特徴を紹介していきたいと思います。

Firefox

Mozillaが開発しているブラウザです。軽量・軽快な動作が可能で、豊富な拡張機能が特徴です。さらに、カスタマイズ性が非常に高く、オプション設定やセキュリティ機能など幅広いユーザーから支持を集めています。

safari

アップルが開発しているブラウザです。Macintoshに標準で搭載されています。フォントも美しくて読みやすいのが特徴で、快適にブラウジングを楽しむことができます。タブブラウジングと広告のブロック機能も搭載しiPhone、iPod touch、iPadなどのアップル製品にも採用されています。

Google Chrome

Googleが開発した軽量・超高速が特徴のブラウザです。使い勝手の良さが良く、着実にシェアを伸ばしているブラウザです。読み込み速度がとても早く、どんなページでもサクサク表示することが可能です。カスタマイズ性も高くて幅広い環境に対応したブラウザです。

Opera

ノルウェーで開発されたブラウザです。広く採用されているブラウザであり、androidといったスマートフォンなどに使われています。OSもWindowsだけでなく、LinuxやUnixなど、ほぼすべてのパソコンで利用することができます。

IE Microsoft Edgeの違い

IE Microsoft Edgeの違い

Windows10にはIE11がインストールされていますが、標準ブラウザーとして「Microsoft Edge」が搭載されています。IEを長年使ってきた人のブラウザの変更は、機能や使い勝手で選ぶ人もいますが、Windows10でも「IEがあるならそっちを使う」という人も多いと思います。

レンダリングエンジン

IEとEdgeは、異なるレンダリングエンジンでWebページを表示しています。html5など最新の技術が利用されたWebページを快適に表示できる上に、拡張機能に優れています。さらに他ブラウザとの相互運用性も高められている点が、IEとの大きな違いです。

HTML5対応が100%

HTML5の新しい要素のサポート状況を評価する「HTML5 Accessibility」では、Microsoft Edgeが100%を達成しました。Microsoft Edgeは、Internet Explorerの次世代ブラウザとしてWindows 10の標準ブラウザになっており、技術サポートに期待がかかります。

IE8への対応をいつまで考えるべきか

IE8への対応をいつまで考えるべきか

まだまだ、IE8への対応を考えて、コーディングを気をつけていますが、IE8への対応をいつまで考えるべきでしょうか。

プログレッシブ エンハンスメント

最新のモダンブラウザでは高機能を活かした表示をして、古いブラウザでもそれなりに表示することができるようにコーディングをする。
このようなWebコンテンツ制作はプログレッシブ エンハンスメント(Progressive Enhancement) と呼ばれています。

最新ブラウザでは HTML5 と CSS3 による高機能な表示を、古いブラウザ ( IE8 や IE9 ) でもそれなりに使えるサービスを提供する、といった制作方針です。

IE8 と IE9 のシェアはあわせて 7%

パソコンでのシェアでは、日本国内での IE8 と IE9 のシェアはあわせて 7% ほどです。

古いブラウザで利用できて、安全が高いWebサイトを制作するというのは、時として相容れません。
両立することはできませんから、選択が必要です。

対応としては1.HTML5のタグにCSSを設定しないことや、2,html5.jsを使用して、ライブラリを組み込むことによって、IE8 未満でも HTML5 の新要素が認識されるようになるので対応は可能といえば可能ですが、
IE8のサポートは終了するけど、IE8を使わない人がいないわけではないので、念のため最低限は対応するか、安全性を考慮して切り捨てるか、選択するする必要があるのかとも思いました。

固定ページのパーマリンクを投稿名.htmlにする

WordPressのパーマリンクのカスタマイズをご紹介します。
WordPressは動的にページが生成されますので、URLには「.html」が付きません。
が、疑似的につける方法があります。

アクションフックを使って、デフォルトのパーマリンクを上書きします。
下記をfunction.phpに記述しましょう。

カスタム投稿を使っている場合には、下記のプラグインも有用です。
Custom Post Type Permalinks

IEでWebフォントを表示させる

IEでWebフォントを表示させる


サーバ上にフォントをアップロードすることによって、閲覧者のPCのブラウザで扱えるようにすることで、PCの環境に左右されないで、フォントを表示させることが可能です。これをWebフォントといいます。
ですが、フォントの形式によって、注意すべき点があります。

IEでのフォント形式は.eot形式のみ

それは、InternetExplorerが認識できるフォントは.eot形式であることです。
また、この.eot形式はIE独自のものなので、FirefoxやGoogleChromeなどのモダンブラウザでは認識できません。

もし、TTF形式のフォントをWebフォントとして用いた場合、GoogleChromeとIEでは以下のように表示されるフォントが異なってしまいます。

そこで、フォントを変換してくれる便利なサイトを紹介します。
otf to eot converter
https://everythingfonts.com/otf-to-eot

otfファイルをeotファイルに変換してくれるので、とても便利です。

IE8 対応コーディング

IE8 対応コーディング

対象ブラウザがIE8以上の案件がまだまだ多いですね。
IE7対応を考えなくても良くなってコーディングはしやすくなりましたが、「IE8」でもまだまだ使えないプロパティが多いです。
そこで今回は、「IE8対応のポイント」をまとめます。

HTML5に対応していないこと

HTML5のサイトでhtml5shiv.js IE8に読み込ませて対応する。
ですが、html5shiv.js を使った方法では、 HTML5要素をレイアウト崩れしないようにしてくれるのですが、あくまでもそれだけです。

opacityのバグ

opacityのプロパティを設定すると背景が濃くなってしまったりするケースがあります。
IE8のopacity操作には注意が必要です。

background-sizeが設定できない

IE8 では未対応なので対応させる為には jQuery プラグインなどを使用するか、imgなら100%指定が可能なのででposition:absolute;で設定する必要があります。

「:last-child」や「:nth-child(n)」が使えない

:first-childは使用可能なので、:first-child+*などcssの書き方を変えて、対応するしかありません。