いわゆる「闇黒式引用」
これ…引用元のURIがコピペできないのはどういうわけなのか（そーす開いて探したぞ）あと対象のリンクぐらい入れて欲しい 引用元URIはCSSで自動生成しています。 blockquote:after{ display: block; content: "引用元URI: "attr(cite); color: #999; font-size: 85%; text-align: right; border-top: dashed 1px #999; } Firefox だと content された文をコピペできないぽいですが Opera なら可能です。マンセー。あと Firefox をお使いなら、引用文の上にマウスポインタを置いた上で右クリック→プロパティ(P)から引用元情報を参照できます。あとはてブユーザなら JavaScript を有効にしているはずで、それならあれこれポッ
css外部ファイル（ヘッダ、フッタ）の書き方 - OKWAVE
素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
CSS Spritesでメモリ消費量が増える！？ | Web標準Blog | ミツエーリンクス
WebサイトやWebアプリケーションの高速化のため、CSS Spritesを採用するサイトが増えてきています。 CSS Spritesは、ページで使うアイコンやロゴ、背景など、画像ファイルを大きな画像の塊にまとめ、CSS側でレイアウトを制御するテクニックです。複数の画像をまとめるため、HTTPリクエスト数を減らしことができ、高速化や負荷軽減につながるという利点があります。また、:hoverや:activeなどと組み合わせることにより、動的表現をJavaScriptなしで実現できることも、CSS Spritesが好まれている理由のひとつです。 一方で、CSSの画像置換に関連する問題や、画像の作成や配置にかかる手間など、懸念事項もあります。そんな中、Mozillaの開発者であるVladimir Vukićevićが、「メモリ消費量が増えてしまう」という問題について語っています。 To Spri
Lorelle on WordPress ? HTML, CSS, PHP, and More Cheat Sheets
If you are into tweaking your WordPress Theme or designing one from scratch, here are some HTML/XHTML and CSS Cheat Sheets you might want to add to your resources. * UPDATED * HTML/XHTML Cheat Sheets HTML Cheat Sheet HTML Tags Cheat Sheet HTML Tag and Code Cheat Sheet The HTML Source – HTML Cheat Sheet CDBurnerXP – HTML Cheat Sheet in PDF format A Simple Guide to HTML – HTML Cheat Sheet HTML Tag C
Route 477(2009-05-06)
■ [web] CSSを「ちゃんと」書けるようになりたい 僕のCSS知識はとほほのスタイルシート入門で止まっている。 borderとかcolorとかは分かる。(positionとかfloatとかはちょっと怪しい。) ちゃんと書ける、というのは、 marginやpaddingはとりあえず0にするものなのか 文字のサイズはem, px, pt, %のどれで指定すべきなのか divを3カラムに並べる方法 ブラウザの非互換を踏まないために気をつけること とかいう「常識」を身につけたい、ということだ。 なんかお薦めの本とかサイトとかありませんかね。 追記 コメント欄とかブックマークコメントで いろいろアドバイスをいただきました。ありがとうございます。 muscovyduckさん： ごく簡単なHTMLの説明 htmlとかCSSってどこで勉強すればいいんだよ - スチーム速報 ＶＩＰ id:K-Onoさ
Applerの備忘録（仮）: CSS Spriteの流派をまとめる
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
Future is mild - インターネットやMac,Windows,日常について月並みな事を
iPhone 6sに機種変更 Posted in Apple Mobile at 2015年10月05日21:11 Tweet iPhone 5からiPhone 6sに機種変更しました。色はゴールド、容量は64GB。 3年前にiPhone 5に機種変し、忙しくてiPhone 6に買い換える機会を逸しているうちに容量はカツカツにバッテリーはヘロヘロで流石に使用に難が生じ。 今回はキャリアを経由しないで、Apple StoreからSIMフリーを購入。 iTunes から復元し、SIMを差替えるだけですぐに以前の環境通り使え、QOLが著しく向上しました。 感想を箇条書きに。 でかいかと思ったら、特に問題のない大きさだった。 重いかと思ったら薄くて軽くて持ちやすかった。 Touch IDが超便利 関連エントリー Future is mild : iPhone 4に機種変更しました Tag: iPh
触覚で携帯を読む：タッチスクリーンで点字表記 | WIRED VISION
前の記事 『ボイジャー』が見た宇宙：画像ギャラリー マグレブ導入でさらに高速を目指す、日本の新幹線 次の記事 触覚で携帯を読む：タッチスクリーンで点字表記 2009年4月 3日 Charlie Sorrel 新種のタッチスクリーン技術によって、6点式点字を携帯電話のディスプレー上に持ち込める可能性がある。これによって視覚障害者は、あらかじめ若干の訓練を受けるだけで、携帯電話向けコンテンツを閲覧できるようになる。最大の利点は、この技術が既存のディスプレーで利用できることだ。 フィンランドのタンペレ大学の研究チームが、同国のNokia社によるインターネット端末『Nokia 770 Internet Tablet』を例にとり、専用ソフトウェアを開発した。このソフトウェアは、タッチスクリーンの内部にある圧電層を振動させ、縦3つ×横2つの点で、点字の出っ張りを表現する。 ユーザーがスクリーンに指を乗
CSSでグラデーションを表現する - builder by ZDNet Japan
今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 本当のデータ活用できていますか？ データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両
My Page: nth-child(n)を使う
My Page 無料で使える100M さぁ、何に使おうか？ と言っていたら4Gになっていた。（2007/11/15）気がついたのは2007/11/23 ページの最初 nth-child(n)はcss3で策定中の疑似クラスです。 まだ対応しているUAは少ないようですが、Operaはその数少ないものの一つです。 ここのカレンダーは単に数字をテーブル組みしたものです。そのtdには何のクラスも設定されていません。 <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> このテーブルにはクラスは設定してありませんが、<div class="module-calendar module">の中にあるので div.module-calendar t
Wikipediaの脚注をその場で見るCSS - by edvakf in hatena
こんな感じですかね。 .references li:not(:target){ display:none; } .references li:target{ position:fixed; background-color:yellow !important; bottom:-2px; left:220px; /* width:100%; 消した */ right:0; } .references li{ list-style-type:none; } 脚注を消すにはブラウザの「戻る」を押すか、脚注の頭の ^ を押せばいいんでないかな。 参考 CSSの:target擬似クラスによるクリックで開くフッター - 0x集積蔵
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Link Alert JS - ブラウジング支援ユーザースクリプト - wktkラボ
Link Alert JS とは 「Link Alert JS」はFirefoxのアドオンである「Link Alert」を自分なりにユーザースクリプト化したものです。 アドオン版と違って、「Link Alert JS」はユーザースクリプトなので気軽に機能のon/offができます。 Link Alertはリンク先の種類をアイコンで警告してくれるアドオンです。 例えば、PDFファイルと気づかずにリンクをクリックしたときなんか、すごく残念な気分になりますよね？このアドオンはそれを解消してくれちゃうのです。 「Link Alert JS」と「Link Alert」の違いとしては、アイコンが同時に2つまで表示できるようになった点があります。 新しいウィンドウで開き、かつ画像ファイルへのリンクである場合等は別窓アイコンと画像アイコンが表示されます。 下のサンプルで確かめてみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Brooklyn Children's Museum
Microsoft claims IE8 is 'a leap forward in web standards'
フロートとネガティブマージンまとめ:CSS | Tech de Go
My Page: iframe の代わりに object を使う
line-height プロパティ(一行の高さ) - CSS リファレンス