jQueryを使ってHTMLのhead内にアクセス：実験メモjQueryを使うと、HTML内のいろいろなタグにアクセスできて、 簡単にそれらを操作することができる。 けど、head内って操作することできるのかな？ 一応htmlだしできるよね？なんて疑問に思ったので、 とりあえず試してみた。 いろいろなスクリプトを試してみる 試してみたスクリプトと、 それぞれの結果をプレビューしておきます。 尚、プレビューは、それぞれの中身をtext表示しています。 ■ document.domain
JavaScriptとObjective-Cを連携させるハイブリッドアプリ解発に·HybridKit-JS MOONGIFT
HybridKit-JSはObjective-C/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 最近のスマートフォンアプリ開発では必要に応じてJavaScriptとネイティブを組み合わハイブリッドアプリが増えています。そこで紹介したいのがHybridKit-JSです。 デモアプリです。この画面はHTMLで出来ています。 HybridKit.runCommandで予め登録されているコマンドを実行します。 アラートを表示するデモです。 Open URLを使ってMobile Safariを使ったURLを開く操作もサポート。 set_titleを使うとタイトルバーのラベルを変更できます。 背景色を変更する機能もあります。 HTMLはこのようになっています。 HybridKit-JSではJavaScriptからネイティブの機能を呼び出す形で連携できるようになっ
コーディング規約を作ろう
コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック | コリス
全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。 いやー、日本語ムズカシイ、、、 デモ 実装 デモ デモページは構造的にはラッパーの中に上から、半透明のレッドのヘッダ、ホワイトのコンテンツの2つで構成されています。 まずは、表示サイズがラッパーの幅960pxを超えた時の表示。 Improved Full Width Browser：幅1200px コンテンツは幅960pxで表示され、ラッパー内にヘッダが含まれているけど、ヘッダの幅はそのコンテンツのラッパーを超えている状態です。 表示幅が960px以下になると、ヘッダはコンテンツの上部に成り行きで収まります。 Improved Full Width Browser：幅780px 実装 HTML HTM
[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
デバイス別、クロスブラウザ別対応 – not useragent - シンプルシンプルデザイン JavaScript
もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代になって1,2年が経ちました。 「プログレッシブエンハンスメント」や「グレイスフルデグラデーション」、「メディアクエリ」、「CSSスプライト」、「モバイルファースト」というキーワードも聞かれるようになりました。 あ、最大のキーワードは「html5」。これは広義にも狭義にも使われてますね。 このような流れを受けてか、ビジュアルデザインは大きく、フォントも大きくなったサイトを見かけることが多くなった気がします。 結果見やすく、アクセシビリティにも良い印象。個人的にも素材を大きくダイナミックな表現は好みなので見てて楽しいです。 っとデザインの話しではなく、クロスブラウザ、マルチデバイスにどう対応するか。 そのコンテンツのユーザーは誰か？をデ
The Shapes Of CSS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn
[JS]これは楽しい！スマフォUIのように下に引っ張るとリフレッシュするスクリプト -Hook.js
スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"
jQueryでHTML5の独自データ属性（data Attributes）を扱う
Posted: 2011.07.01 / Category: HTML&CSS, javascript / Tag: HTML5, jQuery HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。 この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。 data属性のマークアップ data属性は「data-」以降に文字列を指定することで設定できます。 たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。 html <div data-role="hoge">太郎</div> jQueryでこの「hoge」という値を取り出すには、dataメソッ
Online StyleSheet Generator | OneClickCSS
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
Iframeがキャッシュを保持して更新されないときの対処法（特にChrome） - サイト制作の豆知識
Iframeがキャッシュを保持して更新されないときの対処法（特にChrome） ●top.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <iframe id="testtest" src="Iframeで読み込むhtmlのURL" width="400" height="300" frameborder="0" scrolling="NO"></iframe> </body> </html> ●iframe.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> 下記のスクリプト
セマンティックHTMLの使用 | Adobe Developer Connection
HTMLの記述になぜ<h1>タグと<p>タグを使うのでしょうか。すべてを<div>タグと<span>タグで済ませてはどうでしょうか。そもそも特定のHTMLタグをなぜ使うのでしょうか。 その理由は、<p>タグや<h1>タグがコンテンツに関する追加的な情報を伝えるからです。これらのタグはそれぞれ、「これは段落」、「これは第1レベルの見出し」という情報を持っています。これがセマンティックHTML、つまり、作成者がたくさんの労力を払って、マークアップによってコンテンツの編成と構成を実現するHTMLのことです。Web開発者の誰もが、ある程度までは経験しているものです。この記事は、セマンティックHTMLについて解説し、セマンティックHTMLの理解をさらに深める必要性を説明します。 簡単に言えば、セマンティックHTMLとは、働きに合わせた正しい要素やタグを使用するHTMLのことです。例として、<h1>要
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
Coda2を入れたらまず行っている設定 | 1bit::memo
Coda2が発売された事によってVer.1時代の記事「Codaを入れたらまず行っている設定 | 1bit::memo」にアクセスがあるようです。嬉しい限りですね。せっかくなので、Coda2バージョンの設定を書いてみたいと思います。（内容は随時更新していきます。ご了承ください。） 1.Coda2のダウンロード パニック – Coda 2またはMacAppStoreから購入 2.Zencodingを入れる プラグインは「Downloads – zen-coding」から「Zen Coding for Coda」の最新版をダウンロードする。 ダウンロード・解凍して出来た「TEA for Coda.codaplugin」をダブルクリックまたはアイコンへドラッグ＆ドロップしてインストールする。 3.Coda2にWordpressのシンタックスモードを入れる プラグインは「WordPress Synt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frontend Focus
sakurachiro.com
API Usage