CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
フリーのフォントで最強は何よ:哲学ニュースnwk
2011年02月22日14:20 フリーのフォントで最強は何よ Tweet 1： ケズリス(中部地方)：2011/02/20(日) 17:14:38.72 ID:NsTw1bOu0 膨大な異体字を含む漢字約8万字を収録したフリーのTrueTypeフォント「Tフォント」 明朝体・ゴシック体・楷書体の漢字を各78,675字収録 http://www.forest.impress.co.jp/docs/review/20110218_427596.html 「Tフォント」2011-01版 「Tフォント」は、膨大な異体字を含む78,675字を収録した 明朝体・ゴシック体・楷書体のTrueTypeフォント。 Windowsなどに対応するフリーソフトで、現在国産OS開発プロジェクト “TRONプロジェクト”のうち、文字コード の管理および普及促進を行う機関“TRON文字収録センター”の Webサイ
日本語で読めるPhotoshopチュートリアル集 まとめ | 日刊ウェブログ式
Photoshopのチュートリアルというと英語が多いですが、日本語の方がサクサク読める（私の場合）ので、日本語で解説してくれているチュートリアル集をまとめてみました。 フォトショップでつくるキラキラに輝く人物の作り方 フォトショップでリアルな炎を出しながら走るバイクの作り方 フォトショップで夕日に輝く幻想的なライティング効果を作る方法 映画のタイトルロゴのような光と文字を描画するPhotoshopチュートリアル フォトショップでキラキラに輝く背景画像を作る方法 布地テクスチャーにペイント フォトショップでキラキラに輝くライティングエフェクトをつくるチュートリアル Photoshopで六角形のキラキラに輝く背景画像をつくる方法 フォトショップでオーロラが輝く地平線に太陽が沈む様子を描く方法 基本的な光の作り方2 基本的な光の作り方3 Photoshopで美女の画像に効果を入れる方法 フォトシ
[JS]jQueryのプラグイン100選 -2010年総集編
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
実例から学ぶ、写真画像を使ってウェブデザインに奥行きを与える方法
ウェブページの背景やヘッダに写真画像を配置して、デザインにさらに奥行きを与えた素晴らしいサイトをSix Revisionsから紹介します。 Excellent Examples of Using Photos in Web Design ウェブページの背景に写真画像を効果的に配置 背景に写真画像を使用すると、奥行きとスペースと共に、ウェブサイトに付加的なビジュアルエレメントを与えることができます。注意する点は写真のクオリティです。クオリティが低いものや魅力的ではない写真画像を使用すると、ウェブページの見栄えは悪くなるでしょう。写真画像はクオリティが高く魅力的であれば、種類は問いません。それは本当にウェブサイトを際立たせることができるでしょう。
WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ | 日刊ウェブログ式
フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 追記: 2010/12/04 グラデーション追加/リンク切れチェック Photoshop Gradients Nice photoshop gradient set Download Source Web 2.0 Photoshop gradients Download Source Ultimate Web 2.0 Gradients - FREE Download Download Source 黄金比グラデーション・白銀比グラデーション | DesignWalker Download Source 日本の伝統色グラデーションファイル | DesignWalker Download Source
ウェブデザイナーのためのjQuery集「jQuery for Designers」 - ネタフル
jQueryとは、Wikipediaでは「JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ」と説明されています。そのjQueryをデザイナー向けに、主にウェブデザイナー向けだと思いますが、まとめているのが「jQuery for Designers」です。 Easy、Medium、Hardというカテゴリ分けの他、検索もできるようになっています。 ビデオによるチュートリアルの他、デモを試したり、寄せられたコメントを読むことができるようになっています。 英語なのでパッと見分かりにくいかもしれませんが、デモを見るとどんな機能なのか分かりやすいですね。 例えば「Fixed Floating Elements」は、画面スクロールしてもフォーム部分（Elements）が固定される、というものです。 （via swissmiss）
SEO導入失敗例と事前に頭に入れておくべき事 | パシのSEOブログ
SEOを実施する事により「検索順位アップ ⇒ アクセスアップ ⇒ コンバージョンアップ ⇒ 売上アップ」という具合に進む事が理想的ですが、検索順位やアクセス数はアップしたものの、コンバージョンや売上はアップしなかったという事や逆に下がってしまったということもよくある事です。 そこで、SEOを導入するにあたり、失敗しない為の注意点をまとめておきます。SEOは順位を上げる所までで、その先はWebコンサルの仕事でしょという話もありますが、今回そういったものは考えない事にしておきます。 １．検索エンジン重視のサイトで問合せ数が激減 検索順位を上げる為には検索エンジンに好まれるようなサイト作りが必要になってきますが、実際にサイトを見るのはユーザです。しかし、内部SEO対策を実施する場合、どうしてもユーザの事を忘れがちになってしまいます。 SEO対策だけのサイトなんて大嫌い。おかしな再リニューアル オ
よりリッチで、よりフレンドリーになったウェブデザインの現状 -2010年のトレンド
The Current State of Web Design: Trends 2010 下記は記事の意訳と実例をいくつか抜粋したものです。元記事では他にも多数の実例が紹介されています。 はじめに ウェブデザインとは移り変わりが激しい業界です。他のすべての芸術的な表現とまったく同じように、ウェブデザインは絶え間なく、そして驚くほど早いスピードで進化を遂げてきました。 そして現在、私たちはウェブデザインの黄金時代を経験しているところです。それはこれまでのところ、少なくとも最も良い期間です。主要なブラウザで利用できる新しいツール（CSS3, HTML5, 埋め込みフォントなど）、自由に利用が可能な多くのリソース、デザインコミュニティなど、ウェブのスタンダードの信頼性が高いサポートを持っています。 私たちはより良いインタラクションなデザインや審美的なデザインを見ています。そして同様に個人的で魅力
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
【CSS】CSSレイアウト時のIE6対策まとめ | バシャログ。
Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」 いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。自宅では Dreamweaver4 と Fireworks4 です。エヘン。 世間では HTML5 や CSS3 の話題も増えてきた今日この頃ですが、実務では相変わらず IE6 との格闘が続いています。 ただ、長年さんざん IE6 対策に取り組んできたこともあり、今ではそれほど IE6 を意識してコーディングすることもなくなりました。 今回は IE6 をターゲットに含めた CSS レイアウトで気をつけたい点をまとめました。 基本ですが、おさらいまで。 大前提 大前提として、IE6 は標準準拠モード
[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ
現在、Firefox, Safari, Chromeで利用できるCSS3グラデーションの表示サンプルと指定方法のまとめをDynamic Driveから紹介します。 CSS Library:CSS3 Linear Gradients 下記は各ポイントをピックアップしたものです。 CSS3グラデーションの基礎知識 CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。 Firefox 3.6+ Safari 2+ Chrome CSS3グラデーションの対応エレメントは、下記の二つです。 background background-image CSS3グラデーションの指定方法はmoz系（Firefox）とwebkit系（Safari, Chrome）で異なり、下記のようになります。 moz系
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2010年のロゴデザインのトレンド -2010 Logo Trend Report
[JS]jQueryのプラグイン33+1選 -2010年11・12月
新着記事
ヴィンテージ感がいい感じのテクスチャ色々:phpspot開発日誌
CSS2.1とCSS3のプロパティが見やすくまとまったチートシート
http://www.designwalker.com/2010/05/css3.html
新着記事
