cssに関するlevaのブックマーク (69)

  • Apple Developer Connection - iPhone for Web Developers - iPhone向けWebアプリケーションとコンテンツの最適化

    iOS 18に向けた準備 コントロール、ウィジェット、ライブアクティビティを使用して、iOS上で快適に動作しシステム全体においてより多くの箇所に表示される、高度にカスタマイズされたアプリを作成できます。Apple Intelligenceの導入により、優れたパフォーマンスとプライバシー機能を兼ね備えたパーソナルインテリジェンスをアプリに取り入れ、新しい機能を提供することができます。 Apple Intelligence Apple Intelligenceは、iPhoneiPadMacの中核にパワフルな生成モデルをもたらすパーソナルインテリジェンスシステムです。ユーザーのコミュニケーションや仕事、自己表現に役立つ、驚くような新機能を備えています。 Writing Tools(作文ツール)はシステム全体に組み込まれており、文章の書き直し、校正、要約に利用することができます。Image P

    Apple Developer Connection - iPhone for Web Developers - iPhone向けWebアプリケーションとコンテンツの最適化
    leva
    leva 2007/09/27
    既に有志が訳してくれていたけど、公式の日本語版が出た。
  • Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex

    Latest topics > CSS3セレクタとXPathでの表現の対応表 宣伝。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行まんがでわかるLinux シス管系女子の試し読みが可能! « getElementsByなんちゃら の代わりにXPathを使う Main Mozilla 24 » CSS3セレクタとXPathでの表現の対応表 - Sep 13, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード(textshadow.js)を教材にして拡張機能開発のノウハウを解説していくシリーズ。 XPathをノードの検索に活用する方法を紹介したけど、肝心のXPathが書けなきゃ意味がないわけで。でもXPathって、ノードセットがどうとかノードテストがどうとか軸がどうとか修飾がどうとか、い

    leva
    leva 2007/09/14
    XPathってちゃんと習ったこと無かったな。何でもできるけど、何もできないので入門記事として参考に。
  • JavaScript でタブ切り替え UI を実装する | WWW WATCH

    先日、タブ切り換えタイプの UI を、JavaScriptCSS で簡単に実装する仕組みを探していて (他力願)、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScriptCSS で簡単に実装する仕組みを探していて (他力願)、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな~なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 : Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと

    JavaScript でタブ切り替え UI を実装する | WWW WATCH
    leva
    leva 2007/09/12
    将来的には:target疑似クラスが担うべきだと思いますが、その過渡的手法としては便利で最適な解決策だと思います
  • ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択

    miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。 もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、 div#content { ~ } div#content div.entry { ~ } div#content div.entry p { ~ } div#content div.entry ul { ~ } こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。 コピペするにしても、 コピー元にカーソルを移動 範囲選択してコピー コピー先にカーソルを移動 ペースト という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、id

    leva
    leva 2007/09/11
    ナツカシス、昔構造化エディタつかってたのを思い出すよ。気になるのはオーバーヘッドがどれくらいなのかと、構造と独立したプロパティが増えると逆に見づらくないか?という点かな。
  • 全てのブラウザで同じに見える必要はないし、それは不可能で間違ってる - 氾濫原

    だって、ブラウザには、画像を表示できないブラウザとかがあるんだもんね。IE も Fx も Opera も、そういう意味では同じような違いで、Fx では先行実装を使って段組になってよみやすくなっていたり、IE ではのっぺりだったり、そういうのがあっていいはず。なのに、一個の表示に統一しないといけないみたいな、わけわかんないのに縛られたりする。別に違ってていいと思う。 あと Web と紙は違うから、違うアプローチの仕方 (可変レイアウト) をすべきなのに、紙と全く同じスタンスで作るから、問題になる。いろんな UA にむけてデザインするのがウェブデザインじゃないの? 今のウェブデザイナーは殆どウェブデザイナーじゃないよね。そんなだから「ウェブデザイナー(笑)」みたいになるんだ。 しかし、ウェブデザイナーでもなんでもない自分がごたごたいうのもおかしいので、あれなんだけど、最近どうも甘く考え気味 (

    leva
    leva 2007/08/30
    それはそうだけど、メンテの問題と見え方が違うとビジターが混乱するのではないかという不安があるんだよね。個人的にはCSS3をフルに使ったダイナミックな(?)デザインをしてみたいけども。
  • デザイン実験室 > Introduction

    Hobby > デザイン実験室 > Introduction Introductionというほど大げさなものではないですが,CSSを使うときに引っかかりそうなポイントをまとめました.というよりも私が引っかかったものを覚え書きとしてまとめたというのが正確なところです.主にInternet Explorer(Trident系)で読み込むときの注意(注意しなければならないほどバグが多いとも言えますが)を中心に扱っています. IE6のfloatプロパティバグ IE6では背景色の設定された要素内(A)に,floatプロパティの設定された要素(B)がある場合,要素Bが消えるというバグがあります.以下の定義型リストでは2つのdd要素にそれぞれ「floatのみ」と「float+position」の2つのプロパティをstyle属性で指定しています.IE6の場合は「"float: left;"のみを指定したD

    leva
    leva 2007/08/09
    条件付きコメントのこういう使い方(ifからelseを引き出す)はちょっと面白いですね。See also http://www.keynavi.net/ja/bugh/comments.html
  • マークアップエンジニアはどこへ向かうべきか(を考えてたらカッとなって LL の資料公開) - IT戦記

    はじめに このエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけ ライブドア & サイボウズラボの数人でお昼ご飯をべにいって、いろいろ話しながら考えたことを昼後に Twitter に書き込みました。 濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS ではもうこれ以上すごいと呼ばれる人なんて増えないと思う。 http://twitter.com/amachang/statuses/191256222 「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。 http://twitter.com/amachang/statuse

    leva
    leva 2007/08/08
    オンブラウザのプレゼンツールに足りない物は大きく2つあって、1つ目がエフェクト(amachangさんが解決)、2つ目はデスクトップアプリと遜色のないスライド作成ツール。個人的にはニーズは後者にあると思いますです。
  • CSSハック | BLOG × WORLD ENDING

    This domain may be for sale!

    leva
    leva 2007/07/06
    いわゆるバッドノウハウ。
  • 論理構造を文脈に読み換えながら class 名を考える - 我的春秋

    POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. posh - Microformatsより 基的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。(ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。) 例によって

    論理構造を文脈に読み換えながら class 名を考える - 我的春秋
    leva
    leva 2007/05/31
    class名はsection-h構造風味に、id名はこれで行こうかな。
  • 印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]

    約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ?」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th

    印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
    leva
    leva 2007/04/22
    正直、見にくいのでbefore/after疑似要素でリンク先URIを展開する必要はないと思う。それよりも文頭に文書自体のURIを印刷しておいて、そのURIの恒久性を保障して参照してもらう方がより妥当かなと思います。
  • @-moz-document - 徒委記

    @-moz-document 書式 例 利用可能なブラウザ 参照 Mozilla / Firefoxでサイト別にCSSスタイルを適用することを可能とする@-moz-documentルールについて。 書式 W3CのMLに投稿された、per-site user stylesheet rulesより。 docrule ::= "@-moz-document" S+ url-list "{" S* ruleset* "}" url-list ::= url-item ( "," S* url-item )* url-item ::= ( "url(" | "url-prefix(" | "domain(" ) URL ")" S* S は空白類。( [ \t\r\n\f]+ ) domain() の場合、括弧内に入るのは、正確にはURLでなくホスト名(ドメイン名)になるようです。 例 以下のような

    leva
    leva 2007/03/24
    Stylishの記述用にメモ
  • www.welie.com -- patterns in Interaction Design

    Pattern library All patterns are listed here. It's quite a bunch of them, but I have tried to group them meaningfully. User needs Patterns that meet a direct need of the user. Navigating around· Accordion · Headerless Menu · Breadcrumbs · Directory Navigation · Doormat Navigation · Double Tab Navigation · Faceted Navigation · Fly-out Menu · Home Link · Icon Menu · Main Navigation · Map Navigator ·

    leva
    leva 2007/03/20
    CSS ウェブデザインパターン
  • IE-winで透過PNGを利用する方法 - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 サンプルは透過PNG。テキストの上に、透明度36%の矩形を重ねてある。IE6とFirefoxでは見え方が違うことが解るだろうか? 左がIEで見た場合、右がFirefoxで見た場合。バージョン6までのIEはPNGのアルファチャンネル(半透明)に対応していないので、普通に使うと透過部分が灰色っぽくなり、期待はずれな結果に終わる。IE6でも透過PNGを表示するには、次のように記述する。 #overlay { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizi

    leva
    leva 2007/03/16
    ページ背景に透過部分を含む画像をかぶせたい時などにお手軽で重宝します。
  • YouTube Video Only

    Style with custom themes! Change the background, color, schemes, fonts, and more! Share your own themes too!

    YouTube Video Only
    leva
    leva 2007/03/15
    シンプルだけど華麗なCSSの使い方だなぁ。
  • 8 web menus you just can't miss

    Driving on Florida’s toll roads doesn’t have to be stressful. You can easily pay your tolls without stopping at toll booths or having a prepaid account. The Toll-By-Plate system lets …

    leva
    leva 2007/03/13
    ナビゲーションメニューの例。マークアップは<div><ul><li><span>Menu</span></li></ul></div>
  • CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ

    text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS

    leva
    leva 2007/03/09
    コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。
  • Pure CSS menus

    Navigation Skip navigation. Site search Site navigation How To Create home Tutorial links CSS tutorial This uses just CSS 2 to turn nested lists into a working menu and does not use any JavaScript (except in IE 5.5-6 on windows where I use the proprietary DHTML behaviours, because its CSS handling is not good enough to work this menu without script) This works in Mozilla 1+, Netscape 7+, Opera 7+,

    leva
    leva 2007/03/04
    XHTML+CSS(IE6は+DHTML)で作るポップアップメニュー、Web Standardに沿っていてかつ幅広いブラウザに対応するものはこことYahoo! UI以外はあんまり無いはず。
  • フッターとかの区切り『|』のサンプル4種|CSS HappyLife

    フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home|アバウト|イラスト|BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。(サンプルに寄ってid名とか変わりますが) <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home| About| Gallery| Blog 普通にhtmlに|を記述しているのでソースは当然下記のように。 <ul id="samp

    フッターとかの区切り『|』のサンプル4種|CSS HappyLife
    leva
    leva 2007/02/22
    :before擬似要素の代わりにこうやって隣接セレクタ使うのも一つの手。最初にborder-left使うのは思いつかなかったなー。
  • Simple Round CSS Links ( Wii Buttons )

    Now you can style both <a /> and <button /> in this super easy and light-weight solution Hedger Wang You may not get a Wii, but you can still get your own Wii Buttons with only 2 tags + 1 image + one CSS file . At least it's tested and compatible with IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9. HTML For Anchor : <a class="button" href="?d=-1"><span>yout text</span></a> For Form Button : (yo

    leva
    leva 2007/02/15
    んー。かわいいんだけど、こういう意味的によくわからんコードが「流行のCSSデザイン」と言って流通するのにはちょっと抵抗アリ。
  • willmayo.com » CSS Speech Bubbles

    Account Suspended This Account has been suspended. Contact your hosting provider for more information.

    leva
    leva 2007/02/12
    吹き出し製造ライブラリ。コメントとか記事要約、あるいはなにか叫びたいときに使うと良い。