地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le
たったワンクリックであらゆるサイトのJavaScriptやCSSを圧縮＆最適化してくれる『zbugs』 | 100SHIKI
これはすんごく便利・・・。 zbugsを使えば、ワンクリックであらゆるサイトのCSSおよびJavaScriptを圧縮してくれるようだ。 もちろん何パーセント圧縮されたかとか、どのファイルがどれだけ小さくなったかといったことの詳細も教えてくれる。 さらに圧縮したファイル群をまとめてダウンロードすることも可能だ。 サイトをつくったあとに、さらなるスピードアップを図るのにいいだろう。インターフェースも素敵でシンプルなので一度試してみるといいですよ。
[Think IT] 第2回：助けて、CSSエディタ！ (3/3)
【即実践！HTML+CSS】私流、ツールの選び方 第2回：助けて、CSSエディタ！ 著者：まつむらよしあき 公開日：2008/04/11（金） タダの魅力と実力 フリーウェアやオープンソースのソフトウェアの魅力は、Web制作の勉強を始めたばかりでいろいろ試したい、貧乏学生でお金がない、やる気や情熱はあるけど初期投資は最小限に抑えたいという「コスト重視派」の方から、プログラミングの経験が豊富で自分でカスタマイズできる腕がある「玄人派」の方まで、気軽に触ってみることができることでしょう。 筆者もWebサイト作りははるか昔の大学時代に、遊び感覚でテキストエディタを駆使して作成したのが始まりです。その後本格的に仕事としてWeb制作を始めるにあたって、「Dreamweaver」などの有料アプリケーションを使ってみたら、その便利さから手放せなくなりました。 しかし、有料だからといってすべてのアプリケー
CSSを柔軟にデザインできるフレームワーク·CSScaffold MOONGIFT
CSScaffoldはPHP+CSS製のオープンソース・ソフトウェア。CSSは柔軟に設定ができるため、つぎはぎに設定を付け足していくと管理が煩雑になっていく。はじめこそネストした設定も適切に行うのだが、徐々に乱れていくとやたら長いクラス名ができたり、設定が複数箇所に点在したりすることになる。 元CSSファイル そうなるともう管理しきれるものではない。また最初から作り直したい気分になることだろう。そんな状況を防ぐためにも使ってみたいのがCSScaffoldだ。CSScaffoldはPHPを使ってCSSを生成するソフトウェアで、標準のCSSの書き方に加え、便利な機能を付け加えてくれる。 まずネストだ。CSSの設定をネストして書けばブラウザからのアクセス時には展開して表示する。複数階層でも問題ない。そして定数も便利だ。定数を定義して、数式を用いて内容を変更できる。例えばpaddingの設定を一律
【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net
Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日本語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に
シンプルなテキスト・HTMLエディタ Crescent Eve (フリーソフト)
Crescent Eve はシンプルなエディタです。 こだわりの基本機能とHTML編集機能を持っています。 【雑談】 ある日のふとした疑問 ～ HTMLを書く道具 ～ ある日、メモ帳等のテキストエディタでHTML書いている人が意外に多いことに気がつきました。 「多機能で優秀なHTMLエディタは沢山あるのに、なぜかな」 「もしかして、軽くてシンプルなSDI形式のHTMLエディタが求められているのだろうか」 「よし、作ってみよう！」 「あくまでシンプルに、テキストエディタとしても使えるようにして、タグはキーボードから自然に入力補完できるようにしよう」 「手作業でタグを打ち込んだら間違いが出るから、文法チェック機能をつけよう」 「文字コードの自動認識は、絶対失敗しないようにしよう」 ・・・というような考えから Crescent Eveを開発することにしました。 その後 公開以来、多くの方に好評を
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
ハイクオリティサイトのワイヤーフレーム分析 (1) 他サイトのワイヤーフレームから学べること
ワイヤーフレームとは「ページの大まかな見取り図」のことであり、この部分にはこのコンテンツ、というページ構成を示したものである。Web制作の案件では、比較的上流の工程でワイヤーフレームづくりを行い、その後にビジュアルデザインやインタフェース制作、(X)HTML+CSSページへの落とし込みの作業に入る。 コンテンツそれぞれをどこに配置するかという判断、いわゆる「情報アーキテクチャ」は、限られたスペースを有効活用するのに重要なだけでなく、ユーザービリティ(使いやすさ)やファインダビリティ(発見しやすさ)にも大きく関わってくる。ユーザー中心デザイン(User-Centered Design: UCD)という言葉を借りなくとも、Webサイトはユーザーに使ってもらってはじめて意味があるのであって、運営者とユーザー双方の満足が、車の両輪のようにサイトを動かし、発展させるのである。 特にトップページのワイ
スタイルシートサンプル CSS Samples - eWeb
スタイルシートは、見栄えやレイアウトなどの表示に関する指定を行うものです。スタイルシートを用いるとHTMLだけでは表現できない様々なデザインが可能になります。 サンプルソースはご自由にカスタマイズなどをしてお使いください。
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index
so-network.biz
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
IDEA * IDEA
IDEA * IDEA
〜CSSテクニック〜 メインメニュー
CSS Spriteを活用しよう - DesignWalker