画面サイズごとのデザイン PICKUP STREAM PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <html> <head> <meta charset="utf-8"> <title>PICKUP STREAM</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style-l.css"> </link></meta></meta></head></html></html>
FacebookのLikeBoxを可変にするCSS 親要素に対して、横幅100%で指定してレスポンシブデザインに対応させます。 #fb-root { display: none; } .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; }…
各ブラウザの差異をなくすためのCSS (IE8以上) 現在のv2.0.1は、IE 8+, Firefox 4+, Safari 5+, Opera, Chrome に対応 IE6,7等に対応しているのは、v1.0.1のバージョン /*! normalize.css v2.0.1 | MIT License | git.io/normalize */ /* ==================…
リンクシェアサイトの新着情報一覧 DEMO rss.php channel->item; ?> <html> <head> <meta charset="UTF-8"> <title>リンクシェアサイトの新着情報 RSS表示</title> </head> <body> <p>リンクシェアサイトの新着情報一覧</p>…</body></html>
HeartRails Capture Webサイトのサムネイル画像／PDF ファイルを生成するAPI 「サムネイル画像のURL」と、「貼り付け用タグ」が生成されます。 下記は、「貼り付け用タグ」をそのままコピペで記載しました。
DEMO index.html <html> <head> <meta charset="UTF-8"> <title>検索フォーム</title> <style> body { text-align: center; } </style> </head> <body> <p>QRコードにしたい文字を入力してください。</p> <form action="qrcode.php" method="get"> キーワード：<input type="text" name="keyword" size="40"> </form></body></html>
CSS3アニメーションで画像を振り子のように揺らすスタイルシート DEMO <html> <head> <meta charset="utf-8"> <title>swing</title> <style> body {background: #9cf;} .swing { -moz-animation: swing linear 2s infinite; -moz-transform-origin: center -20px 0; -webkit-animation: swing linear 2s infinite; -w</meta></head></html>…
CSS3用リセット @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, s…
外部ブログのRSSを取得し表示 PHP5で標準実装されたsimplexmlモジュールを利用する simplexml simplexmlとは、XML文書を手軽に処理することができるモジュールです PHP での SimpleXML 処理 XMLファイルの読み込み simplexml_load_file 引数には、読み込むXM…
マカフィー更新後のインターネット接続不可 一部のお客様において、8/18(土)に配信された定義ファイル(6807)適用後にインターネットサービスへつながらない、および機能に問題を起こす不具合が発生したことを確認いたしました。 [現象1] アップデート適用後…
お問い合わせ入力フォーム（1） DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ入力フォーム</title> <style> body { font-size: 1.0em; font-family: sans-serif; line-height: 1.5; color: #333333; background-color: #FFFFFF; } #inquiry { width: 600px; /* ボックスの幅を指定 */ padding: 2p</meta></head></html>…
お問い合わせ入力フォーム（2） サンクスページの作成 入力データを消さないでページを戻る サンクスページの作成 サンクスページが無いと問題がおきます アンケートに答えてくれた人にメールを自動送信するとき、戻って入力し直した場合にもメールが送られ…
DEMO デフォルトの設定 containerWidth : 960, // fixed (px) containerHeight : 320, // fixed (px) headerWidth: 48, // fixed (px) responsive : false, // overrides the above three settings, accordion adjusts to fill container autoScaleImages : …
レスポンシブタイプ DEMO <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>liteAccordion - a horizontal accordion plugin for jQuery</title> <style> /* css for this pag…</meta></meta></head></html>
宅配ピザのドミノ・ピザ｜小学生だけでつくる子ども向けCM、ついに完成！ 「子ども広報室」プロジェクトで制作した「小学生だけでつくる子ども向けCM」 Facebookを使って活動を報告し、記録動画をYouTubeの特設サイトで公開している。 サイトは、縦スクロー…
デザイン ウェブサイトの背景について 最近のウェブサイトで見かける背景のスタイルとトレンドのまとめ | コリス デザインを見る デザイナー必見！アナタにとっての『見たことも無いデザイン』を探すことが出来そうなサイト色々！ | バンクーバーのうぇぶ屋 …
プレイグループ木場校 DEMO シュミレーターで見ると、背景が黒になってしまいます。 自分のスマホで確認したら白だったので、問題ないはずですが。
スカエナ DEMO
ポートフォリオサイト DEMO 高校時代に聞いていたWest Road Blues Bandは、その後のSooo Baad Revueより好き。 大学に入ってからは、BREAK DOWN が拾得の箱バンのような頃で、よく聞いてよく一緒に飲んでいた・・・ブルースは、京都だった時代。
コウベデュカ DEMO
Dreamweaverでの準備 基本構造を入力する <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>[[DreamweaverでjQuery Mobile]]</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> </link></meta></meta></head></html>
複数ページにdata-role="page"属性を記述する 複数のページに「data-role="page"」を記述することで、複数ページを遷移させる 単一ページを「data-role="page"」で記述する ヘッダー（data-role="header"） コンテンツ（data-role="content"） フッター（dat…
カスタムデータ属性 《主なdata-属性一覧》 属性 説明 値の例 data-role UIのパーツとしての役割を設定 page、header、content、footer、button、slider、none、nojs、list-divider data-rel 要素の動作を設定 back、dialog data-url URLを設定 任意のURL da…
jQueryMobile Test DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> </link></meta></meta></head></html>
★ Jérôme Détraz - Designer multimédia ★ スライダーを使用したミニマルデザインのサイト ★ Jérôme Détraz - Designer multimédia ★ Fajne Chłopaki :: Portfolio :: Studio graficzne インパクトのあるトップページと、縦スクロールで整然と並べられた作品…
Intelligent Use Of jQuery Sliders – 45 Inspirational Websites jQuery sliderを使用したサイトのまとめ Intelligent Use Of jQuery Sliders - 45 Inspirational Websites A collection of major brand color codes 有名ブランドのコーポレートカラーのコ…
沖縄の離島活性化プロジェクト サイトの特徴 サイトは「おくなわ」5島（粟国、渡名喜、北大東、南大東、多良間）のPRを目的に管理・運営されています 手書きで手作り風のイメージ jQuery画像スライダーメインのサイト Twitter Facebookページとの連動 沖縄の…
スマートフォン向けのサイト作成の流れ サイトの目的・ゴールの明確化 サイトマップ作成・画面計画 デザイン コーディング サイトマップ作成・画面設計 サイトの階層をなるべく浅く １ページの情報量を適度に多くする ゴールへの導線をわかりやすくする 基本…
サイト制作「Green Leaf」 最新機能に未対応なブラウザへの対応は、「プログレッシブ・エンハンスメント」や「グレースフル・グラデーション」と呼ばれる考え方に従い、表示が崩れ、閲覧に問題が出る場合にのみおこないます DEMO <html lang="ja"> <head> <meta charset="utf-8"> <title>森の工房について</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
デザイン案-A これはお手本にあったままでの動作確認なので、 ここからオリジナルのサイトに変えていけばいいのかな。 DEMO ページのレイアウトに役立つjQueryのプラグイン [JS]ページのレイアウトに役立つjQueryのプラグインのまとめ | コリス
