タグ

cssに関するshusatooのブックマーク (10)

  • Flakes - 管理画面用HTML5テンプレート

    Bootstrapの登場以降、管理画面テンプレートと言った類のものが数多く登場しています。Bootstrapをサービスにそのまま組み込むのには躊躇してしまっても、運営者側の管理画面であれば十分すぎる品質と言えます。 今回紹介するFlakesもその一つですが、管理画面のUIに特化したテンプレートであるというのが特徴的です。 Flakesの使い方 Flakesは管理画面特化型とあって、管理画面上で必要そうな機能が揃っています。 Flakesはダッシュボード的な機能からデータメンテナンスまで幅広い管理画面テンプレートとなっています。カラーリングも最近のフラット系にあるほどカラフルではなく落ち着いた雰囲気なのが良いですね。 FlakesはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 Flakes • An Admin UI & Template

    Flakes - 管理画面用HTML5テンプレート
    shusatoo
    shusatoo 2014/12/22
  • http://neteye.github.com/activity-indicator.html

    NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b

    shusatoo
    shusatoo 2013/03/15
    ローディングアニメーションを簡単に実装できて便利。
  • 今更だけどdata URI Schemeって何? – poyosi.com

    こんにちは、@poyosiです。皆さんdata URI Scheme使ってますか? 私は全然使ってません。 data URI Scheme(データ ユーアールアイ スキーム)自体はかなり昔からありますが、知っておいて損はないと思いますので、おさらいの意味も込めて書きたいと思います。 そもそもURI Scheme(ユーアールアイ スキーム)とは? data URI Schemeのお話をする前に、そもそもURI Schemeって一体なんなの?というところを簡単にご説明したいと思います。 一般的にURI Schemeはあまり聞きなれないワードかと思いますが、実は身近なところで広く使われています。 例えば、Webサイトにアクセスするときに「http://exsample.com」というURLをブラウザに入力して表示させますよね? このURI(URL)先頭部分に記述される「http」のような「どのよ

    shusatoo
    shusatoo 2013/01/23
    data URI Schemeですか。画像データをHTMLに直接埋め込める。けど埋め込みすぎるとHTMLが大容量になって読み込み遅くなるので注意と。 RT
  • [JavaScript] google-code-prettify でのソースコードのハイライト表示についてまとめてみた | しゃけログ

    [JavaScript] google-code-prettify でのソースコードのハイライト表示についてまとめてみた 投稿日:2012年10月31日 AutoPagerize, CSS, JavaScript 現在このブログでは、ソースコードのハイライト表示で google-code-prettify を使っていますが、それについてまとめてみました。 google-code-prettifyの導入 google-code-prettify は <pre> 〜 </pre> で囲われた整形済みのソースコードなどを自動的に言語判断して、コードカラーリングを行ってくれるものです。 他にもソースコードをハイライト表示できるライブラリで SyntaxHighlighter などがありますが、google-code-prettify の方がシンプルで使い勝手がいいのでこっちを使っています。 ファ

  • Bootstrap Themes

    Free Bootstrap Themes available for your admin and landing pages. Lots of themes to choose from with premium features.

    shusatoo
    shusatoo 2012/10/12
    Twitter Bootstrap 管理画面用テーマ
  • 15 Useful Code Snippets for Smartphone Website

    2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ

    15 Useful Code Snippets for Smartphone Website
  • TwitterのBootstrapでリッチなボタンリンクを作る! » SHINGOLOG

    TwitterBootstrapが凄そうなので試してみました。こういうリッチなボタンを使ってみたかったんです。BootstrapCSSのフレームワークです。 一番簡単に使うにはjavascriptを読み込むだけで使用できます。 ただし!使えるようになるのですが、既存のサイトにそのまま読み込ませると設定がかぶってしまい、表示がおかしくなってしまいました。 結局、使いたかったのはボタンなので、その部分だけ拾って既存CSSに追加することに。 .btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.2

  • 初心者がよくハマる、CSSのfloatプロパティ徹底攻略 | WeeeeB

    2011年も残りわずかですね。今年最後の記事は、CSSのfloatプロパティについて書いてみようと思います。僕はフリーのWebクリエーターをしつつ、Webの講師業もしてるんですが、どの生徒さんもfloatに苦しめられてるのをよく見ます。そこでCSSを勉強しているWebクリエーターさんにfloatとの上手な付き合いかたをご紹介します。 初心者がよくハマる、CSSのfloatプロパティ徹底攻略の目次 まずはfloatを理解しよう floatした要素の親要素に付けた背景が出ない時の対策方法 floatによるレイアウト崩れ(段落ち)の解決方法 1. まずはfloatを理解しよう floatはただ、要素を左右に振っているのではない。浮いているんだ! floatとは、左右に要素を回り込ませたいときに使うCSSのプロパティです。でもただ左右に回り込んでるだけではないのです。実はfloatした要素は浮いて

    shusatoo
    shusatoo 2012/06/15
    ここもfloat分かりやすい。
  • clearfixでfloatを解除 | d-spica

    clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり,途中で切れたりしたことはありませんか。 floatした要素(ボックス)を含む親要素(ボックス)のborderやbackgroundが途中で切れてしまうことがあります。 左の例では,右側のメニューが終わったあたりで,左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;

    shusatoo
    shusatoo 2012/06/15
    floatの動きがものすごく分かりやすい!
  • CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

    最近改めて CSS の基、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基が分かってなかったんだなーと反省 ...。今回は CSS の基中の基、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で

  • 1