「スマホ対応サイト制作 初心者向け」 -2.画像をCSSで操る編（前編）- - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） さて、前回はCSSでスマホ向けにする超基本の紹介でした。 が…実際のところ、あんな超シンプルなサイトは無い訳で… 実践となると、もう少し工夫が必要になってくると思います。 そこで、今回はサンプルをもう少し現実的な形にして、 スマホ化してみたいと思います。 今回のサンプルファイルです。 smart_sample02.zip ＜今回のポイント＞ 1．要素の取捨選択 → 要らない要素はdisplay:none; 2．HTMLとCSSだけで画像を振り分ける → HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none; 3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ 今回のサンプルとなるサイトはこんな感じです。 前回よりも
スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。 - Kaleidoscope
即座にDLできるようにアーカイブ化。 ※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。 （あまりいらっしゃらないとは思いますが…）もしそれ以前にDLされた方は、現在修正版をお使いください。 ご報告いただいたnaruさん、ありがとうございました。 （ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください） smart_sample02.zip 02.zip 02v.zip 03.zip 03v.zip 04.zip 04v.zip スマホサイトのリスト型メニューを何パターンか作ってみた 仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。 スマホサイトといえば、リスト型メニュー？がスマホならではですよね。 今後のスマホサイト
JavaScriptでネイティブアプリ開発、「Chromeless」新実験プロジェクト | エンタープライズ | マイコミジャーナル
Chromeless Browser Mozilla Labsは2007年、Webアプリケーションをデスクトップと融合させるプロジェクトPrismを発表した。Firefoxを構成している技術をベースにして特定のWebアプリケーションをあたかもネイティブアプリケーションのように振る舞わせることを目的としていた。Mozilla LabsはこのPrismプロジェクトを終了させると発表。代わりに、その後継プロジェクトとなるChromelessを開始した。 Chromelessの目的はPrismに近いところにあるが、この3年間の経験を加味してより一般的なアプローチを採用している。PrismはWebアプリケーションをデスクトップアプリケーションのように振る舞わせることに主眼が置かれていたが、ChromelessではHTML、JavaScript、CSSなどの技術を使ってネイティブ風アプリケーションを開
「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
Kaleidoscope
こちらになります。 http://blog.kaleido-jp.net/ はてな好きなんだけどなー。 どうしてもデザイン凝り出すと限界があるので、引越しました。 今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;) たとえば、Yahooさんとかがやっているんですが、 「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。 Yahoo! JAPAN （スマートフォンサイト） （Yahooさんの手法とは違うかもしれませんが） その方法を紹介します。 僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。 そもそも、iOSのSafariやAndroidの「ブラウザ」は、 ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、 URLバーが引っ込む仕様のようです。 （あくまで推測。ページ内リンクなどで、そうなるのが
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
WEB・アプリ開発・音楽制作 | Kaleidoscope
人探し的な投稿が続いていますが、、、Unityでゲーム作りができる方を探しています。 現在、新作iOSアプリを開発・制作中ですが、私（荒木）が執筆や音楽制作のお仕事で 時間が割けなくなってきたため新作の進捗が滞っています。 もし助けていただける方がいらっしゃるようでしたら、 お会いしてお仕事の相談をさせていただきたいです。 具体的に探している方は、下記のような方です。 ・ゲームエンジンUnityが使える方（個人） ・かつ、Unityのスクリプトを組むことができて、ゲーム開発を行えるスキルがある方 要するに、こちらが持っているゲームのアイデアをUnityを使って形にできる方を探しています。 とは言っても、グラフィックや音楽まで形にしてほしいということではありません。 ゲームの仕組みをプロトタイピングできるレベルの方を求めています。 「Unityを使いこなせるスキルはあるけど、なかなかアイデア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
