タグ

cssとjavascriptに関するmagatsu72のブックマーク (4)

  • 30分でできる!Webサイトを高速化する6大原則 (1/4)

    Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか? もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション(10段階)、横軸が表示までの時間を表している。1~5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

    30分でできる!Webサイトを高速化する6大原則 (1/4)
  • 技術系サイトに必需品! ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK!「Syntax Highlighter」の使い方

    Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ

    技術系サイトに必需品! ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK!「Syntax Highlighter」の使い方
  • 各種チートシートまとめ - goinger的日記

    なんとなく便利そうなのを探してまとめてみた。 リンク切れおそろしい プログラミング関連 C, CPP, C# Cheat Sheets C, CPP, C#のチートシートがたくさんある 249 Prototype Dissected prototype.js チートシート 347 Haskell Cheatsheet Haskell 130 command line ruby cheat sheet ruby commandline チートシート 680 ruby-on-rails-cheat-sheet/ Railsのチートシート 701 google関連 google guide 検索オプションの説明とか 1358 Google Guide Quick Reference Google検索ガイド 9657 google help: cheat sheet google家から提供 40

    各種チートシートまとめ - goinger的日記
  • 新規でサイトを作るのに使えそうなの一式。Ver 3

    随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL(zip:40kb) Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlGoogleカスタムサーチ用に使えるソースを記入。 Ja

    新規でサイトを作るのに使えそうなの一式。Ver 3
  • 1