Components | CodyHouseCookie Compliance We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.
これなら簡単で便利！最近見かけるCSSのさまざまなコンポーネントをコピペで利用できる -CodyHouse Framework
HTMLとCSS、そしてJavaScriptで実装された最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークを紹介します。 各コンポーネントは単体でもHTMLとCSSのコピペで利用できるので、既存ページや他のフレームワークにも簡単に使うことができて便利です。 CodyHouse Framework 2.0 CSSベースの軽量フレームワーク アクセシブルで、Webページやスマホアプリのインターフェースを構築するための8Kb軽量フロントエンドフレームワーク。 さまざまなコンポーネント HTMLとCSS、そしてJavaScriptで実装された、87種類のコンポーネント。 実装もカスタマイズも簡単 コピペで利用でき、既存のCSSルールを上書きする必要はありません。 モバイルファースト すべてのコンポーネントは、モバイルファーストで実装されています。 プ
君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM
知っている方には、すみません。 HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。 ちょっと試してみましょう。 <div contentEditable="true">ここは編集できる</div> ↑ ここは編集できるのです。(ただの <div> 要素なのですが！) 編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。 body要素に contentEditable 属性をつけてみる さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。 JavaScript コードはこんなかんじ。 javascript:(functi
印刷範囲を指定できるjavascript「jPrintArea」
印刷時にナビゲーションなどのいらない部分を省略したい時があります。 CSSを分けることで可能ですが、いちいち別のファイルを作成するのも面倒です。 jPrintAreaでは簡単に印刷範囲を指定することができます。 sponsors 使用方法 jPrintAreaからjquery.jPrintArea.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.jPrintArea.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(functio
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
TechCrunch | Startup and Technology News
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
画像をクライアント側で縮小してプレビューした後にアップロードする | egashira.jp
2015-08-10 iPhoneでひしゃげてしまうバグに対応した、JavaScriptで画像を縮小処理する方法を紹介します。 JPEGの回転情報から正しい向きで表示したり、ジャギーを減らすためにエルミートフィルターを使ったスムージングも行います。 画像を投稿できるサイトなどでは、写真を"魅せる"ためのサイトでない限りディスプレイ幅以上の解像度のデータは必要なく、アップロードされた画像ファイルをサーバ側で縮小処理したデータのみを保存していることも多いのではないでしょうか？ iPhoneのOSがバージョン6になってから、ようやくHTMLの<input type="file">がサポートされ、スマホ界隈でも画像投稿が熱くなってる感じがしますが、スマホのカメラはメガピクセルが当たり前なので、そのままだとファイルサイズが1メガ以上になってしまい、通信帯域を無駄に使ってしまいます。 HTML5で実用
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
スマフォ向けWebアプリの制作初心者が覚えておくと便利な小ワザ集1 | {M} 383blog
自分がスマートフォン向けのWebアプリを初めて作成したときにいろいろと調べたことを、メモ的に書いておこうと思う。スマートフォン向けのWebアプリ制作におけるJavaScriptやHTMLの基本的な小ワザをまとめた。これからスマートフォン向けのWebアプリを制作する人たちの参考になればうれしい。 アドレスバーを隠す [iOS, Android] ページを表示したときにブラウザ上部のアドレスバーを隠すことができる。スマートフォンのブラウザは表示領域が少ないため、アドレスバーを隠すことで画面を多少広く使える。 setTimeout(window.scrollTo(0, 1), 100); フルスクリーン表示かどうか調べる [iOS] Safariから「ホーム画面に追加」ボタンをタップすると、ホーム画面にそのページへのショートカットアイコンを追加することができる。追加したショートカットアイコンから
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
cocos2d-html5エンジンが凄い件 - tsuge development page
cocos2dっていうiPhoneでは有名なゲームエンジンがあるんだけど、それのHTML5版でcocos2d-html5ってのがある。 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5 これ、ちょっとまともに調べてみたけどかなり凄い。 凄いんだけどいまいちZyngaの日本での頑張りが足らないのか記事が少ないので、ちょっと紹介する。 ダウンロードとか とりあえず自分で触ってみるわって人は、上のリンクからCocos2d-html5-v何がしの最新版リンクをクリックしてダウンロードすればいい。 この記事時点ではCocos2d-html5-v2.1.4が最新。 サンプルゲームはpixi.js辺りに比べるといまいちだけど、個別の機能を確認するのはcocos2d-html5のテストプログラムが使える。 http://www.c
セレクトボックスの日付を切り替え | JavaScript逆引きリファレンス | Web制作支援 | ShanaBrian Website
<script type="text/javascript"> function changedate() { // フォームと各年月日のname属性を指定 var formN = document.form1; var tYear = formN.year; var tMonth = formN.month; var tDays = formN.days; var selectY = tYear.options[tYear.selectedIndex].value; var selectM = tMonth.options[tMonth.selectedIndex].value; var selectD = tDays.options[tDays.selectedIndex].value; var dateObj = new Date(selectY, selectM, 0); tDay
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
PlayCanvas - The Web Graphics Creation Platform
https://ameblo.jp/linking/entry-10296971396.html
gooサービス終了のお知らせ | dメニュー
スマフォ向けWebアプリの制作初心者が覚えておくと便利な小ワザ集2 | {M} 383blog
Loading...