2012-01-01から1年間の記事一覧
Kube Framework Kube Framework 超軽量（min:16KB）のフレームワークで、LESSバージョンもあります 全てのモダンブラウザの最新版、IE8+、モバイル用のブラウザに対応 デモページはすっきりとまとまった、端正な顔つきのデザインです。 デモページ CSSHórus …
＜訃報＞日本ブルース界を支えたドラマー島田和夫 - NAVER まとめ 島田和夫語録 ○○ちゃん、講談社文芸文庫て、なんであんな高いねん。織田作のん買お思たら１１００円！金持っとたからええけど、足らんかったら恥かくとこやった…。
CSSコードの配置方法 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 下記ブログ著者のお勧めは、3.の方法レスポンシブ・ウェブデザインでの CSS コードの書き方 一…
CSS拡張メタ言語とは CSS拡張メタ言語はCSSの言語自体を拡張し、CSSには存在しない機能を追加します。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加することができます。 「Les…
Facebookソーシャルプラグインの種類 Facebookソーシャルプラグインは11種類 Social Plugins-Social Plugins いちばんよく見るLike Button 必要事項を入力し、コードをゲットします。 参考サイト いいねボタンを設置 - 求職者支援訓練Webデザインの勉強 | 風…
Twitterのツイートを視覚化するツール「Twisualise」が面白かったので、ご紹介します。 Twisualise | See Your Twitter :) 試しに、Milla Jovovichのアカウントを入れてみました。 Data Overview 100ツイート（デフォルトで、数値は変えられます）のうち、青…
21_21 DESIGN SIGHTで、田中一光の展覧会開催 今日から始まる企画展です。 日本を代表するグラフィックデザイナー 田中一光（1930〜2002）は、伝統の継承から未来の洞察、東と西の国々との交流など、田中自身の言う「デザインの前後左右」を見すえたアートデ…
縦スクロールの１Pサイト トップページ 楽天のポイント分も考えるとすごく安いです。 対応エリア なんか、ほとんどの人が利用できそうな書き方です。 対応エリアに入っているか確かめる やっぱり、というか当然入っていません。 その他の地域のうちは、エリ…
Twitter Bootstrapとは Twitter社が作った、CSSフレームワーク jQueryに依存している サンプルページ 公式サイトに3種類のひな型があったので、試しに可変レイアウトをアップロードしてみました。 <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </meta></meta></head></html>
上田正樹バージョン 確かに、キー坊（上田正樹）の方が聞きやすいですね。 通り雨 | 金森幸介 この歌は、幸介さんの歌声が合っていると思います。 ドアをあけて | 中山ラビ 高校生の私の頭の中で、ずっとリフレインしていた歌です。
可変レイアウト＋固定レイアウト Lサイズ：横幅960px Mサイズ：横幅620px Sサイズ：横幅可変 広告は、楽天のウィジェットを付けました。 画面サイズごとのデザイン PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>可変レイアウト+固定レイアウト</title> <link rel="stylesheet" href="style-l.css">…</link></meta></meta></head></html>
画面サイズごとのデザイン Lサイズ：横幅960px Mサイズ：横幅620px Sサイズ：横幅300px スマートフォンではコンパクトに表示する スマートフォンでの表示をコンパクトに PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>スマートフォンでの表示をコン</title></meta></meta></head></html>…
画面サイズごとのデザイン Lサイズ：横幅960px Mサイズ：横幅620px Sサイズ：横幅300px PICKUP STREAM2 ※出来ることが少ないので、せめて写真ぐらいは自分で撮ったものを使おうと思っています。 メイン画像は、アメリカ西海岸のモントレーという小さな街の看…
男性と女性、物の見え方に違い 最新の研究によると、女性は色の違いを見分けることに優れ、男性は素早く動く物体を目で追ったり、遠くの細かいものを見分けたりすることが得意だという。 同じ色相を知覚するのに男性は女性よりやや長い波長が必要 波長は長い…
画面サイズごとのデザイン 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の特設サイトで公開している。 サイトは、縦スクロー…
デザイン ウェブサイトの背景について 最近のウェブサイトで見かける背景のスタイルとトレンドのまとめ | コリス デザインを見る デザイナー必見！アナタにとっての『見たことも無いデザイン』を探すことが出来そうなサイト色々！ | バンクーバーのうぇぶ屋 …
