divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス - かちびと.net
Webサイトの制作時にいつも 時間がかかるのがカラー選定 で、少し困っているのでもう少し 時間を短縮したいと思い、使って いるツールも含めていろいろご紹介。 いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。 原色大辞典 色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。 原色大辞典 colr.org 写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝しま
CSS2/DOM - Styling an input type="file"
Credits wholly go to Michael McGrady, who invented this technique. A browser must support opacity to support this technique. Therefore it doesn't work in Explorer 5.0 on Windows, Explorer 5 on Mac and Opera. A reader suggested adding a keyup event to the real input box so that you can copy the text the user types to the fake one. This page has been translated into Chinese and Italian. Of all form
ミスタードーナツでお得なクレジットカードはｄカード！ポイントの3重どりで2.5％ポイント還元の方法【2023年版】 | ベストクリア
ミスタードーナツは、全国に1,200店舗以上を展開するドーナツのチェーン店です。店内でドーナツ作りを行っているため、出来立ての美味しいドーナツをいただくことができます。期間限定のコラボ商品も多く、SNS等でよく見かけますね！ 飲茶メニューも美味しくて人気があります。ドーナツはお土産にもいいですね！ ミスタードーナツで一番お得なクレジットカードは、ｄカード・ｄカード GOLDです。ｄ払いを利用することで、ポイントの3重どりができ2.5％還元を実現できます。 ミスタードーナツでは、クレジットカードは直接利用できませんが、電子マネー、バーコード・QRコード決済など多くのキャッシュレス決済を支払いで利用することができます。クレジットカード おすすめを探している方にもピッタリです。 ミスタードーナツの支払いで利用できる決済方法バーコード QRコードPayPay・au PAY・ｄ払い電子マネー楽天Ed
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数 ： クラス名に列数を追加する。(nrow0, nrow1,,)
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
Big Sky :: 意外と知られていないvimのtips(vimでソースコードをHTML化するコツ)
普段vimを使っていらっしゃる方は、ソースコードや/etcにある設定ファイル等をブログに書きたいと思う事が多いかと思います。 私のブログでもほぼ7割方ソースコードが含まれるブログ記事となっています。 ソースコードをブログにアップする際、やはりテキストエディタの様にシンタックスに色が付いた常態だと分かりやすいですよね。 世の中には色んな方法があるようです。 google-code-prettify Google謹製のjavascriptで動くコードハイライタ。 syntaxhighlighter Yahooも使っていると言われているコードハイライタ。 GNU Source-highlight コマンドラインで動くコードハイライタ。静的HTMLを生成します。 ただ、私としてはやはり静的ファイルでHTMLを出力したいし、なるべく多くのフォーマットで、かつマルチバイトに対応していてほしい。 私は普
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
MOONGIFT: � Subversion/CVSログをRSS/HTMLに「Crank」:オープンソースを毎日紹介
開発においてバージョン管理を導入するのがごく当たり前になってきている。複数人はもちろん、一人であっても使ったほうが良いだろう。間違って消してしまうリスクやHDD故障のリスクも抑えられる。 そんなバージョン管理をさらに便利にしてくれるソフトウェアがこれだ。 今回紹介するフリーウェアはCrank、各種バージョン管理システムログをHTMLやRSSに変換するソフトウェアだ。ソースは公開されているがライセンスは明記されていないので注意していただきたい。 Crankが対応しているのはSubversion、CVS、Starteam、Perforceとなっている。この種別の指定、リポジトリのパスやURL、リビジョン、テンプレートを指定する事でファイルを出力する。公式サイトのドメインにもあるが、svn2rss/svn2html/cvs2rss/cvs2html的な利用法が考えられる。なお、gemを使ってイン
ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum
Web担編集部の安田です。Web担のはてブ件数1万件超え（）を記念して、ご愛読のみなさんのお役にたてる便利なツールを作りました。名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。ウェブデザインをする人なら日常的にdivの幅や隙間の長さを測ったりしていることでしょう。そういうときに手放せなくなるツールです。 akiyanさんが作った便利なグリッドオーバーレイのブックマークにインスパイヤされて、さらに便利な機能を盛り込んでみました。 名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。 使い方その1普通のブックマークレットです。以下のリンクを右クリックして「お気に入りに追加」（IEの場合）または「このリンクをブックマーク」（Firefoxの場合）してください。 IEでは「追加しようとしているお気に入りは安全でない可能性があります。続行しますか？」とのセキュリティ警告が出ま
Netsphere Laboratories: rb2html - Ruby, Java, C...
(2004.10.31 ページを分離。) description / 概要 rb2htmlは，ソースコードをHTMLに整形します。行番号を付し，キーワード，文字列などに色を付けます（ハイライト）。 対応言語： Ruby Java JavaScript C++ / Objective-C Python Haskell HTML/XML CSS コマンドラインから実行する方法と、プログラムに組み込んで使う方法があります。 samples / サンプル rb2html サンプル downloads / ダウンロード ダウンロード how to use / 使い方 インストール 今のところ、インストーラはありません。 rb2htmlディレクトリを /usr/lib/ruby/site_ruby/1.8 にコピーしてください。 rb2html.rbファイルを /usr/local/bin など実行パ
HTML JS版 Apollo アプリを作ってみる [てっく煮]
Apollo 開発の方法を丁寧に説明していく予定です。第１回目は HTML+JavaScript で Apollo アプリを作ってみます。 そこそこ実用的な例、ということでシンプルな RSS リーダーを作ることにします。Apollo での通信にはドメインの制約がない、という利点を体感することもできます。動作イメージはこんな感じです。 開発環境のインストールがまだの方は、Adobe Apolloメモ や はじめてのApolloプログラミング を参考にして準備しておいてください（手抜き）。 HTML と JavaScript の作成 まずは HTML を準備します。rss-simple.html として保存します。味気ないですが、あえてシンプルにしてます。 <html> <head> <title>Simple RSS</title> <script src="rss-simple.js"><
![HTML JS版 Apollo アプリを作ってみる [てっく煮]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95abde13f7ed41248843e654a2f2ddcde8983db4/height=288;version=1;width=512/http%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
ホームページ製作を楽にする7つのXSLTスクリプト：CodeZine
はじめに 本稿では、ホームページ製作に役立つさまざまなスクリプトをXSLTを用いて実装します。 XSLTはXMLの変換に特化したスクリプト言語で、ホームページ製作に使用するXHTMLの操作を簡単に行うことができます。繰り返し入力する内容の雛型化タイトルにサイト名を自動的に追加ローカルテスト時とアップロード時でのリンク先の切り替えヘッダとフッタの自動追加目次の自動生成キーワードの自動リンクサムネイルの自動生成 対象読者 本稿では、XSLTスクリプトの文法やテンプレートなど、XSLTの基礎に関する説明を省略しています。XSLTに初めて触れる方は、参考文献で紹介したXSLTの解説サイトなどと併せてご覧ください。必要な環境 このサンプルはInternet Explorer 6.0＋MSXSLを使用して動作確認をしています。スクリプト中でMSXSLの独自拡張を使用しているため、実行にはMSXSLが必
「これがApolloだ」 Adobeの次世代デスクトップアプリ用ランタイムリリース：CodeZine
Adobeは19日、Adobe Labsを通じて「Apollo Runtime Alpha」をリリースした。ランタイム並びにSDKは、Adobe Labsから無償でダウンロードできる。 Apollo Runtimeは、Javaランタイムや.NET Frameworkと同じ、デスクトップアプリケーションの実行環境。Apollo上では、Flash、PDF、HTML、Ajax（JavaScript）を動作させることができ、ブラウザ上でのユーザーインターフェイスよりもはるかに豊かな表現を実現させることができる。 今回のアルファ版リリースに合わせ、サンプルも用意されているので、実際に動作させてみよう。 1.Apollo Runtime Alphaのインストール まずはランタイムをAdobe Labsのサイトからダウンロードする。Windows版の場合、msiファイルをダウンロードし、インスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - RichardDavies/sexybuttons: Sexy, skinnable HTML/CSS buttons with icons.
FancyForm - Javascript checkbox replacement
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか