javascript+CSS - お手軽もんたメソッド : 404 Blog Not Found
2007年03月30日03:30 カテゴリLightweight Languages javascript+CSS - お手軽もんたメソッド もんたメソッドも高校の学習指導計画書に乗ったそうですし、ここらで高校生どころか中卒でも簡単にもんたメソッドをお届けするのもよかろうかと思いまして。 実践例 痛いニュース(ﾉ∀`):【ＴＢＳ捏造疑惑】 ＴＢＳ社長ら「不二家報道、捏造というのはどうか」「みの氏の『不二家、廃業しろ』は励ましの言葉」より拝借 みの氏は不二家報道の翌日の番組冒頭で、不二家について「もうはっきり言って、廃業してもらいたい」と言い放っているが、ＴＢＳは「『廃業を覚悟して不退転で臨んでください』という励ましの発言だったのでは」としている。 レシピ まずは以下のCSSを用意しておきます。お好みにあわせてカスタマイズしておいてください。 <style> div.mino { borde
相性の良い色を自動でピックアップしてくれる「ColorBlender」
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
id名、class名の最近の自分の傾向
以前に「もう、class名やid名で悩まないんだからっ！！」というエントリーを書いたのだけど、自分がよう使うid名とclass名のまとめと、その辺の理由付けをしてみよーかなぁと思った。 後、idとclassの使い分け絡みもちょっと書くかも。 こーいう内容を書くと反応が怖かったりするけど、ソレもまた勉強なり。とか思って自分なりの今の考えを書いてみようと思います。 先に言っておきますが、コレから書く事が正解とかこう付けるべきって解釈はしない感じでお願いします。 コイツはこう考えてるんだ。くらいで読んでいただければ幸いです。えぇ。 全体を囲む際によく使うかなっていう系 #page idでコレをつける事が最近多いです。 wrapperとかwrapを使わないのは、脳内がサランラップに犯されているからっていうやる気の無い理由もありますが、「このサイトのこのページ。」なんだからpageがしっくり来たなぁ
サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE
ページの見かけを決めるCSSについていろいろなデザインが今までありとあらゆる場所で検討されてきましたが、今度はそのCSSを時間帯によって切り替えるという方法です。朝なら朝っぽいCSSで、夜なら夜っぽいCSSを使うというようにして、いろいろと応用が利きそう。 詳細は以下の通り。 Katgal.com: New and Improved このアイディアをさらに延長したアイディアが以下にあります。 nicholasjon.com :: Time Sensitive {1/14/2007} 上記サイトでは以下のような感じで時間だけでなく、天気によっても変わっていけばおもしろいというように提案しています。 はれ くもり 夜
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 リンクの上にマウスを乗せ
MTの投稿画面にCSSカスタマイズ可能なプレビュー機能を追加するGreasemonkeyスクリプト - F.Ko-Jiの「一秒後は未来」
プラグインで既にあるのかもしれませんが、Movable Typeの投稿画面にプレビュー機能がほしいなと思って、プレビュー機能を追加するGreasemonkeyスクリプトを作ってみました。ただそれだけでは面白くないので、プレビュー・エリアのCSSをカスタマイズできるようにしました。 これを使えば、わざわざ確認画面で表示を確認する必要がなくなります。さらにCSSをカスタマイズできるので、ブログで表示したときの見栄えを再現することも可能です。 使い方 スクリプトはこちら(MT3.21で動作確認しています。MT3.3ではどうですかね？) MT Preview (mtpreview.user.js) このスクリプトをダウンロードして、@includeのURLを自分のMT投稿画面のURLにあわせて修正してからインストールします。 インストールしてMTの新規エントリー投稿画面を開くと、本文と追記のテキス
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
サイトのCSSを見たままリアルタイムに編集するツール色々:phpspot開発日誌
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
Web デザイナーに求めたい 5つのこと | WWW WATCH
趣味として Web サイトを作っている場合は置いといて、仕事として Web サイト制作に携わる Web デザイナーであれば、今後、最低限これくらいは押さえといて欲しいなということをえらそうに書いてみます。 個人的にスキルが 「デザイン」 よりも 「コーディング」 に偏っている傾向があるので、内容的にはコーディングに関係する話が多くなっているかもしれませんけど...... 1、DTP 脳からの脱却 DTP の延長で作られる Web サイトデザインの中にはフォントサイズやテキストの量が決め打ち前提で作られているデザインも少なくありません。それが悪いとは言わないんですけど、現在の Web 制作においては、CMS を始めとした他のプログラムとの連動やアクセシビリティを念頭に、柔軟性のあるデザインが求められます。 自分の思い描いたとおりにデザインをコントロールしたいという気持ちはわからなくはないので
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
CSS のコメントの書き方コレアレ
CSSもHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。 僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。 /* ------------------------------ Header ------------------------------ */ div#header { } . . /* -------
Japanese Traditional Colors
桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお
CSSなタブインタフェースを簡単に作成できる「CSS Tab Designer」:phpspot開発日誌
OverZone Software - CSS Tab Designer CSSなタブインタフェースを簡単に作成できる「CSS Tab Designer」。 次のようなタブインタフェースをプログラミングの知識一切なしで簡単作成できます。 Windows 98/ME/2000/XP/2003で動作するスタンドアロンアプリケーションです。 関連エントリ CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例 CSSベースのクールなフォーム、サンプル集 オンラインで動く、色, CSS, robots.txt, .htaccess等のジェネレーター色々 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
WordPressの超クールなテンプレート集:phpspot開発日誌