CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～
全画面をスライドとして使うダイナミックなナビゲーションを構築する2KB以下の軽量jQueryプラグイン
全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いてくれますのでプレゼンテーションやポートフォリオ、キャンペーンなどに使うのも面白そうです。 Awesome Scrolling Navigation 全画面がスライドします。背景に画像を指定しているのでテキストなんかも入れられるっぽいですね。試していませんけどこれは結構使えそうです。 動作確認していただくと分かるかと思いますが、左上のロゴ部分も微妙なスライドをして視差効果を出しています。 マークアッ
2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ
少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基本的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考えるウェブデザインでこれは気をつけたいの35のポイントデザインQRコードの作り方非デザイナーのためのデザイン
込められた意味がよく分かるクリエイティブなロゴいろいろ
Webデザイン意味を持たせる 以前記事にした、Amazonや Fedexなど、意味を込められ、 作られたロゴを参考にしたい と思って個人的に探しました。 インスピレーション向上に。 以前記事にした、Amazonや Fedexなど、意味を込められ、 作られたロゴを参考にしたい と思って個人的に探しました。 ロゴ制作をされてる方にも 少しは参考にして頂けるかと 思ってシェアしたいと思います。 こういうロゴを作りたい、というロゴ集です。どのロゴでも意味はあるのでしょうが、どの国の人が見ても、意味が分かるようなロゴはなかなか凄いですよね。インスピレーション向上になります。冒頭の「以前の記事」もよかったら。 City Cliq 指とボタンでcliqを表現しつつ、指とボタンが「太陽と街(city)」にも見えるように工夫されています。 City Cliq Birdie バーディとバードをかけて、アイアン
今更CSS-TRICKSのCODE SNIPPETS GALLERYのWeb制作Tips集が便利なことに気が付いた
今更ですが海外記事の紹介 でよく見かけるCSS-TRICKS が構築しているページの中に CODE SNIPPETS GALLERY というページがあるのですが、 これが個人的に激しく便利な 事にようやく気が付きました・・ 何度も見てるブログなのに今まで全く気が付かなかったです・・・知っておくと地味に便利なcssやjQueryのスニペットをさらっと書いてまとめてくれています。 色分けされてて見やすいです。 探しやすい 見出しはスライドし、各スニペットの題名がリンクになっています。 例・IEにもcss3の回転を実装させる css3のtransform: rotate（回転）をIEでも実装する方法とか。 Text Rotation 例・4行のコードでドロップダウンメニューを作るjQueryコード ドロップダウンメニューを作れる簡単なコードとか。 Disable Parent Links in
シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ
個人的にミニマリズムなサイトが 好みなので自分用の備忘録です。 情報が多いので若干まとめのまとめ という感じになっていますがご了承 下さい。シンプルなサイトを作る時に 役立ちそうなリソースやギャラリーを。 内容はシンプルなアイコン、インスピレーション向上に必須なギャラリー、相性の良さそうなフォントなどになります。 白黒のサイトを作りたいときに役立つもの、という記事と被りますがご了承下さい。 Iconic モノクロながら可愛らしい感じのアイコン103個セット。 Iconic picol 汎用性の高そうなアイコンセット。 picol Token 色々なところで紹介されてるアイコン。28万人中10万人はDLしてるみたいです。人気ですねー。 Token Brightmix icon set EPSファイルで配布されるアイコンセット。丸型にほぼ統一されてます。地球のアイコン凄いですね。。 Brigh
「Photoshopでこの人を正面に向かせてください。」と言ってしまう気持ちが分かるくらい凄い加工技術
Webデザイン写真の加工技術 「Photoshopでこの人を正面に 向かせてください」と言ってし まう気持ちが分からなくもない くらい凄い加工技術をご紹介。 以前話題になった記事でWebクリ エイターボックスさんの「クライアントからの ムチャぶり迷言集」の中にあった 「Photoshopでこの人を正面に向かせ てください」と言ってしまう気持ちが 分からなくもないくらい凄い加工技術 をご紹介。 「Photoshopでこの人を正面に向かせてください」というのはなかなかアレなお願いですが、「Photoshopならなんでも出来るんでしょ？」と、知らない人なら思ってしまうのはそれだけ今の加工技術が高いと認識してるのでしょうね。 たしかにこれ見たら「なんでも出来るんだ」と思ってしまうかもしれません。むしろ何故出来ないかが理解できないのかも。。。 人を正面に、という話題を取り上げたので人を使った加工アー
配布する全てのフリーフォントがクリエイティブ・コモンズの「FREE FONTS」
配布しているフォントが全てフリーで ライセンスがクリエイティブ・コモンズ ライセンスのFREE FONTSをご紹介 致します。数が大量では有りませんが、 全部CCライセンスなのはありがたい。 FREE FONTSでは配布しているフォントは全てクリエイティブ・コモンズライセンスで提供されています。 計60ものフォントがCCライセンスで無料で手に入ります。配布されているフォントもクオリティ高め。 汎用性も高そうです。 クリエイティブ・コモンズに関してはフッターに明記されています。↓ フォントは著作権に困る事が多いので助かりますね。以前GPLライセンスのフォントの記事も書きましたので宜しければ合わせてご覧下さい。 FREE FONTS コメントやTwitterで有料のフォントが含まれていると教えていただきました。真相を件のサイト管理者に問いますのでご利用はお控え下さいます様お願いいたします。大変
cssの情報・まとめ
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of
IE6対応・cssのみでマウスオーバー時に噴出しも実装するナビゲーションKntL-Pager
JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウンロードも可能です。 jsや画像を使用せず以下のようなページネーションを実装可能です。 KntL Pager うーん、凄い。これでcssオンリーとは驚きでした。一応ページネーション（ページ送り）のcssとして紹介されていますが、普通にユーザビリティを意識したナビゲーションとして使えそうですね。 対応ブラウザはIE6以上、Firefox1以上、chrome、opera、safariに対応との事。日本語に直してHTMLをアップしてみましたので[sexy-lightbox href=’http://kachibito.net/wp-content/uploads/2010
Webデザイン時に役に立っているもの
技術をやソフトを除いてWebデザイン時に 個人的に役になってるなぁと思うものを あげてみます。これがあるから時間短縮 できたり、自分にとって満足できるデザイン に出来たり、無いと結構困る、といったモノ。 タイトルはシンプルにしましたが、内容は「センスの無い僕をWebデザイン時に助けてもらっているもの」です。 こういったものは人それぞれだと思います。あって当たり前、基本でしょｗという方もいらっしゃると思うし、これが何の役に立つの？という方もいらっしゃると思いますので参考程度になさってください。 配色パターン 配色だけでデザインは良いものにも悪いものにもなると思っています。 カラーコードを覚えられないので良いと思う配色は必ずローカル環境にストックするようにしています。これを使って微調整をしたり、合うものが無ければオンラインのカラースキームジェネレーター等を使います。 配色は時間が掛かるのでサク
印刷して作る3Dフォントの設計図のフリーフォント・Punched Out
見た瞬間思わず膝を叩きました。 ちょっと大袈裟かもしれませんが、 個人的にこの発想は配布されるような フォントには無かったので脊髄反射的に ご紹介いたします。 そのフリーフォントはPunched Outという名のフォントです。以下のような形をしています。 一見可視性も低く使いどころが無いように見えますが、このフォントは以下のように使います。 組み立てます。これは3Dフォントの設計図でプリントアウトして利用します。フォントでこの発想は面白いですね！ 折れ線部分が太くなってしまいますがご愛嬌と言うことで・・この形に限ってはフォントに色づけして、印刷、組み立てて写真を撮ればPhotoshopで頑張らなくても素敵な3Dタイポグラフィーが出来そう。汎用性も高そうなフォントですし、こういうのもっと出て欲しいですね。 こういったクリエイティブで柔軟な発想が出来るようになりたいものです。 商用での利用は基
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
ネットで出来るだけ物を安く買える方法やサイトを調べた - かちびと.net
今更ながら不況なのでネットで 安く買えるEコマースサイトや 通常よりも安く済ませる方法などを 調べたのでシェアしたいと思って エントリします。殆ど既出な情報です。 ほんとにお金が無い時には役に立たない 情報かも知れません。 仕事の過程で物入りな時に探した情報です。何かと出費を抑えたい時代。少しでも安く済ませられるよう、激安ネットショップやモノを安く買う方法等の情報をまとめました。順不同です。 生活応援通販のヒラキ とにかくココは絶対に紹介したいサイト。金額が異常なほど安い。スニーカー180円で有名なサイトです。他にも雑貨80円均一、女性用ブーツ780円などなど。配送はクロネコヤマト等なので送料が高いという罠も無し（多分）。更に5250円以上で送料も無料とまとめ買いにもうってつけです。 生活応援通販のヒラキ ロヂャース ディスカウントで有名なロヂャースのオンラインショップ。実店舗同様、安い商
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
フリーのフレーム型Photoshopブラシ・29種
写真などのフレームが必要に なって探した時に見つけた 素敵なフレームのフリーの Photoshopブラシを備忘録 としてシェアしたいと思い、 エントリーします。 deviantart内から探しました。29種類あります。ライセンスにお気をつけ下さい。 Brush Pack – Grungy Frames 01 軽めのグランジ風なフレームに木の葉や花を添えたフレーム。 Brush Pack – Grungy Frames 01 by =MouritsaDA-Stock Letter Frames オールドエレガントタイプのフレーム。女性に好まれそう。 Letter Frames by ~Lileya Brush Pack – Vintage Frames 02 使いやすそうなヴィンテージ風のフレーム。 Brush Pack – Vintage Frames 02 by =MouritsaDA-
背景などに使えそうなフリーの和風テクスチャ素材いろいろ
知人に頼まれて和柄の テクスチャを探していましたが その過程でいくつか見つけた素材 をメモしておきます。フリーの 日本風なテクスチャ素材です。 背景に使えそうなものが中心です。 何に使ってもその方の自由ですけどｗ 多少はメモしていますが、著作権はご自身でお確かめ下さい。 Japanese Textures 15種類の和壁、和紙や漢字が書かれた紙のテクスチャ。商用利用可。 Japanese Paper Textures 14 High-Res Japanese Paper Textures 和風の高品質なテクスチャ14種類が個人商用ともに利用可能。 14 High-Res Japanese Paper Textures Fireworksの和風・伝統紋様テクスチャ 商用OKの和風パターンテクスチャ。 Fireworksの和風・伝統紋様テクスチャ Paper Texture Pack 02 か
cssのテクニックなどを学びたい時に見ておきたい12サイト
cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か
フリーの細字フォントいろいろ
少し前に細字のフォントが 必要だったので色々と探して ましたが、その時に見つけた 素敵なフリーの細字フォントを 備忘録的にまとめてエントリーします。 全てフリーですが、ライセンスは 異なりますのでご確認下さい。 細字フォントはいろいろと使い勝手が良いので重宝しますね。全部で17あります。 Caviar Dreams Caviar Dreams Boulder Boulder Champagne & Limousines Champagne & Limousines LT Oksana LT Oksana 和田研細丸ゴシック 和田研細丸ゴシック Two Turtle Doves Font Two Turtle Doves Font Vloderstone Vloderstone Lelim Pro Lelim Pro Nioubes Nioubes Scriptina Scriptina T
Web制作者がクライアントにSEOの知識を与える事は自社の評判管理になり得る
記事内容は一種の評判管理にうぶ毛の生えたような内容です。ネットリテラシーが高い方々には参考にならないと思います。。。多くの方が既知である事は存じていますが、敢えて記事にしてみようと思います。一言にWeb制作者と言っても、Webデザイナーさん、プログラマーさん、SEO屋さんなどなど様々です。どの専門であれ、せっかく獲得したクライアントが悪徳なSEO業者に騙される事で、そのクライアントからの信頼を失いかねません。特に悪徳なSEO業者さんの営業電話は非常に多く、被害が減少する傾向には無いのが現状です。 記事を書く切欠になったのは以下の記事。 SEO業者からの営業電話対応マニュアル それでも悪徳SEO業者に騙される人は減らない 営業電話の多いSEO業者さんの皆様に対応するマニュアルとそれでも被害者が減る事は無い理由が主な内容です。特に同感したのが以下。 それでも悪徳SEO業者に騙される人は減らない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
