『Webpark JS、Ajaxなど』 の新着エントリー
-
保存版！CSS3セレクタの説明書｜Webpark weboook.blog22.fc2.com
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので簡単に説明... 続きを読む
-
人気ブログ20の共通点をレイアウトやデザインの参考にしよう｜Webpar... weboook.blog22.fc2.com
人気のあるブログのレイアウトやデザインを見ていると、結構共通点があります。共通しているということは、それぞれ重要な意味があるはずです。 例えば、超有名な以下のブログは、すべて２カラムで左にメインコンテンツがあります。 ホームページを作る人のネタ帳 Webクリエイターボックス かちびと.net ... 続きを読む
-
CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い｜Webpar... weboook.blog22.fc2.com
CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。 基本的な使い方 まず、「nth-child」と「nth-of-type」の基本的な使い方を説明します。 nth-... 続きを読む
-
CSS3だけで作ったMac Dock風のメニュー｜Webpark weboook.blog22.fc2.com
CSS3だけで作ったMac Dock風のメニューを紹介します。今までjQueryなんかを使って表現していましたが、CSS3なら簡単に作れちゃいます。再現度は高くないかもしれませんが。。 ポイントはCSS3で追加された「transition」です。これがあれば動きにあるメニューは色々作れます。 ... 続きを読む
-
透明度を表す「opacity」 と 「RGBa」の違いと使い分け｜Webpark weboook.blog22.fc2.com
ともに透明度を表す「opacity」 と 「RGBa」ですが、違いをちゃんと理解して正しい使い分けをしましょう。 対応しているブラウザ ともにCSS3ですのでブラウザによってサポートしているもの、サポートしていないものがあります。 と言ってもIE以外は問題なく対応できています。IEについてはI... 続きを読む
-
ウェブサイト作成に役立つ35のwebサービス｜Webpark weboook.blog22.fc2.com
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、きっと新しい発見があるはず。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認でき... 続きを読む
-
CSS3について知っておきたいことのまとめ｜Webpark weboook.blog22.fc2.com
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイル... 続きを読む
-
オンラインで画像の編集ができる12のサイト｜Webpark weboook.blog22.fc2.com
先日、仕事で画像を編集したいと思ったのですが、うちの会社のパソコンはセキュリティの関係でソフトのインストールができず、オンラインで画像を編集できるサイトがないか探したところ結構あったので紹介してみます。 Pixlr 日本語化されていて使いやすいです。「Open photo editor」でエデ... 続きを読む
-
サイトの「色」選びに役立つ20のツール｜Webpark weboook.blog22.fc2.com
色選びに困ったときに助けてくれるウェブツールを20個紹介します。具体的な配色アイデアが紹介されているもの、選んだ色と関連する色が表示されるもの、画像から色を抽出するもの、という感じに分けてみました。 配色アイデア タイプ 投稿された配色アイデアが紹介されているサイトです。アイデアから編集できる... 続きを読む
-
CSSからカラーコードを抜き出して表示する「CSS Prism」｜Webpark weboook.blog22.fc2.com
指定したCSSファイルで使われているカラーコードを抜き出して表示する「CSS Prism」というサイトがあったので何となくご紹介。 使い方も簡単ですし、いろんなサイトを見ていると勉強になるかも。 CSS Prism by Ryan Berg 使い方は非常に簡単、CSSファイルのURLを入力して... 続きを読む
-
古い感じがしてかっこわるいと思うコードの書き方10例｜Webpark weboook.blog22.fc2.com
ホームページを作り始めて8年近く経ち、たくさん作った方が上達するという思いもあって、今まで数多くのサイトを作ってきましたそんなサイトたちを改めて見直してみて、「何か古い感じがするな〜」と思ったコードを挙げてみます。 完全にこれがダメと言っているのではなく、個人的な好みもあるので、温かい目で見て... 続きを読む
-
2011年上半期の人気記事から分かるタイトルの付け方｜Webpark weboook.blog22.fc2.com
早いもので2011年も半年がすぎました。今年は急にアクセス数が増えて思い出に残る記事も多いので上半期のアクセスランキングを紹介します。 では、10位までの記事とアクセス元や感想などを。 2011年 上半期の人気記事ベスト10 1. CSSの知識をもっと深める30+2の小技テクニック集 これは今... 続きを読む
-
ウェブページ高速化に効果的なCSSセレクタ｜Webpark weboook.blog22.fc2.com
CSSセレクタの使い方によってウェブページの表示速度は変わってきます。 劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょう... 続きを読む
-
ウェブページの高速化のために読んでおきたいサイトのまとめ｜Webpar... weboook.blog22.fc2.com
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込... 続きを読む
-
意外と知らない!?CSSセレクタ20個のおさらい｜Webpark weboook.blog22.fc2.com
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 そもそもCSSセレクタが何かというと、スタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレク... 続きを読む
-
CSS3セレクタで1行ごとにテーブルに背景色をつける｜Webpark weboook.blog22.fc2.com
<table> <tr> <th>ブラウザ</th> <th>開 発</th> </tr> <tr> <td>Firefox</td> <td>Mozilla</td> </tr> <tr> <td>Chrome</td> <td>Google</td> </tr> <tr> <td>Inte... 続きを読む
-
IE6〜8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」... weboook.blog22.fc2.com
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6〜8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかった... 続きを読む
-
CSS3プロパティの勉強になるジェネレータ16個｜Webpark weboook.blog22.fc2.com
CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。 CSS3プロパティ全般 ボックスやテキストなど広範囲にわたって設定可能なジェネレータです。比較的有名なものが多いで... 続きを読む
-
CSSで外部サイトへのリンクの後ろにアイコン画像を表示する｜Webpark weboook.blog22.fc2.com
CSSで外部サイトへのリンクの後にアイコン画像を表示する方法を備忘録的に残しておきます。方法は色んなブログで紹介されていますが、画像リンクにアイコンを表示しない方法は決め手に欠けます。 外部サイトへのリンクの識別法 以下のようにすればリンクの後にアイコン画像を表示されます。 a { backg... 続きを読む
-
CSS3のtransitionとtext-shadowで作る様々なリンク装飾｜Webpark weboook.blog22.fc2.com
CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。 transition（時間的変化をつける） hoverなどでスタイルが変化する際、通常は... 続きを読む
はてなブックマーク
