スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(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
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
サーバー不要で保存できる「Web Storage」の使い方 (1/5)
HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。 今回のJavaScriptラボは、HTMLフォームに入力
KAYAC Engineers' Blog
こんにちは。グループ情報部の池田（@mashiike）です。 先日の6/25、26に幕張メッセで開催されたAWS Summit Japan 2025に参加してきました。 今年も2日間とも参加しましたが、今年はやはり生成AIが大きな話題となっていました。 さて、AWS Summit Japanといえば、毎年恒例のElastic座布団クッションの配布があります。 今年ももちろんゲットしてきました。そこで、参加レポートという形で、今年のクッションが例年に比べてどうだったのかを考察します。 クッションの変遷 まずは、2023年・2024年のクッションと並べて比較した写真がこちらです。 ３年分のクッション 2023年のクッションには「AWS Summit Tokyo」と書かれています。実は2023年までの表記はJapanではなくTokyoだったんですね。 2024年のときは「おぉ！厚くなってる！」「
XSSの攻撃手法いろいろ - うなの日記
html5securityのサイトに、XSSの各種攻撃手法がまとめられているのを発見せり!ということで、個人的に「お!」と思った攻撃をサンプルつきでご紹介します。 1. CSS Expression IE7以前には「CSS Expressions」という拡張機能があり、CSS内でJavaScriptを実行できたりします。 <div style="color:expression(alert('XSS'));">a</div> 確認 @IT -［柔軟すぎる］IEのCSS解釈で起こるXSS で詳しく解説されていますが、CSSの解釈が柔軟なことともあいまって自前で無害化するのはなかなか困難。以下のようなコードでもスクリプトが実行されてしまいます。 <div style="color:expr/* コメントの挿入 */ession(alert('XSS'));">a</div> 確認 <div s
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
[JS]JavaScript無しでも動作するダイナミックなタブコンテンツ
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。 Dynamic Page / Replacing Content デモページ 上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。 仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。 タブ箇所のHTMLは、下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <l
DoCoMo・au・SoftBank 携帯サイト動作確認用シミュレーターのダウンロード
※株式会社マイスタンダードでは、実在性の証明とプライバシー保護のため、グローバルサインのSSLサーバ証明書を使用し、SSL暗号化通信を実現しています。 株式会社マイスタンダードをご覧いただくには、最新のFlashPlayerが必要です。 ・株式会社マイスタンダードをご覧いただくには、最新のAcrobat Readerが必要です。 ・JavaScriptを利用しています。JavaScriptの設定を有効にする必要があります。 [サービス対応地域] 北海道,青森,岩手,宮城,秋田,山形,福島 東京,神奈川,埼玉,千葉,茨城,栃木,群馬,山梨 新潟,長野,富山,石川,福井 愛知,岐阜,静岡,三重 大阪,兵庫,京都,滋賀,奈良,和歌山 鳥取,島根,岡山,広島,山口 徳島,香川,愛媛,高知 福岡,佐賀,長崎,熊本,大分,宮崎,鹿児島,沖縄 システム開
アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換
アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換 アドビシステムズは3月10日に始めた新しいブログ「Design and Web」の中で、FlashをHTML5のCanvas要素で置き換える「Smart Paste」のデモ動画を公開しました。この機能は現在開発中のDreamweaver CS5のプロトタイプ機能とのことです。 （追記3/18：上記ブログの1つ目のエントリ「Design & Web」に、紹介する機能は「It won't be in the next version of CS.」であるとの記述がありましたので、「Dreamweaver CS5」の部分を削除させていただきます。すいませんでした）。 FlashのファイルをJavaScriptでレンダリング、Canvasへ描画 11日付けで公開されたエントリ「Canvas fo
サーバーサイド jQuery をやってみる！ - IT戦記
最近、社内で PHP Spidermonkey が流行って（？）いるようです＞＜！ Cybozu Inside Out: SpiderMonkeyを使ってPHPでサーバーサイドJavaScript id:ama-ch さすがです＞＜ というわけで 僕も、 PHP の Spidermonkey でどのくらいのことが出来るのか試してみました＞＜ まず、 Hello, world! <?php // new して $js = new JSContext(); // print 関数作って $js->registerFunction(function($v) { print $v; }, 'print'); // こんにちはこんにちは！ $js->evaluateScript('print("Hello, world!!")'); Hello, world!おおお、簡単！ 次は、 id:m-hiy
IE8のCSS/HTML/DOM/JavaScriptのバグ情報リスト
IE8のCSS、HTML、DOM、JavaScript関連のバグ情報がまとまったリストをJames Hopkinsから紹介します。 IE8 Bugs 掲載されているバグの数は現在、CSS：63、HTML：4、DOM：2、JavaScript：1となっており、ほとんどのものはTest Caseとしてデモページを参照することができます。
[JS]多くのコンテンツが設置できるドロップダウン型のナビゲーション -jDiv
洗練されたエフェクトでドロップダウンが開閉するナビゲーションをSkyrocket Labsから紹介します。 jDiv デモページ デモでは左端の「Rollover Me!」のドロップダウンに多くのコンテンツが設置できるパネルが設定されており、リストや画像など複雑なものも配置が可能です。 ナビゲーションはリスト要素、パネルはdiv要素で実装されており、デザインのカスタマイズはCSSで自由に設定ができます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <!-- BEGIN MAIN NAV MENU--> <div id="menu"> <ul> <li><a href="#" id="menu1">Rollover me!</a></li> <li><a href="#">Link # 2</a><</li> <li
Twitterの最新の投稿をサイドバーに表示しました – creamu
1つ前のエントリー（Twitterの最新の投稿をオリジナルのデザインで表示する方法）でやってみたくなったので、デザインとCSSをいじってサイドバーに設置しました。 なかなかいい感じ。 ソースは以下の通りです。 XHTML <div id="twitter"> <ul id="twitter_update_list"></ul> </div> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/creamu.json?callback=twitterCallback2&count=1" type="text/javascript"></script> #twi
Twitterの最新の投稿をオリジナルのデザインで表示する方法 – creamu
Twitterの投稿をブログなどに表示したい。 そんなときにおすすめなのが、『How To Display Your Twitter Status in a Unique Design』。Twitterの最新の投稿をオリジナルのデザインで表示する方法です。 素のテキストの状態だと↑のような感じです。あとはCSSでいろいろとデザインに合わせて調整できますね。 以下のソースで表示可能です。 <div id="twitter"> <ul id="twitter_update_list"></ul> </div> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームのテキストエリアをより使いやすくするテクニック集
[JS]表データの列と行をハイライトするスクリプト -TargetTable
IDEA * IDEA