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

「Reboot.css」の特徴と使い方を解説

Bootstrapは既に多くの人が知っていると思います。では、Bootstrapで採用されているCSSのリセットは知っていますか？ Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定ネイティブのフォントファミリー margin-topは死んでいる共通要素はクリーンなスタイルタッチ

msuhara 2018/06/14

リンク

どう考えても無茶な「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だけで作られたワニワニパニック。このコードは海外のユーザーにも大きな反響を呼びました。

msuhara 2011/06/23

なんだ、ただの変態か(褒め言葉)

css

リンク

CSSの知識をもっと深める30+2の小技テクニック集｜Webpark

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

msuhara 2011/05/13

サンプルまとめ

css

リンク

ナナネコのザレゴト。

数年ぶりの更新だが、大丈夫か？ Scala + Lift で CSS を上手に反映させる方法がわからなかったのでまとめ。結論は /classpath/ っていうパスが %PROJECT_LOC%/src/main/resources/toserve/ っていうところにアクセスできるので、このパス以下に置くこと。それでちょこちょこ設定してあげれば OK。使い方は下のように書く。 <link rel="stylesheet" href="/classpath/css/sidebar.css" type="text/css" /> んで、あとは Boot.scala の def boot 内に以下を書いて、css を読み込めるようにする。 ResourceServer.allow { case "css" :: _ => true } んで、どういうときに問題かというと、templates

msuhara 2011/05/07

リンク

CSSのfont-family：ヒラギノとＭＳＰゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ

CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま