タグ

htmlとWeb制作に関するmatsuko1103のブックマーク (4)

  • [フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET

    [フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]

    [フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
    matsuko1103
    matsuko1103 2015/01/29
    css3でレスポンシブスタイルかいた挙句jsでdom要素いじりーのしたりすると結構気にかけないといけない事なので。
  • 高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~

    サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス

  • 960 Grid System

    960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,

    matsuko1103
    matsuko1103 2010/06/23
    グリッドデザインからソースを生成できるサイト
  • コメントを生成して挿入するDreamweaver用拡張機能を作成しました | Topics | DB - KAYAC Designer's Blog (カヤック デザイナーブログ)

    意匠部、渕上です。 htmlの閉じタグの手前にコメントを入れることがめんどくさくなったので、Dreamwaver用の拡張機能を作って解決することにしました。 どういうコメントかというと、以下のようなやつです。 <div id="container"> ~~~ <!-- /#container --></div> このコメントを入れることでコードの見通しがよくなるので絶対いれたほうがいいことはわかってるんですが、idやclass名を記述しなきゃいけないのがちょっと大変なんですねー。 ダウンロード ということで、作成した拡張機能はコチラ。 ダウンロード - End_comment.mxp インストール mxpファイルをダブルクリックするとAdobe Extention Managerが立ち上がりインストールされます。 インストールできないことがあります 「メニューを更新できませんでした」という

    matsuko1103
    matsuko1103 2010/06/20
    自動的にどのdiv要素の閉じタグなのかコメントを生成して入れてくれる拡張
  • 1