[B! css] honeybeのブックマーク

CSSだけでradio chackboxをカスタマイズする内容ってほとんどがHTML構造気持ち悪いよね。 - nanndemoiikara’s diary

マークアップエンジニアの　　です。 CSSだけでRadioボタンの作り方みたいな内容の記事をよくお見かけしますが殆どのマークアップが気持ち悪く感じるのは僕だけでしょうか？大体が <section> <input type="radio" name="hoge" value="テストRadio" id="radio_item" checked /> <label for="radio_it em" class="radio">TestRadio</label> </section> 繰り返す様ですがコレって気持ち悪いし使いづらいと思うのは僕だけでしょうか？気持ち悪いと思う点 labelタグの使い方チェックさせる為にid属性をわざわざ振っちゃう radioボタンに紐づくtextが存在しない場合にどうする気ですか？ Tab移動意識してますか？で、気持ち悪い気持ち悪いと言っていても問題は解

honeybe 2018/01/12

長年最適な方法を探し求めていた。隣接セレクタの奴構造的に気に入らなかったんだけど他に良いやり方を思いつけずに仕方なしに採用してた。以後この方式採用する。大変ありがたい。

HTML
CSS

リンク

stroll.js - CSS3 Scroll Effects

honeybe 2012/04/16

コレはすごい！ / JS+CSSですね。いやしかしすごい。

css

リンク

これは使える！rem (root em) 単位を使用したフォントサイズの指定 - IT-Walker on hatena

寡聞につき、rem(root em)なんてフォントサイズの単位があるのを今まで知りませんでした。ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。rem (root em) というのは、﹁ルート要素︵典型的にはhtml要素︶に対する相対的なフォントサイズの単位﹂です。従来のemは、親要素に対して相対的なフォントサイズの単位でした。そのため、要素の出現位置次第でフォントサイズが変わってしまうことも多く、使いにくい場面も多々ありました。他にもフォントサイズの指定方法には、ピクセル︵px︶を用いたものがあります。が、特に今は様々なスクリーンサイズを意識しなくてはならない時代。スクリーンサイズの小さいデバイスでは全体的なフォントサイズを同時に大きくしなければならないこともよくありますが、pxを使用していると、メディアクエリなどを使ってあらゆるフ

honeybe 2012/03/23

html
css

リンク

どう考えても無茶な「CSSプログラミング」が話題に

CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は﹁Only CSS﹂。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。このコードは海外のユーザーにも大きな反響を呼びました。

honeybe 2011/06/23

OnlyCSSってマジで？

css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

honeybe 2010/06/28

css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

honeybe 2010/05/24

css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

honeybe 2010/05/21

css

リンク

CSSを使って流れるような3Dイフェクトを実現する·css-vfx MOONGIFT

css-vfxはCSS/JavaScriptによるオープンソース・ソフトウェア。Coolirisというソフトウェアはご存じだろうか。写真をタイル状に並べて、左右に流れるような操作で一覧できる。様々なブラウザ、モバイルで使えるソフトウェアだ。タイル状に並んだ写真を一気に見渡せるそんなCoolirisの見せ方はとても上品で、操作性も良く使い勝手が良い。あんなインタフェースを自分のサイトでも実現してみたいと言う希望を叶えてくれるのがcss-vfxだ。css-vfxは特別なソフトウェアはいらず、WebKitさえあれば良い。ターゲットはモバイルだ。PC版のWebKit︵SafariやGoogle Chrome︶ではうまく動かないかも知れない。iPhoneやAndroidからアクセスすれば、そのすごさが分かるはずだ。指で弾くと写真が左右に流れていく。奥行きを感じさせる作りはスピード感もあってとて

honeybe 2010/05/20

css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

honeybe 2010/05/18

css

リンク

国内初、無料で日本語のウェブフォントが手軽に利用できる「デコもじ」

手描き字・丸文字・四角い系・四角て丸い系・くずし文字・アクセント付き・へた文字系・ゴシック系・明朝系・筆文字系・筆書体系・欧文(英数のみ)・変わり種フォントなど、約80種類の「ウェブフォント」（パソコンにインストールされているフォントではなく、サーバにアップロードされているフォントを指定して自由に表示させるCSS3 Web Fontsを使った技術、このサンプルを見るとよくわかる）が利用可能なネットサービスがこの「デコもじ」です。画像や通常のFlashとは違い、ちゃんと検索にも引っかかるというのがポイントです。「ブログの見出しにあの文字が使えればいいのに！」というのを実現してくれます。ユーザー登録は無料となっており、無料で利用できるウェブフォントだけでなく、月額315円から利用できる有料サービスではさらにプロフォントとして「游ゴシック」「游築見出し明朝」「へんまろ」「トゥモローウォーク」な

honeybe 2010/05/12

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

honeybe 2010/03/02

css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

honeybe 2009/02/05

css

リンク

Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる·CSSViewer MOONGIFT

デザインが苦手な人にとって︵筆者をはじめ︶、CSSによるデザインに問題がある際に何が問題なのかを把握するのがまず難関だ。別な場所で設定した内容が関連している場合もあるだろうし、IDで指定しているのか、はたまたClassで複数指定している場合もあったりするとさらにややこしい。 CSSで困った時に役立つFirefoxアドオンそこで、現在表示されている内容がCSSではどのような設定になっているのか、それを理解する所からはじめよう。使うのはCSSViewerだ。今回紹介するフリーウェアはCSSViewer、CSSプロパティの一覧を作成するFirefoxアドオンだ。 CSSViewerをインストールするとツールメニューにCSSViewerという項目が追加される。これを選択するとマウスが乗っている項目のCSS設定値がフローティングウィンドウ上に表示される。指定した場所に赤い点線が引かれる項目は

honeybe 2008/12/27

firefox
css

リンク

IE6で閲覧すると。

hamashunさんがTwitterで、 IE6を使って閲覧すると右上に﹃アナログ﹄って出るようにしようぜ。って言ってたので、CSS HappyLifeでやってみた。ボクが出来る2008年最後の大仕事でした。えぇ。使いたい方は是非是非。ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。であ。16日のお昼頃追記ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％

honeybe 2008/12/16

おもしろｗ

css
neta

リンク

ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI

CSSとHTMLの知識は必須だが、慣れている人には超絶便利そうなツールのご紹介。Drawterはブラウザ上でDOM要素を配置、さまざまなカスタマイズを施したあとにコードを生成してくれるツールだ。つまるところ、CSSレイアウトに対応したサイト製作ツールといってもいいだろう。要素ごとにさまざまな属性を直感的に追加していける点が素晴らしい。インターフェースもシンプルで職人ぽいので個人的に好みである。日本語も入力可能だ。当然ながら作り終えたあとは﹁Generate Code﹂コマンドでコードを生成、そのまま使うことができる。似たようなツールはすでにいくつかあるが、Drawterの完成度はかなり高いのではないだろうか。是非試してみてもらいたい。

honeybe 2008/11/28

あとでためす。

css
design

リンク

直書きライクな、HTML+CSSコーディング。 | kimihiko Tech

直書きライクな、HTML+CSSコーディング。︻追記︼これは、ネタです。以下の内容は、良いHTML+CSSコーディングを推奨するものではありません。こんなに反響があると思ってなかったので追記しておきます　(´-ω-｀)ゴメンナサイ CSSはHTMLから切り離して外部ファイルとして保管され、その外部CSSファイルを修正すれば、HTMLファイルに触れずとも、 HTMLページの見た目を柔軟に変更できる、ということが近年のHTMLページ制作におけるスタンダードになっています。ですが、私はHTML+CSSコーディングをする際に、この外部CSSを作るのが非常に億劫でなりません。idやclassなどのネーミングはもちろん、どこに、どう設定を書くのか、などに非常に繊細な技術を要するからです。かといって、styleを使って htmlに直書きするのも面倒だなと思っていました。そこで

honeybe 2008/09/19

ブログのソースまで含めた壮大なネタ。ぜ、全部計算なんだから！的な。

リンク

ウノウラボ Unoh Labs: CSSを書くときに使っているツールの紹介

yamaokaです。今回は、ぼくが普段CSSを書くときに使っているツールを紹介します。 Firebug 入手先: Firebug :: Firefox Add-ons Firebug posted by (C)フォト蔵もはやJavaScriptの開発には欠かせなくなった感のあるFirebugですが、CSSを書くのにも使えます。ボックス要素を調査︵inspect︶、CSSを書き換えてレイアウトを考える参考にしたり、 HTMLを書き換えてid属性やclass属性を書き換えて適用するスタイルを変更した場合の変化を試してみたりします。 IE Develper Toolbar 入手先: Download details: Internet Explorer Developer Toolbar IE Developer Toolbar posted by (C)フォト蔵前述のFirebugと同

honeybe 2008/08/07

design
css

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

honeybe 2008/06/27

リンク

CSS - dtをfloatする場合の注意点 | Try | d-spica

dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>

honeybe 2008/05/14

ほほう。