![http://kiro.me/projects/textualizer.html](https://cdn-ak-scissors.b.st-hatena.com/image/square/2994462bf4d2e8ccd6c7cd55f1822e432c2dfafa/height=288;version=1;width=512/https%3A%2F%2Faboutme.imgix.net%2Fbackground%2Fusers%2Fk%2Fi%2Fr%2Fkirorisk_1499178174_041.jpg%3Fq%3D80%26dpr%3D1%26auto%3Dformat%26fit%3Dmax%26w%3D1200%26h%3D630%26rect%3D0%2C85%2C360%2C189)
HTML5のprogress要素とjQueryを組み合わせて、ファイルの読み込みのプログレスバーで表示するサンプルを紹介します。 1.progress要素とは HTML5のprogress要素を使えば、進捗状況を示すプログレスバーを表示することができます。 progress要素は次のように記述します。value属性に作業の進捗度、max属性に作業の全体量を設定します。progress要素の内容にはフォールバックコンテンツを設定できます。 <progress max="100" value="50">50/100</progress> progress要素をサポートしていれば下にプログレスバーが表示されます。サポートしていないブラウザであれば、フォールバックコンテンツである「50/100」が表示されます。 50/100 2.サンプル progress要素とJavaScriptのFileRea
ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。 グラデーションの適用 Add Shineの使い方 Add Shineの使い方は、簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script> <script src="js/addShine.js"></script> Step 2: HTML HTMLはスクリプトを意識することなく、普通に実装します。 <body> <button>ボタン</button> </body> Step 3: CSS ページの背景とボタンは、ベタ塗りにします
CSSスプライトのように、1枚の画像 でマウスホバーによる簡易的なアニ メーションを実現させるjQueryのプ ラグイン・spriteOnHoverのご紹介 です。GIFアニメ以外の選択肢として 個人的に少し期待しています。 1枚の画像でGIFアニメーションっぽいのを実現させます。画像を作るのは場合によっては少々手間かもですけど・・ CSSスプライトのように1枚の画像でGIFアニメっぽいのを作れる、というスクリプト。 ↑ こんな感じ。以下、公式のデモです。 Sample $('#foo').spriteOnHover({ fps:30, orientation:"horizontal", rewind: true, loop: false, autostart:false, repeat:true });ループやオート再生の有無などもオプションでセッティングします。 ライセンスは・・・ D
2013年3月25日 インスピレーション, フォント 先日同僚と日本語の文字についておしゃべりしていると、「日本語はまるで絵や記号みたいだ!」と言われました。確かに私達日本人から見るとアラビック文字やハングル文字が記号を並べているように見えるのと同じで、英語圏の人からすると不思議な記号に見えるんでしょうね!ということで探してみるといくつか見つかった素敵フォント。パッと見日本語に見えたり、日本をイメージした英字フォントをいくつか紹介します。なんだかジワジワきますw ↑私が10年以上利用している会計ソフト! 「日本語風」の英字フォント 1. TokyoSoft ダウンロード(商用利用可) カタカナ風の英字フォント。日本人が見たら間違ったカタカナの羅列ですが、よーく見るとアルファベットになっています。このフォントで「MANA」と書くと、「ポタカタ」になるようです…! 2. Kaneiwa ダウン
CSS おれおれ Advent Calendar 2012 – 18日目 チェックボックスと同じ機能を持つボタンです。押すと引っ込んだ状態になり、もう一度押すと出っ張った状態になります。 なんか現実世界のスイッチで使われてたりしますね。あれです。 押すと引っ込むトグルボタン。 デモ 直接隣接接合子+を利用しています。A+Bで「A直後のB」を指す事ができます。 +は隣接兄弟接合子とか言ったりする事もあるみたいです。どういう日本語を充てるべきかわかりませんが、英語だと “Adjacent sibling combinator” です。 そこで:checkedと組み合わせて、「チェックの付いたチェックボックスの直後の<span>」のスタイルを操作しています。 チェックボックス本体はdisplay:noneで非表示にしています。画面には表示されていませんが、先の<span>が<label>の下に配
[対象: 初〜中級] Googleウェブマスターツールのサイトの所有者の適切な確認方法を英語版のウェブマスター向け公式ブログが解説しました。 以下がその内容です。 Googleウェブマスターツールのサイト所有者確認のTIPS 確認方法 サイトを確認する方法はどれでも好きなものを選んでいい。CMSやレンタルサーバーによっては使えるものと使えないものがあるかもしれない。設定を何か変更したときに確認が外れてしまわないように2つの方法を併用しても構わない。 確認用のmetaタグ/HTMLファイルの更新 サイト確認用のmetaタグとHTMLファイルを2009年に新しくした。古いものを使っているなら新しいものに差し替えたほうがいい。新しいmetaタグには「google-site-verification」というname値が含まれ、HTMLファイルにはそれとファイル名の1行だけが書かれている。古い形式を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く