Chrome Canary

Chromeには4つのバージョンが存在しています。

Chromeは安定版、開発版、Canary版の3つがあります。開発版には「dev」、Canaryには「canary」がバージョンにつきます。

Chrome Canaryだけが、安定版であるChromeと同じPCにインストールできるようになっております。
なので、開発時のチェックとして使えます(最新のブラウザでWebページがきちんと動作するか、同時にスマホとパソコンの見た目を見たりすることができます)

本実装はされていませんが、検証に利用できる、試験運用的な機能がたくさんあります。
これらの機能は、本機能として実装される可能性もありますが、機能自体が消去されたりします。

検証に便利ではありますが、高確率でバグに遭遇したりすることがあり、描画がうまく表示されないことや、画面が落ちたりなど)。ですが、最新のバージョンで改良されたエンジンや、最新のデザイン、それに最先端のWebのAPIを体感できます。

CSS3ジェネレーター

CSS3をweb制作に取り入れたくても、cssを書くのが難しいと感じるときもあるのではないでしょうか。
そんな場合はCSS3ジェネレーターを利用してみてはどうでしょうか?

視覚的にcssを確認できるので、自分の行いたい調節も簡単にできます。
自分の作りたいデザインを作成して、コピー&ペーストでスタイルシートに貼るだけです。
ジェネレーターを使って、CSS3で制作してみてください。

CSS3 Generator

多くのCSS3のスタイルを作成できます。
数値を指定していくだけで作成できるジェネレーターです。
css3のスタイルのborder-radius, box-shadow, text-shadow, RGBA, @font face, multiple columns, resize, box-sizing, outline, transition, transformを生成できます。

使用されているフォントを調べる

ウェブサイトでも多くのフォントが使われており、画像に使用されているフォントが知りたい時があります。
そんな時「WhatTheFont」というサイトがあります。

1.フォントの画像ファイルをサイトにアップロードする
2.「Continue」を選択して解析

上記の流れだけで、フォントの種類を判別してくれるので、とても便利ですね。

使い方は
「WhatTheFont」にアクセスして調べたい画像を選択し、「Continue」を押すと、アップロードされます。
次の画面で画像にしようされている文字を認識し、テキストで表示されます。

入力が終われば、Continueボタンを押して、次の画面で文字フォント候補が複数表示されます。

wpカテゴリ毎の記事一覧を表示する

WPでカテゴリ一覧表示する

カテゴリ一覧表示をしたい時のPHPコードを記述します。
<?php
$categories = get_categories();
foreach($categories as $category) :
?>
<div><a href=”<?php echo get_category_link( $category->term_id ); ?>”><?php echo $category->cat_name; ?></a></div>
<ul>
<?php
query_posts(‘cat=’.$category->cat_ID);
if (have_posts()) : while (have_posts()) : the_post();
?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>
<?php endforeach; ?>

「get_categories();」は全カテゴリの情報を取得して「foreach」で出力しています。
「query_posts(‘cat=’.$category->cat_ID);」はループ中でカテゴリのIDをクエリに設定して、そのIDのカテゴリに属する記事を出力します。

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

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

グリッドレイアウトを制作するのにあたり、コードを作成してくれる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を追加します。

$(function(){
	$("ul").append("<li>example</li>")
});

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

$(function(){
	$("ul").prepend("<li>example</li>")
});

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

$(function(){
	$("ul").before("<div>example</div>")
});

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

$(function(){
	$("ul").after("<div>example</div>")
});

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

$(function(){
	$('ul').wrap('<div class="hoge"></div>')
});

参考:
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の標準ブラウザになっており、技術サポートに期待がかかります。