タグ

cssに関するt-tanakaのブックマーク (8)

  • Webページの見栄えをよくするたった58バイトのCSS

    ほとんどのWebページの見栄えをよくするたった58バイトのCSSを紹介します。 3つのプロパティだけですが、Webページを実装する時の最初のスタイルとして用意しておくとよいかもしれません。 また、ボーナスの100バイト版とオプションのさらに100バイト版も合わせて紹介します。 58 bytes of CSS to look great nearly everywhere by @JoeyBurzynski 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webページの見栄えをよくする58バイトのCSS 58バイトのCSSの解説 Webページの見栄えをよくする100バイトのCSS 100バイトのCSSの解説 オプションでさらに100バイト Webページの見栄えをよくする58バイトのCSS 58 bytes of CSS -Code

    Webページの見栄えをよくするたった58バイトのCSS
    t-tanaka
    t-tanaka 2022/10/20
  • フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術

    700億円ほどのお金がかかっているといわれ,why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした.投票日と言うことはその後に来るのは開票で,開票と言うことは開票速報がはじまるわけです. 報道各社を見てみますと,各々工夫を凝らした開票速報ページを用意しておりまして,これがなかなかおもしろいということで,その比較でございます. まとめ 長いので先にまとめです. まずテレビと新聞で圧倒的に態度が違います.テレビはあくまで番組の補助だったり宣伝が目的.ウェブページではあまり情報を出したくない様子です.一方新聞各社は トップページ上段,ファーストビューのど真ん中を思いっきり使い,文字通り全面展開といったパターンが多い. フロントエンドの実装から見ると,基的にグラフが必要な場面ではCSS,日地図が必要な場面では「画像+mapで部分リンク」か「要素の絶

    フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
  • html/css 参考サイト総まとめ

    作成:2013/10/15 更新:2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOUIにも深く関係しているのもあり、ここらへんでCSSHTML5を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ 1.勉強になるテクニック/サンプルまとめ 基知識 2.セレクタ 3.メディア クエリ 4.コーディング規約 5.フォント 6.CSSスプライト 7.アニメーション 8.正確なHTML使用方法 9.CSSハック 10.書き方/読み方 定番まとめ

    html/css 参考サイト総まとめ
  • 改めて今の技術でやってみたら面白そうな CSS コーディングの大会

    もう 6年近く前の話なんですが、JamGraffiti さんが企画した CSS コーディングの大会、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」 を今さら思い出したので懐かしさついでに紹介。今の技術でやったらまた新しい発見があるかも。 2007年の 4月とかの話なので、もうかれこれ 6年近く前の話なんですが、JamGraffiti (@ichi23)さんが企画した、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」 ってのがありましてですね。 簡単に言えば 「css Zen Garden」 なんかと同じで、「同じ XHTML 文書に対してみんなで CSS 書いて、どんなデザインができるか遊んでみようぜ」 っていう試みなわけです。 と言っても、css Zen Garden が盛り上がってたのだって 2006年とか、所謂 Web 標準の啓蒙がと

    改めて今の技術でやってみたら面白そうな CSS コーディングの大会
  • Imageless iPhone 4 by Vasyl Zubach

    Imageless iPhone made with CSS by Vasyl Zubach. No images, base64, SVG, or canvas, just a lot of CSS and a little bit of JavaScript

    Imageless iPhone 4 by Vasyl Zubach
  • IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開

    業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U

    IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
  • IDEA * IDEA

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

    IDEA * IDEA
    t-tanaka
    t-tanaka 2009/01/26
    点線は別に気にはならないが,そういう理屈で出ている,という点は勉強になった→「HTMLにテキストいれつつ、スタイルシートで背景に画像を配置し、テキストを横にすっ飛ばすというやり方」
  • mixiをXHTML CSSで組みなおす

    mixiをXHTML+CSSで組みなおすで取り上げた生徒の提出した課題には、記事にも書いたとおり、まだいくつか改善できる点がありました。が、色々修正+αしたようで、再提出してもらいました。 前回提出したものと比べると、XHTMLが部分的に修正され、classの数が減っている。オーイェス。機能ごとにclassを与えて共通するスタイルをまとめることで、管理も編集も楽チンにする事が出来るんだ。 Comments:4 上場 2006年6月10日 23:34 力作ですね。そんな技術があってうらやましいです。 MUSCAT 2006年11月20日 07:23 感動しました。 参考に研究したのですが、小生のは拡大で破壊されました。 どか?んん! wu 2006年11月23日 04:56 どか~ん! 僕がレイアウトを組む際は、大小に+2ほどの拡大で可読が可能になるというラインで制作しています。 XHTM

  • 1