タグ

htmlとcssに関するmasa0x80のブックマーク (9)

  • Google HTML/CSS Style Guide まとめ - Qiita

    Google HTML/CSS Style Guide(2019年9月時点) より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨:プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨:httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery

    Google HTML/CSS Style Guide まとめ - Qiita
  • HTMLとJSとCSSだけでスクリーンセーバーが作れるHTMLScreenSaverBuilderを作った - kurainの壺

    作った 表題のとおりで、HTMLJavaScriptCSS の知識があればMacのスクリーンセーバーを作れるツールを作りました。Xcode も不要です。 html でできることは大概できるので、flash 貼るとか audio ダグで音をならすとか、WebGLで3Dで遊ぶとかかなり何でも出来るのではナイかと思っています。 ダウンロード 下のリンクからどうぞ!HTMLScreenSaverBuilder 体と、サンプルで作った ScreenSaver が入っています。 HTMLScreenSaver.zip 作り方 HTMLを準備 全画面表示されても、綺麗に表示されるような HTML を書きます。必ず名前は index.html にしてください。例として、はてなフォトライフの人気の写真を表示する HTML を書きました。 https://github.com/kurain/Ho

    HTMLとJSとCSSだけでスクリーンセーバーが作れるHTMLScreenSaverBuilderを作った - kurainの壺
    masa0x80
    masa0x80 2011/10/24
    スクリーンセーバー作りホーダイ!
  • HTMLとよく使うJSの雛形 - hitode909の日記

    ページ1枚で動くようなちょっとしたアプリケーションを作るときに,最近はjQueryとJSDeferredと960.cssをロードしてから何か作ることが多くて,毎回コピーしてきてたけど,めんどうなので,スクリプトを実行すると雛形を作ってくれるようにした. https://gist.github.com/1024417 アプリケーション名を引数にbuilder.rbを実行すると,雛形みたいなのを作ってくれる. % ruby ~/co/gist/1024417/builder.rb test_app test_app created % tree test_app test_app ├── 960.css ├── index.html ├── jquery-1.6.1.min.js ├── jsdeferred.js ├── reset.css ├── test_app.coffee ├── t

    HTMLとよく使うJSの雛形 - hitode909の日記
  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • IDEA * IDEA

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

    IDEA * IDEA
  • 3キャリア対応のCSS変換モジュールHTML::MobileJpCSS - komoriyaのはてなダイアリー

    DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。 http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/ 3キャリア間での変換の必要性 DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。 DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。 例えば小さいフォントを表示したい時は、 DoCoMo --- font-size:xx-small EZweb --- font-size:10px Softbank --- font-size:smallと属性の値が異なります。 hrタグ

    3キャリア対応のCSS変換モジュールHTML::MobileJpCSS - komoriyaのはてなダイアリー
    masa0x80
    masa0x80 2009/01/17
    モバイルの CSS はメンドイからこれで作業が軽減できそう!
  • 高速な CSS セレクタエンジン「Sizzle」「Peppy」を試す - WebOS Goodies

    最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲

  • CSSレイアウトの定石 WinIE6バグ回避法

    CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう (ブロックレベル要素を内包するボックスにはpaddingを指定しない。) 左右ボーダーとパディングを設

    masa0x80
    masa0x80 2008/12/16
    IE6 用の各種設定集
  • bodyに設定しておくと便利な3つのポイントとおまけ|CSS HappyLife

    CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "MS Pゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書

    bodyに設定しておくと便利な3つのポイントとおまけ|CSS HappyLife
    masa0x80
    masa0x80 2008/12/16
    自分なりのテンプレートを作っておくと便利ですね!
  • 1