HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
» Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた : akiyan.com
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた 2007-10-01 別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。 目次 適用前、適用後 適用前 適用後 解説 Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。 2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。ユーザースタイルシートの内容は以下の通り 調整 全体の横幅 750px化 全体を中央揃え フッターリンク左右の余白調整 非表示 右カラム全部 ロゴ
MOONGIFT: » HTMLを解析してCSS生成「html2css」:オープンソースを毎日紹介
CSSで便利だと感じるのは構造を階層化できる点だが、逆にきちんと構造化しておかないと欠点にもなりかねない。別な所で定義した名称と重複してしまい、どうもうまくいかないという経験がある人も多いはずだ。 まず現状どういった構造になっているのか、それを把握する所からはじめてみよう。それが分かればうまく構造化できるはずだ。 今回紹介するオープンソース・ソフトウェアはhtml2css、HTML文書を解析してCSSファイルにするソフトウェアだ。 html2cssはclassやid、そしてタグの構造を解析して、それをCSS形式で出力してくれる。これを見てみると、CSSのネストした構造がどの位深いのか良く分かる。無駄な点があればそれも見えてくるだろう。ソースとしてファイル、文字列またはURLを利用できる。 最上位がhtml bodyからはじまるので、大抵ネストは深くなるだろう。だが、そこから不要なものは抜き
MOONGIFT: » ついに登場！CSSフレームワーク「Blueprint」:オープンソースを毎日紹介
誰かがきっと作ってくれると思っていた。 prototype.jsのようなライブラリを利用するのは、便利な機能が多いという事もあるが、各ブラウザ間での相違を吸収してくれるという点も大きい。 その点において、CSSもまた各ブラウザ間での表示の差異が大きい。そこで試してみたいのがこれだ。 今回紹介するオープンソース・ソフトウェアはBlueprint、ブラウザ間の描画差異を吸収して簡単にマルチカラムを実現してくれるCSSライブラリだ。 Blueprintはヘッダ、コンテンツ、サイドバー、フッターのようなテンプレートをクラス指定するだけで簡単に作成できる。デフォルトのフォーマットはリセットされているので、ブラウザ間の違いが出るマージンやパディングの差異も吸収してくれている。 また、印刷時のCSSも用意されている。これを使えば印刷時やプリンタ経由でのPDF作成時に綺麗なものが仕上がるようになる。今後の
CSSデバッギングツール１０選:phpspot開発日誌
Man with no blog : CSS Debugging Tools - Gary Barber Seems lately that we are now starting to get a good spread of CSS and JavaScript (DOM Scripting) debugging tools available. CSSデバッギングツール１０選。 便利な各種ブラウザ用CSSデバッギングツールがまとまっていました。 XRay - ブックマークレット登録後、ページ内をクリックで情報を表示 YSlow - 先日Yahoo!がリリースしたパフォーマンス測定＆アドバイスツール (for Firefox) Dust-Me Selectors - 不要なCSSを調査して表示してくれるFirefox拡張 Web Developer - おなじみ、CSS用に便利機能を提
Firebug - Web Development Evolved
Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of
HTML/CSSの構文チェックができる便利な無料ツール『bkhvalid』 | P O P * P O P
窓の杜で紹介されていた「bkhvalid」を使ってみました。HTML/CSSの一括構文チェックができるツールです。 » 窓の杜 – 【NEWS】ローカルやWebサイト上の複数HTML/CSSを一括して文法チェック「bkhvalid」 ひとつ上のウェブサイトつくりを目指している方には便利ではないでしょうか。正しいコードで誰でも更新できるようなサイトを目指したいですよね。 以下に使い方を簡単にご紹介。 ↑ 起動したらチェックしたいファイルを追加していきます。フォルダを指定して追加したり、ドラッグ＆ドロップで追加可能です。 ↑ 全部追加したら右上のアイコンをクリック。解析開始です。 ↑ 下に警告がずらずらと。そこをクリックすると該当ファイルにジャンプ、その場で編集できます。 ↑ 警告されたい項目を細かく指定できます。 ↑ 画面は縦に並べることも可能。 自分が作ったサイトなどをチェックしてみると次
フリーのCSSエディタいろいろ:phpspot開発日誌
Free CSS Editors : lxpages.com blog Style sheets are a very powerful tool for the Web site developer. フリーのCSSエディタいろいろ。 海外圏にはいろいろとCSSエディタが存在するようですね。 CSS Tab Designer Balthisar Cascade CSS Editor CSS Stylesheet Editor EclipseStyle BHead - Meta Tags & CSS Generator Redbox13 CSS-editor StyleSpread <oXygen/> CSS Editor CSSEdit CSSED CSS Editor for Eclipse JustStyle CSS Editor Style Assistant 日本で最もシェアの多
ブラウザ上で簡単にCSSを作成できる「Sky CSS Tool」:phpspot開発日誌
Sky CSS Tool ・ky CSSallows you to create CSS classes almost without using manuscript code. ブラウザ上で簡単にCSSを作成できる「Sky CSS Tool」。 このツールを使えば、CSSのプロパティを詳しく覚えていなくても簡単にCSSを組み立てることが出来ます。 CSSを少ししっていれば、スピーディかつ、直感的に分かりやすい方法でCSSを完成させられるでしょう。 使い方は、(1) 左のボックスから、編集したいCSSのセレクタ(body等)を選択します。 そして、(2) 右上のFontやTextをクリックして編集したいプロパティを選択します。すると、(3) 右下のウィンドウに設定ボックスが現れるので個別に設定していきます。 この流れでプロパティを設定していき、最後に右上の方にある「CSS Code」をク
ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」:phpspot開発日誌
Parallax Background with Javascript and CSS ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」。 一見なんの変哲もないサイトのように見えて、スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。 スクロールバーをつまんでゆっくりページをスクロールしてみてください。 雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえると思います。 JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節しているようです。 凄く面白いなぁ、と思ったのですが、この方法を応用することで、新たに面白い効果を作ることができるかもしれませんね。 訪問者への驚きの要素として実装してみると面白いでしょう。 サポートブ
フリーのWEBデザイン5テンプレート集:phpspot開発日誌
Free Design Templates | Smashing Magazine Free design templates don’t have to be unattractive, inaccurate and boring. Smashing Magazine にてフリーのWEBデザインテンプレート集が紹介されてました。 デザインを1から作るのは面倒だ、という方には嬉しいテンプレート集ではないでしょうか。 CSSでうまくHTMLデザインされたものもあり、そういった面も気になる人にも便利。 以下、サイトごとに色んなデザインテンプレートが紹介されています。 Free CSS Templates Art for the web TemplatesBox Template Monster TemplateNavigator CoffeeCup Effex-Media Entheos De
フリーのCSSテンプレート＆テンプレート配布サイトまとめ:phpspot開発日誌
Free CSS Layouts And Templates | Smashing Magazine As a web-developer you don’t have to re-invent the wheel all the time.フリーのCSSテンプレート＆テンプレート配布サイトまとめ。 いろんなXHTMLテンプレートやレイアウトのためのCSSテンプレート集。 サイトデザインに役立ちそうです。自分にあったサイトを探して開発を効率化させましょう。 (X)HTML- and CSS-Templates Open Source Templates OSWD OSWT Maxdesign CSSplay Tinderbox Changingman Mollio Six Shooter Media Yahoo! UI Library: Grids CSS CSS Design Templ
PDFやEXE、CSS等ファイルのフォーマット別アイコン集:phpspot開発日誌
忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」 次の記事 ≫：各種CMSの無料レンタルができる「CMS Square」 Iconize Textlinks with CSS - pooliestudios Links are fun, but sometimes we don't know where they take us. With this little CSS technique a user can identify a link by it's icon, kind of. This whole thing was inspired by the "Showing Hyperlink Cues with CSS" article of Ask the CSS Guy. PDFやEXE、CSS等ファイルのフォ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テキスト表示設定をウェブ上でシミュレーションできる『CSSTYPE』 | 100SHIKI
CSSベースの超クールなナビゲーション集:phpspot開発日誌
最初に指定しておくと便利なCSS | Tech de Go
フリーで使えるCSSレイアウトのテンプレート配布サイト:phpspot開発日誌