固定ヘッダーをレスポンシブ化してスマホ対応する手順
ハンバーガーメニューをタップすると、SPナビゲーションが表示する仕組みは「jQuery」を使って実装します。 初学者の方や、これからウェブデザインを始める方にとって、難しいかもしれませんが、わずか数行ですので諦めずにチャレンジしてみてください。 細切れにソースを見るのが面倒は人は、記事後半に全ソース載せてるので、そちらをご覧ください。 それではいきましょう スマホサイズでPCメニューを非表示にするメディアクエリでブレイクポイントを設定するいきなり難しい言葉が出てきましたが、心配いりません。 ブラウザの横幅が「何ピクセル以下」になったら「スマホ用のCSS」が効くようにするかを決めているだけです。 今回は、ブラウザの横幅が「640px以下」の時に、スマホ用のCSSを効くようにしたいので、次のように指定します。 コードは、前回記事の後半に記載してあるCSSの続きから書いてください。 @media
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
HTMLとJavaScriptでiPhoneアプリを作る時に加速度センサを使う方法 - 電子趣味の部屋
まず前回のエントリーの「HTMLとJavaScriptでiPhoneアプリを超簡単に作る方法」を読んでください。 今回は前回のエントリーの続きとして解説します。 HTMLファイルの準備 今回は、加速度センサによって得られるxyzの値をそのまま表示するHTMLを使います。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <script type="text/javascript"> // このファンクションがアプリより実行される
HTMLとJavaScriptでiPhoneアプリを超簡単に作る方法 - 電子趣味の部屋
過去のエントリーの改訂版です。 今回はより簡単にHTML+JavaScriptでiPhoneアプリを作る方法を紹介します。 より少ない手順で、ビルド時に警告もありません。 iPhoneSDKにはSafariにも搭載されているレンダリングエンジンのWebkitが含まれています。これを利用して、HTMLでもiPhoneアプリを作ることができます。 このままAppStoreにも登録できます。 ゲームも作ろうと思えば作れますが、iPhoneのCPUはPCと比べると非常に遅いので、いくらJavaScriptが早いSafariと言えども、動作速度は期待できません。 HTMLファイルの準備 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" co
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net
cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cross-Browser CSS Gradient ハック、テーブルも使用しないドロップダウンメニュー シンプルなドロップダウンメ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://yp.xenophy.com/?p=71