地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
PNGやPSDファイルとしてエクスポートできるグリッド生成ツール・「Modular Grid Pattern」
Modular Grid PatternはPNGやPSD形式でエクスポートできるグリッド生成ツールです。幅やカラム数を指定してダウンロードするだけ。PhotoShopのエクステンションもあるみたいですね。 Modular Grid Pattern
広告バナーを集約している「バナーデザインギャラリー」のコンテンツがなかなか充実してきましたね
ちょいちょい参考にさせていただいている バナーデザインの国産ギャラリーですが、 かなり量が充実してきましたので、改めて 拡散してみたいと思います。サイズや色で 国内外の広告バナーデザインを探せるので なかなか貴重ではないかと。 多くの方も既知のデザインギャラリーですけど・・結構参考になるし、見やすいのでより多くの方に拡散。ITキヲスクさんのWebサービスですよ。 サイズやカラーでソート出来ます。サイズは以下。 728 × 90468 × 60234 × 60125 × 12588 × 31絞り込み検索も出来るみたいですね。 評価もできる レーティング機能も付いています。黄色のヘッダのはこちらのサイトさん自身の広告ですね。 国内と海外でもソート出来ると、より嬉しいんですけどね・・でも助かってます。実装してくれました。素早い！ 数も250個近くあるので、デザインにまよったらご覧になってみては如
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家）HTMLコーディングが3倍速くなる？「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図
Web制作にあると便利な10の日本語版各種チートシート
チートシート（Cheat seat）とはカンペの事です。 まとめてシート化し、そばに置くことで その情報を何回も探さなくてもいいように した便利な発想ですが、多くのチートシートは 英語で分かり難いかも、と思ったので 日本語に変換されたWeb制作にあると 便利な各種チートシートを１０個ほど集めてみました。 SEOチートシート SEOのチートシートです。Daily SEOmoz Blogに掲載されたDanny Dover氏の エントリをWeb担で取り上げ、日本語化されています。 SEOチートシート（PDF） cssチートシート textdropさんによって日本語化されたcssのチートシートです。 これは助かります。 cssチートシート（PDF） ブラウザショートカットチートシート らばQでエントリされたブラウザ（IE、FireFox、IE7）のショートカットの チートシートでしたが、PDFファ
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sampleまぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEでも
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル
Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス
Webサイトの制作時にいつも 時間がかかるのがカラー選定 で、少し困っているのでもう少し 時間を短縮したいと思い、使って いるツールも含めていろいろご紹介。 いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。 原色大辞典 色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。 原色大辞典 colr.org 写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝しま
わずか3STEP！誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer
なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日本語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ＆ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
12000種以上のPhotoshopブラシをストックしている検索エンジン・FindBrushes
Photoshopのブラシを検索できる FindBrushesのご紹介。検索と 言うか、アイコンを探せる検索 エンジン、Iconfinderと同様で、 インデックスされたブラシを検索 する形ですが、量はかなりのもの。 目的から探せるのが検索系のいい所ですよね。FindBrushesには現在600セット以上、総計12000種以上もストックされているので覚えておくと役に立ちそうです。 シンプルな設計ですし、軽いので探すには最適かも。 カテゴリからも探せる 左上のメニューからカテゴリで探す事も可能なのでキーワードが思いつかない、という方はカテゴリで探してはいかがでしょうか。 例1・グランジ系を探したい グランジ系のブラシをお探しなら「grunge」で検索します。数は90と出ますが、ブラシはセットになっているので量としてはかなり豊富ですね。 例2・木のブラシを探したい treeで検索。検索スピード
WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる
WordPressWPカスタマイズ事始め WordPressを使っているけど、 PHP分からないし、カスタマイズ は未経験・・という方の為の カスタマイズ方法です。PHP を理解せずとも基本構造を ある程度理解すれば可能です。 WordPressを使っているけど、 PHP分からないし、カスタマイズ は未経験・・という方の為の カスタマイズ方法です。PHP を理解せずとも基本構造を ある程度理解すれば可能です。 PHP製のWordPressですので、当然PHPを理解していれば様々なカスタマイズが可能ですが、プログラミング自体まだ敷居はデザインより高いかもしれません。 でも、カスタマイズしてみたい！という方も多いと思いますので今回はカスタマイズ始めの1歩、的な内容です。 はじめにこれはPHPの記事ではありません。コピペ（ファイル間でのソースの移動など）が基本になるのでプログラマーさんからすれば
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
Tips携帯サイト構築 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認してお
国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス
最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。 順不同です。日本語が完全に通じる海外Webサービスも今回は省いて純国産のWebサイト制作に一役買ってくれそうなWebサービスをご紹介したいと思います。出来る限り高性能だったり多機能なWebサービスのみにしたつもりですが主観入ってます。 Color of Book 国産サービスで一番多用しています。AmazonAPIを使って雑誌の表紙を抜き出し、その表紙からカラーチャートを生成。アイデアが素晴らしいですね。雑誌は表紙のデザインや色で惹きつけるよう考えられている事が多いのでWeb制作時のカラー選定にかなり参考になるのでは。 Color of Book
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
