GosuBloggerのエントリー「39 Tutorials for making unique buttons on Photoshop」から、ユニークなボタン画像のPhotoshopのチュートリアルをいくつか紹介します。 39 Tutorials for making unique buttons on Photoshop
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
どうも、IEだけ異なる挙動をするので、検証してみました。vertical-align 属性のキーワード指定の初期設定が違うだけなのかと思いきや。 p要素 mac 版 firefox windows 版 IE ありゃりゃ、line-height に指定した 180% が無視されてるよ。 h1〜h6要素も同じと思われる。 li要素 mac 版 firefox windows 版 IE li要素でも、やはり line-height が無視されている。背景の方は問題ない。 td要素 mac 版 firefox windows 版 IE td要素内は大丈夫なようだline-height は大丈夫だが、vertical-align:top と bottom の位置がtext-top/text-bottomと同じになってしまっている。これは初期設定?(でも、ボーダーの dotted が・・)。 lin
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました! display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
Chandoo.orgのエントリーから、条件付き書式を利用して、エクセルのデータを見やすくする5つのテクニックを紹介します。 Learn Cool Microsoft Excel Conditional Formatting Tricks テーブルの横列・縦列をハイライト 条件付き書式を使用したガントチャート セル内に配置するグラフ ミスやエラー・データ欠落などのハイライト表示 直感的に把握できるデータテーブル [ad#ad-2] エクセルデータは、Chandoo.orgのエントリーの一番下からダウンロードできます。 テーブルの横列・縦列をハイライト テーブルのデータを見やすくするために、横列・縦列を交互にハイライト表示にします。 ハイライトにするテーブル全体を選択します。 メニューより、[書式] - [条件付き書式] を選択。 「数式」を選択し、「=MOD(ROW(),2)=0」を入力し
シート 新規ワークシート挿入 ワークシートの削除 新しいブックのシート数の設定 シートの切り替え ワークシート名を表示する関数 ブック内のシート一覧の表示 複数のワークシートを選択 シートの非表示/再表示 シートの保護 シートの保護2 関数 セル内の文字数カウント [関数貼り付け]ダイアログボックスを表示 数式パレットを使って引数を入力 関数の引数を表示 成績を5段階評価するには? 全角/半角スペースで分けられた姓名を関数を使って姓だけを取り出す 全角/半角スペースが混在している場合には 全角/半角スペースで分けられた姓名を関数を使って名前だけを取り出す 全角/半角スペースで分けられた姓名を[区切り位置]で姓と名前に分ける 分けられた姓と名前を関数でくっつける 住所を都道府県名とそれ以降に分けるには? セル内の単語数カウント 検索条件に完全一致するセルの個数カウント 検索条件に部分一致する
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
Roshan's Blogのエントリーから、URLをリダイレクト・リライトする場合の.htaccessの設定例を5つ紹介します。 5 useful url rewriting examples using .htaccess 「product.php?id=12」を「product-12.html」でアクセス 「product-12.html」を「product.php?id=12」にリライトします。 <textarea name="code" class="html" cols="60" rows="5"> RewriteEngine on RewriteRule ^product-([0-9]+).html$ product.php?id=$1 </textarea>
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
テキストに透明・光線・グランジ・立体化などのエフェクトを使用したPhotoshopのチュートリアルの紹介です。 各サイトは英語ですが、キャプチャ付きで作成方法を説明しています。一部のサイトでは、PSDファイルをダウンロードできます。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない! [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの?とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
林 岳里(はやし たけさと) アドビ システムズ株式会社 ビジネスデベロップメントマネージャー 作成日:2008年3月19日 ユーザレベル:初心者, 中級 製品:Dreamweaver CS3 はじめに Dreamweaverを長年使っている方でも意外と知らないまま過ごしている機能があります。その機能を知らなくても自力で解決できるかもしれませんが、もし知っていたらどうでしょうか?なんども検索/置換を繰り返すことや、数多くあるHTMLファイルのコードを手作業でフォーマットする面倒な作業から解放され、他の作業に時間を割けるようになります。Dreamweaver使いのための「生活に役立つ小ネタ集」と題して、コードのフォーマット、検索/置換、正規表現を解説します。なお、[検索および置換]で行う設定はクエリーの保存/ロードで読み書きできます。サンプルに同梱している拡張子.dwrのクエリーファイル
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら?(テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます) 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン+テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事
9か月前、最初にSEOmozで働き始めたとき、僕はウェブ制作のインターンだった。それ以前の経験といえば、コードを書いたことがあるくらいだった。 SEOmozに参加してから、それこそ何百時間もかけて、いろいろな分野の知識を広げていった。特に、定番のSEO手法と中小企業向けの実務は力を入れて勉強した。この間投稿したSEO初心者のためのチェックリストは、僕が新しく手に入れた知識の結晶なんだ。 原点に立ち帰るために、SEO技術のトラの巻の母体となるべきものを丸1日かけてまとめてみた。このトラの巻は、ブログ記事として読むよりもPDFで印刷して読んだ方がいいよ(ブログ記事は印刷しにくいからね)。 ダウンロードする前に内容を確認できるように、簡単な説明をしておくよ。じゃあね! SEO基本技術のチートシート(トラの巻)――表面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く