スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon

Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。

画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg

This presentation is an HTML5 website Press → key to advance. Zoom in/out: Ctrl or Command + +/- Having issues seeing the presentation? Read the disclaimer HTML5* Web Development to the next level *Including other next generation technologies of the Web Development stack Rough Timeline of Web Technologies 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tablel

マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。

19 29 08 2007 CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie jQuery, Css CSSを動的に切り替える方法をいくつか紹介します。全てcookieにより保存されます 1.styleswitch.jsを使う方法 まずGoogleで一番ヒットするのがstyleswitch.jsです。 コード <script src="styleswitch.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />

◆解説 これは外部スタイルシートを切り替えるサンプルです 上のリンクをクリックすると該当のスタイルシートに切り替えます このスクリプトは以下の通りです ■JavaScript function replace_css(id,url){ if(!document.getElementById) return false; var element = document.getElementById(id); if(!element || !element.cloneNode) return false; var new_node = element.cloneNode(true); new_node.href = url; element.parentNode.replaceChild(new_node,element); return true; }

アメーバブログ(Ameba アメーバ)をＣＳＳでカスタマイズしてオリジナルブログにしてみませんか? ＣＳＳでどこまでスキンをカスタマイズできるかチャレンジ！ 初心者でもオリジナルなスキンで個性的なアメーバブログ(Ameba)に！ 2011年4月 jquery　The ランダム もっと簡単に何でも出来ちゃう方法を記事にしましたのでそちらを参考にしてください ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ 暑い・・・ PCのある部屋・・・・ エアコンが・・・・ もう何年も壊れたままですが 今年は暑すぎです・・・ PCの前に座っても何もする気が起きません にしても・・・暑すぎです 扇風機が大きなドライヤー状態です・・・・ 前にアップしました 何枚かのヘッド画像をランダムで表示 の、使い回しです・・・・ ほとんど変わりません・・・・ と、いうことはカンタン！ 何枚か背景画像を作って画像

I’ve had numerous requests for updates and improvements to the original social bookmarking menu that I posted a while back. Well, just so none of you think I don’t listen… Here it is! I’ve added several sites to the list such as: Mixx Facebook MySpace DesignFloat You guys should really appreciate this one wholeheartedly, as this required me to mimic a great designer’s style. I had to create icons