本記事は『HTML5＆CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。』の「第7章 Webページをマルチデバイスに対応させる」の一部を転載・編集したものです。 01 導入と基本設定 マルチデバイス対応の必要性 Webページを閲覧するデバイスは、PC以外にもスマートフォンやタブレットなどさまざまです。これらは、画面サイズやブラウザにも違いがあるため、PCでの閲覧のみを想定したWebページだと、ユーザーによっては不便だと感じるかもしれません。下の画像を見比べてみると、よくわかるでしょう。本書の現時点でのサンプルデータはまだマルチデバイスに対応していないので左側のようになりますが、スマートフォンに対応すると右の画像のようになります。 POINT マルチデバイス対応は、ユーザーにとってだけでなくSEO対策を考えるエンジニアにとっても大きな意味を持つ作業です。たとえば、Google
1. このエリアをマウスでクリックします。 2. キーボードの「Ctrl」キーを押しながら「V」キーを押します。 クリップボードにある画像から「GIF/PNG/JPEG/BMP」ファイルを作成します。 クリップボードとはパソコンで一時的に「画像や文字列」などを保存する共有メモリです。このツールではパソコンのクリップボードにある画像をファイルとして作成するものです。もちろん、クリップボードに画像が無い場合はファイルを作成する事は出来ません。 Windowsの場合ですと、キーボードの右上辺りにある「Print Screen」(PrtSc)キーを押すとOSに表示されている全画面が画像としてクリップボードにコピーされます。「Alt」キーを押しながら「Print Screen」キーを押すとアクティブウインドウ(最前面にあるウインドウ)の画像をクリップボードにコピーする事が可能です。 Print Sc
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
RFC6455 - The WebSocket Protocol 日本語訳 この文書は、 IETF による, 2011 年 12 月付け発行 PROPOSED STANDARD RFC 6455 "The WebSocket Protocol" （HTML 版） を日本語に翻訳したものです。 この翻訳には翻訳上の誤りがあるかもしれませんし、正確性は保証されません。 この仕様の公式な文書は英語版であり、この日本語版は公式のものではありません。 最終更新日時点のこのページの URL ： http://www.hcn.zaq.ne.jp/___/WEB/RFC6455-ja.html CSS や DOM の対応が古いブラウザでは、閲覧に不具合が生じたり, 一部の切替機能（ウィンドウ左下隅：原文表示＝アクセスキー Z, 原語表示＝アクセスキー X ）が働かないかもしれません（ HTML5 から導入
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 2013年06月18日- Easily Remove Image Backgrounds Online - Clipping Magic Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 画像をアップするとブラウザ上に編集ツールが現れ、緑色のペンで残したい部分、赤色のペンで背景を適当になぞればリアルタイムに背景が消えてくれます。 リアルタイムに消えてくれるので、間違っていた場合も簡単に良い結果が得られるまで修正を加えられます 写真から背景を簡単にくりぬきたい時に使えそうですね 関連エントリ Bootstrapなサイトで使えそうなクールなツールチップ実装jQueryプラグイン「Smallipop」 色々とカスタマイズが可能なツールチップ実装
「HTML5とか新しいこといろいろ」あるけど、 「前からある考え方、手法も大事」なので、 「どっちもバランス良く、出来るところから少しずつやりましょう！」というHTML5関連（＆それ以外）の勉強会です。 今回のテーマは「JavaScript (for beginners)」です！
ブラウザ上に楽譜が表示されるライブラリって、実は結構あるみたいです。でも、入力補助を作りこめたり、拡張性を持たせたり、サーバーと連動したシステムを作ろうとするとかなり大変そうだったので、もう一から自分で作ってやろうと思って、作ってみました。プログラムとかよくわからんし、「javascript？ああ、HTMLのすごいやつでしょ」くらいの認識で始めたのがすべての間違いだった。サイトURL http://quina-music.sakura.ne.jp/ツイッター @quina_musicコミュ クイナが作曲するよ co558364まだまだバグが多いので、バグ報告うれしいです。テキスト表示させるプログラムとかも組んでくれたらうれしいです。
2013年3月の人気記事「アジャイルがダメだと思う論争」「HTML5をすぐハイブリッドアプリに」「アジャイル開発で使われているプラクティスは？」ほか 新年度がやってきて新しい組織や新しい仕事に張り切っていらっしゃる方も多いと思います。僕は個人事業主なので、4月になっても全く変わらず毎日ブログを書いていますけれど。 さて、3月のPublickey人気記事と運営報告を行います。まずは人気記事から。 1位 「アジャイルがダメだと思う7つの理由」から始まったアジャイル論争の現時点のまとめ 2位 HTML5をすぐハイブリッドアプリとして試せる無料のツール「Monaca」を使ってみた 3位 JavaScriptの実行速度を劇的に改善するasm.jsの特徴は、CやC++のような言語をJavaScriptのサブセットで記述すること 1位になったのは、アジャイルをめぐる論争のまとめ。そして2位はHTML5を
teiichi ota @otachan UnityのFlash対応撤退は自分の運命を自分でコントロールできないPFを避けるというふつーの守りの戦略。Flash自体の未来には直接繋がらんよ。カウントダウンだなんだ言ってんのは雰囲気だけで生きてる証拠。そもそもUnity->Flash変換のゲーム見たこともねーだろw 尾野（しっぽ） @tail_y 単純に今までUnityのみだと普及率無いよねみたいに言われちゃうから、FlashPlayer上でも動きますよって言って開発者にアピールしてたところが、最近UnityPlayerも普及してきたし、そもそもFlash書き出し誰も使ってないよね、ってのでサポート終了なだけってのはある 尾野（しっぽ） @tail_y が、それとは別に、Adobeは何焦って、変なライセンス形式の発表とかしてんだよってのはある。あれで変な報道されちゃうし、Unity側へ心情的
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
Guacamoleは、リモートデスクトップ接続の環境をWebブラウザーで利用可能にするサーバー用ソフト。「HTML5」対応のWebブラウザーがあれば、パソコンやタブレットなど機種を問わずにアクセスできる。 リモートデスクトップ接続を使うには、サーバーとなるPCに「サーバーソフト」をインストールし、端末側に専用の「クライアントソフト」をインストールする必要がある。例えばUbuntu 12.04の場合、サーバーソフトとして「vino-server」、クライアントソフトとして「Remmina」が標準インストールされている。 Guacamoleを使うと、クライアントソフトとして「HTML5に対応したWebブラウザー」を利用できる（写真1）。Guacamoleそのものは、Webサーバー上で動作するJavaアプリケーション（Javaサーブレット）。クライアントソフトとして振る舞いつつ、デスクトップ環境
料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました！ jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex
こんにちは、martinです。日本に帰国して1年が経ちました。昨年は２月から新しい職場で働き始めたり、9月６日に第１子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます（静的リンクが有効な場合ですが）。今時のブラウザならエンコ
ウェブページに表示した文字や画像を回転したり、歪めたりすることができれば便利なのに――そう考えたことはないだろうか。CSSのトランスフォームの機能を利用すれば、「回転」「拡大・縮小」「スキュー（シアー）」「移動」の4種類の変形処理を簡単に適用することができる。 トランスフォームの機能を利用する トランスフォームの機能を利用するには、transformプロパティを利用する。現時点ではSafari 3.1以上とGoogle Chrome、Firefox 3.1（ベータ版）が対応しており、SafariとGoogle Chromeでは-webkit-transform、Firefoxでは-moz-transformと記述する。 たとえば、次のようなサンプルを用意してトランスフォームの処理を適用してみよう。ここでは、横幅300ピクセルの黄色いバーの中央に文字を表示している（サンプル01）。
TIPS 001：現在の位置情報を取得する 現在の位置情報を取得するには、navigator.geolocationオブジェクトのgetCurrentPositionメソッドを利用します。以下は、Geolocation API経由でユーザーの現在位置を取得し、経度／緯度／方角を表示する例です。 ［リスト］現在の位置情報を取得するコード（current.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> window.addEventListener('DOMContentLoaded', function() { // 結果の表示先（<div>要素）を取得 var latitude = document.querySelector('#latitude
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
