2012-09-01から1ヶ月間の記事一覧
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>
