CSSで角丸を実現する
ブロック要素に角丸を使うことができれば、デザインの幅も広がります。でも画像を使うのは面倒だし・・・悩んでいていろいろ調べてみたらCSSのみで角丸を実現する方法が書いていたんです。ということで、備忘録代わりにここに記すことにします。いやー、スタイルシートって奥が深い。こんな方法思いつかなかったよ。でも<span>の中は空っぽなのでHTMLの文法的にはアウトかもしれませんね（汗 HTMLソース <div id="text-sample"> <!-- フタ --> <span class="rtop"> <span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span> </span> <!-- フタ --> <!-- 中身 --> <p class=
Collection & Copy - 画像 CSSを使った角丸
画像 + CSSを使った角丸 技術 wg:Introducing DomCorners 上記ページを読んだ。 Nifty Corners 作者はCSSのみで角丸を実現する記事を書いている。当ブログでも、これを利用している。 その上で異なるアプローチの角丸を紹介している。 上のような画像を、1コマずつずらしながらCSSを利用して貼りこんで行く。 対象となる領域のHTMLは以下。 <div id="box"> <b class="btop"><b></b></b> content here... <b class="bbot"><b></b></b> </div> CSSの定義は以下。 b.btop, b.btop b, b.bbot, b.bbot b{ display: block;height: 10px;font-size: 1px; background-image:url(rc.
Ajax,Apache,CSS,CVS,HTML,JS,Perl,PHP等のチートシートまとめ:phpspot開発日誌
Smashing Magazine Blog Archive Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby… Ajax,Apache,CSS,CVS,HTML,JS,Perl,PHP等のチートシートまとめが紹介されてます。 チートシートって印刷して貼っておくとほんとに便利でお世話になってます。 Ajax関連 What’s Ajax? Cheat Sheet - PDF Prototype Dissected - Cheat Sheet PNG scriptaculous Combination Effects - Cheat Sheet - PDF Apache関連 Apache Cheat Sheet Apache 1.3 Quick Reference Card - free quick reference cards - PDF htacc
Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
Amaya Home Page
Welcome to Amaya Translations: be, da, de, es, fr, gr, hi, hr, is, ja, kr, pl, ru, sr-latin, sr-cyrillic, th, uk, vn, zh-hans, zh-hant W3C's Editor Amaya is a Web editor, i.e. a tool used to create and update documents directly on the Web. Browsing features are seamlessly integrated with the editing and remote access features in a uniform environment. This follows the original vision of the Web as
フォームのtextareaをより使いやすくすることが出来る「Textarea tools」:phpspot開発日誌
Textarea tools Small collection of tools for use with textareas (or input fields). フォームのtextareaをより使いやすくすることが出来る「Textarea tools」。 上記画像では、右端にはるボタンを押して、textarea部分のリサイズや、フォントサイズの変更が可能になっています。 使い方は非常に簡単で、必要なJavaScriptファイルとCSSファイルを読み込んでおき、textarea に class="resizable" の属性を付与するのみとなっています。 掲示板なんかにこの機能を組み込んでおけば親切ですね。
WEB開発者のためのWEB開発ツール:phpspot開発日誌
Brennan’s Blog Blog Archive Web Development Tools for the Power Developer Over the past few years the available tools for web development have become quite powerful. As Firefox became more popular the number of useful extensions grew quickly. WEB開発者のためのWEB開発ツール、ということで色々紹介されてます。 バリデータ(Validator) - フォーマットが正しいかチェックするツール HTML/XHTML Validator - W3C CSS Validator - W3C Feed Validator (RSS and Atom) Jav
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」 - GIGAZINE
「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CSSデザインの試行錯誤が楽になります。 詳細は以下から。 rendr http://gregtaff.com/rendar2.html greaseMonkey版はキャッシュが有効な場合に、ローカルキャッシュのHTMLファイルを直接書き換えてリアルタイムプレビューするというモノになっています。 インストールするにはgreaseMonkeyをインストールした状態で上記ページの「greaseMonkey
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
我的春秋: タグクラウドのマークアップ
ボタンを背景でロールオーバー