今よりちょっとだけクオリティを上げるために。
執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？ よく分か
コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
Web DeveloperでCSSとHTMLを編集してみよう - builder by ZDNet Japan
前回の「Web Developerでウェブサイトを構築・デバッグ」に引き続き、今回もウェブ開発向けのFirefoxアドオン「Web Developer」の基本機能を紹介する。 CSSやHTMLの編集 Web Developerの大きな特徴に、ファイルそのものを書き換えることなくHTMLやCSSの編集結果をプレビューできるという機能がある。 例えばCSSの場合、ツールバーから［CSS］−［CSSを編集する］を選択すると、現在のページが使用しているCSSがサイドバー（表示場所は変更可能）に表示される。これを変更し、上部の［適用］アイコンをクリックすると、その内容が表示中のページに反映される。 元に戻すには［リセット］アイコンをクリックすればよい。もちろん、編集したCSSをローカルのファイルに保存することもできる。
【13日開催】CSS Nite shuffle に呼ばれたので何か喋ります - やまもといちろうBLOG（ブログ）
告知を忘れていた… イベントに出ることになりまして、てれてれと話します。完全なギョーカイノリにならないように気をつけないと。 たぶん、IT業界はwebも含めもう全体的に頭打ちだし、デザイナーだからかっこいい、geekだからcoolで凄いというようなweb2.0(笑)な価値観のままIT系起業バンザイとか思ってる馬鹿は早よ死ねという話をするかもしれないし、ギョーカイ裏方話みたいなとこから潰れそうなwebサービス会社は資金調達なんかせんでいいから潰れろというような本業含みのネタを語るかもしれません。SEOとか含めサービス単体の話はあんましないかな？ CSS Nite shuffle http://shuffle.cssnite.jp/vol02/ しかし、イベントとかに出ると肩書きが切込隊長になるのはいい加減どうにかしないとならんなあ。以下詳細。しかもこぴぺ。 イベント名：CSS Nite sh
CSSでテキストにグラデーションをかける方法 - HUBLOG
Jan 22 CSSでテキストにグラデーションをかける方法 Design , Web / No Comment / No Trackback / 目からウロコ。テキストの上に半透明な画像を被せることで、テキストの形式のまま文字にグラデーションをかけることができるというTips。 CSS Gradient Text Effect コードを見てみると、何のことはないです。ただ、日本語フォントに対してこれをやっても美しく見えないんじゃないかと。Lucida GrandeやTrebuchet MSみたいなフォントを太字にしてやれば、相当かっこいいんですけどね。引用した上図などサンプルはこちら。あまりにも違和感が無さすぎで率直に驚きです。 限りなく詐欺師に近い豚 今更ですがfaviconを設置してみたよ Trackback Trackback URL: http://musicmaniacs.net
[CSS]スクリプト無しで実装するドロップダウンメニュー -Skeleton dropdown menu
Skeleton dropdown menuは、スクリプト無しで実装するCSSのドロップダウンメニューです。
よくある質問っぽいののjQueryを使ったサンプル｜CSS HappyLife
2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 （単純にボクがこのスタイルが一番見やすくて好きってだけだったり） サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル （サンプ
CSSのみでクールな階層メニュー作成サンプル:phpspot開発日誌
Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css CSSのみでクールな階層メニュー作成サンプル。 次のようなカッコいい階層メニューのサンプルが公開されています。 クールなのでそのままサイトに組み込んで流用できそう。 IE5.5 , IE6, IE7, Firefox, Opera 等で動作。 関連エントリ CSSでちょっと変わっているピル風の形をしたナビゲーションを作成 セクシーに動作するスライドメニューバー実装JSライブラリ クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」 CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」
Re:「blockquote」を「“”」で囲ったようなデザインにする方法＠ネタフル | Creazy!
光栄な事にネタフルさんに昨日のTipsエントリーを取り上げて頂きました。 ネタフルのエントリーでもやっていますが、「blockquote」つまり引用している部分を「引用符（“”）」で囲ったようなデザインにする方法が紹介されています。 via: [N] 「blockquote」を「“”」で囲ったようなデザインにする方法 いつも通り Livedoor Reader でRSS読んでたらいきなり自分のエントリーがでてるんだもん、そりゃ驚くっちゅー話で。 ネタフルさんのエントリーがUPされた13時過ぎくらいから急にアクセスがあがり、はてブもいつもより多め。 これが、噂に聞いたネタフル砲か（ネタフルキャノンと読んだ方が格好良いか？） ああ、ありがたや、ありがたや。 ついでに、余計なお世話だと思いますがネタフルさんの引用（blockquote）を勝手に添削してみます（！） HTMLは非常にシンプルにbl
scrollovers
お金を稼ぎたい場合は、スマホアプリを利用したお金を稼ぐ方法がおすすめです。 おすすめの理由には手軽さをあげることができます。 外に働きに出る必要がなく、いつも使用しているスマートフォンやタブレットから稼げるので、誰でも簡単に行うことが可能です。 特別なスキルを要しないところもおすすめのポイントだと言えます。 多くの案件が誰にでもできる容易なものとなっており、特別な能力がない人でもできるものが多いです。 アンケートに答えるなどの簡単なものが多いため、未経験者でも不安なく始めることができます。 好きなときに稼げることも魅力です。 暇なときは集中して活動することができますし、忙しいときには作業をする必要がありません。 自分のライフスタイルに合わせて稼げるため、バイトのように面倒だけれど行かなければならないといった苦痛を覚えることがないです。 楽して稼ぎたい人や気楽にお金を稼ぎたい場合には、この方
29 Different Google Ads Style
6- Blue & Black Titled Full Banner View Code 7- Black & Blue Titled Full Banner View Code 8- Black Gradient Full Banner View Code Hal Banners 9- Black Horizontal Gradient Half Banner View Code 10- Orange Striped Oval Half Banner View Code 11- Subtle Blue Half Banner View Code 12- Simple Slanted Black Half Banner View Code Button 13- Black Diamond Button View Code 14- Shadow Box Button View Code 15
テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック:phpspot開発日誌
Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法１ 次のDIVがあったとして、 <div class="resize"></div> 次のＣＳＳを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更
CSSとJavaScriptによってFlashで作ったようなクールな動くメニューを作る:phpspot開発日誌
Devthought - Guillermo Rauch’s Blog CSS Javascript power. Fancy menu Let me introduce you to Fancy Menu CSSとJavaScriptによってFlashで作ったようなクールな動くメニューを作る。 マウスを合わせるとアニメーションしながらマウス位置にカーソルが移動するメニュー。一見、Ｆｌａｓｈだなと思ってみてみるとこれがCSSとJavaScriptで出来てます。 実装がやや難しいのですが、どうしてもCSSとJavaScriptでやりたいという場合は参考に出来ますね。 関連エントリ CSSベースの超クールなナビゲーション集
画像置換でメニューを作る
画像置換でメニューを作る 前回の画像置換で説明した通り、画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。 ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。 今回は要点を説明しながらメニューを作って行きたいと思います。 ひとまず、完成系のサンプルに目を通しておいてください。 ベースとなる(X)HTMLソースは以下のようにします。 <ul> <li class="ajaBtn"><a href="/ajax/">Ajax</a></li> <li class="amaBtn"><a href="/amazon/">amazon</a></li> <li class="cssBtn"><a href="/css/">css</a></li> <li class="htmBtn"><a href="
CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE
CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ
Vista時代のWebページは新フォントの「メイリオ」に - 日経トレンディネット
Windows Vistaでは、従来のWindows標準フォント「MSゴシック」「MS Pゴシック」に代わるフォントとして、「メイリオ」が搭載されている。「メイリオ」は英語で「Meiryo」と表記されるように、日本語の「明瞭」に由来している。文字の見栄えが“明瞭”になるというのが新フォント開発の意図だ。 XP時代のフォントとVista時代のフォントの違いは明白だ。例えばデジタルArenaの記事は、コラム本文をWindows Vistaの「Internet Explorer7」で見ると以前のXP時代と同じように、本文は「MS Pゴシック」で表示される。ところが、日経BP総合のページからリンクでたどるニュースやコラムの本文の文字をよく見ると、「MS Pゴシック」ではなく、文字がくっきりと明瞭になった「メイリオ」が使われていることが分かる。 ▲ デジタルArenaのサイトの記事やコラムのフォント
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ*ホームページを作る人のネタ帳
http://blogs.itmedia.co.jp/kokoroe/2007/05/post_19da.html
CSSベースの超クールなナビゲーション集:phpspot開発日誌