タグ

cssに関するyuya2223のブックマーク (9)

  • なんでCSSすぐ死んでしまうん

    The document discusses schema design patterns for MongoDB databases. It introduces common patterns like attributes, subset, computed, and approximation. Attributes store optional fields as field-value pairs to index them easily. Subset duplicates a small subset of dependent documents to reduce working set size. Computed pre-calculates values to avoid repeated computations. Approximation uses fewer

    なんでCSSすぐ死んでしまうん
    yuya2223
    yuya2223 2014/11/05
  • AngularJSでロード中に評価前のマークアップを表示させない方法 - Qiita

    AngularJSを使ったWebアプリケーションで、ページの読込途中や初期化までの間にテンプレートのマークアップ(下記の図の{{name}}のような記述)が一瞬見えてしまうのを何とかしたい時があります。 特にページの表示開始を早くするためにAngularJSのコード読み込みをhead要素に置かずに非同期で読み込んでいる場合は、AngularJSの読み込み完了まで見えてしまうので特に目立ってしまいます。これを解決するためにngCloakというdirectiveがあるのでこれを使います。(headセクションでAngularJSのコード読み込みのscriptタグを配置している場合はそんなに気にならないかもしれません。公式ドキュメントではこの方法を推奨しているようです) 使い方 連携するCSSをアプリケーションのCSSに追加します [ng\:cloak], [ng-cloak], [data-ng

    AngularJSでロード中に評価前のマークアップを表示させない方法 - Qiita
  • ゆなカラーピッカー

    ゆなカラーピッカー 概要 これはHTMLやプログラミングなどで色を16進数RGB値で指定する必要がある場合に、 10進数やスライダーを使って色を簡単に作成し、数値を表示するためのソフトです。 もちろんペイントソフトと併用したり、使い道はいくらでもあります。 主な特徴はHTMLにおいてInternet ExplorerとNetscape Navigatorで色名指定できる色が140色組み込まれていることと、 画面上の色を取得できることです。 画面上の色を取得する際に、3ピクセル(5ピクセル)平方の平均値を取得することも可能です。 特徴 スクロールバー、10進数、16進数、etcによる数値の指定 HTMLで使用可能な140色のカラーネームによる指定 数値の各種フォーマットでの表示 各種フォーマットでのクリップボードへのコピー 16進数表記の大小文字の選択可能 スポイトによる画面上の色の取得

    yuya2223
    yuya2223 2012/06/06
    ゆなカラーピッカー windowsスポイト色
  • 10分くらいで分かるXHTML+CSS

    このブログをお読みの方には既に不必要かもしれませんが、XHTML 1.0 と CSS 2.1 の入門記事です。 社会人のためのWebデザインスクール 用に作成したプレゼン資料をもとに記事にしています。 授業の時は、先にこの話をしてから XHTML を書いてもらうのではなく、先に HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる を読みながら XHTMLCSS で簡単なページを作成してからこの話をしています。 その理由としては、HTML や XHTML を1度も書いたことがない方に「ブロックレベル要素」や「インライン要素」、CSS の「セレクタ」等の話をしても何のことか分かりにくいだろうと考えているからです。 ※この記事は2012年に執筆したものです。現在の 社会人のためのWebデザインスクール では、HTMLCSS コーディングについては

    10分くらいで分かるXHTML+CSS
    yuya2223
    yuya2223 2012/03/23
    10分くらいで分かるXHTML+CSS | Stocker.jp / diary
  • 【CSS】実はこんなに便利!cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。

    モニターを見つめる目に優しいメガネがZoffからも出る!しかも度付きOK、フレームも選べる!気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です! 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ

    【CSS】実はこんなに便利!cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
    yuya2223
    yuya2223 2012/03/07
    実はこんなに便利!cssのセレクタ指定方法をちょっとだけ
  • Components · Twitter Bootstrap

    Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2

    yuya2223
    yuya2223 2012/02/22
    Twitter Bootstrap
  • 0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-

    私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー?」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜>< by:fweez まずはじめに とりあえず用意するもの2つ HTMLの基 HTMLとは? 1.DOCTYPEの宣言 2.基的なタグ 3.<body>の文書構造 CSSの基 CSSとは? 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大

  • CSSや画像の命名規則について - kojika17

    コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例: CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている

    CSSや画像の命名規則について - kojika17
    yuya2223
    yuya2223 2012/02/09
    命名規則
  • CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル

    CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto

  • 1