2012-01-01から1ヶ月間の記事一覧
◆CSSのみでポップアップ画像を表示（画像拡大） <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>cssのみで画像拡大</title> </meta></head></html>
おもしろい動きのjQuery コペンハーゲンのアートフェスティバルのサイト。スクロールすると真ん中を中心に上の部分、下の部分がそれぞれスクロールされる。見えやすさから言うと少し違和感を感じるが、インパクトがあるので催されているアートにあっていてい…
WordPressのプレゼン はじめはフリーテーマをカスタマイズしていたがうまくいがず、毎日テンプレートを見つめるだけで時間が過ぎ去ってしまっていたので、思い切ってオリジナルで作成した。 デザインが固まってない中で作ったので、プレゼンをしている際、わ…
横スクロールの配色がきれいなサイト とても配色がきれい。特にbackgroundの色とデザインに目がいく。backgroundによってサイトのイメージが変わるのでとても重要だと思った。 画像拡大にはこの間教わったhighslideが使われていて見やすい。 横スクロールは…
心和むサイト トップページのカレンダーが毎日更新されるサイト。サイト内は2012年のカレンダーが並んでいて、日本の伝統的な物が日別で紹介されている。クリックで別ウィンドウ表示、手書きでのコメントが書かれていて手作り感が感じられる。 デザインは非…
明朝体にしたい時の font-family font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; font-style: normal; font-variant: normal; font-weight: bold; line-height: 30px;
見ていて楽しくなるサイト
◆可変グリッドテスト #wrapper{ margin: 0 auto; min: 500px; /*最小幅*/ max: 100%; /*最大幅*/ position: relative; } この設定によって、可変した際の最小幅を設定することができる。 ◆jQuery横スライド <html lang="ja" xml:lang="ja"> <head> <meta charset="UTF-8"> <title>slide</title> </meta></head></html>
音楽が聴けるサイト ロンドンを拠点とする元DJのウェブデザイナーによってデザイン・作成されたサイト。色々なジャンルの音楽が聴くことができる。デザインもどのページも『Play』『Pause』『＋』『−』のような再生・一時停止・音量のボタンしかないシンプル…
トップページがテキストのサイト トップページがテキストで、マウスオーバーした際、それぞれ別々の動きをするのでおもしろい。今までで多く見てきたのは、1menuがブロックで変化するマウスオーバーだったが、これは部分部分で凝った変化をするのでインパク…
ロシアのサイト ロシア語のためなんて書いているかわからないけれど、どうやらピザとお寿司の配達サービスサイトらしい。デザイン、レイアウトが気に入ったわけではないけれど、『SUSHI EXPRESS』のページがおもしろいので選んでみた。日本語が左右逆になっ…
◆サイト分析は非常に重要！（SEO対策） キーワード調査サイト http://seo.fc2.com/keywordrate/ http://rc.ferret-plus.com/ Chrome,Firefox 拡張機能「PageRank」を入手企業のランクは『4』、ブログは『3』以上になることが必要。 Google Analyticsで分析必…
背景色とイラストが印象的なサイト ロシアのサイト。背景色のピンクが非常にインパクトがある。イラストもかわいらしい。下部のイラストをクリックすると詳細が表示され、地図上に移動する。 どうやらロシアを紹介しているサイトで、ある美術デザイン高校生…
日付を生かした可変グリッド 日付が大きく活躍しているデザイン。しかも可変グリッドになっていておもしろい。日付もうまく使えば、とてもインパクトがあるデザインになるんだと発見。シンプルなデザインにとても生える。個別ページも画像をうまく掲載してい…
お問い合せフォーム <html> <head> <meta charset="UTF-8"> <title>フォーム情報を取得（自宅復習）</title> </head> <body> <form action="output_fukusyu.php" method="POST"> お名前： <input type="text" name="name" size="20" maxlength="255" /> <input type="submit" value="送信" /> </form> </body> </html>
レトロで背景がかわいいサイト レトロなデザインがとても印象的。背景画像もとてもいい。配色も派手すぎずかわいい。このサイトもさりげなく透明効果が使われていておしゃれ。navもマウスオーバーした際、デザインが変わる等、さりげなく凝っているのもいい…
透明効果のあるサイト 透明効果が使われているのがとても印象的でかっこいい。背景画像もきれいでかつグラデーションになっているのも目がいく。 シンプルなレイアウトにこのような効果を加えるだけで、非常に印象的なデザインになっている。是非今後使って…
トップページが切り替わるサイト goodなタイミングでトップページが切り替わり、トップページが2度楽しめる。色調もピンクでモデルのイメージとぴったり。レイアウトも良い。 化粧の仕方等を動画で紹介しているページもあり参考になる。動画を効果的に使うの…
かわいいサイト PAUL&JOEらしいとてもかわいいサイト。ピンクを主体に色使いがとてもやわらかい雰囲気。商品ページも見やすくかわいい。PAUL&JOEの商品のかわいらしいデザインとサイトデザインがとてもマッチしていると思う。今まで使ったことがないけれどち…
◆データベースについて データーベースは立体的になっている。 ノイマン型コンピュータの考え方が基本。 INTは整数の意味。id等はINTになる。 個人情報の扱いにはくれぐれも注意。 《参考書籍》 よくわかるPHPの教科書 作者: たにぐちまこと 出版社/メーカー…
配色が印象的なサイト シンプルなグリッドレイアウトだけど黒とピンクの配色が印象的。基本的にかわいいイメージであるピンクがかっこいいイメージになっている。濃いピンクではなく、薄めのピンクであることが非常にバランスをよくしているように感じる。 …
手書き感いっぱいのサイト 縦にとても長いサイトだが、配色がシンプルなので目に負担が少なくスクロールが苦になりにくい。ただ、テキストが手書きなのはいいけれど、少々読みにくい上、サイドバーのメニューと結びつけにくい。 全体のデザインとしてはとて…
HTML5のとても凝った面白いサイト イラストすべてに細工がされていてとてもおもしろい。動的なものはJavaScript。面白法人というだけあって、ほんとおもしろいサイト。ソースをみると、「2012年 A HAPPY NEW YEAR FROM KAYAC INC. !!!」とこちらにも新年のあ…
WordsPress背景画像設定について 【テキスト7-2】 <html xmlns="http://www.w3.org/1999/xhtml"> <head> ･･･略･･･ <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> </link></head></html>
マウスオーバーで切り替わりおもしろいサイト 手書きのようなフォントや絵をマウスオーバーすると、フォントは別のものに切り替わり、絵はカラーになる。一見、白とグレーの2色で手書き感いっぱいのサイトに見えるが、マウスオーバーした部分は別のサイトの…
6章まで完了。 テキスト【step7-2】通りで背景画像を表示できた。 テーマを早く決めて、課題にとりかからねば。◆パーマンネントリンク･･･サイドバー等の固定位置にあるリンク。 ◆トラックバック･･･本文中の特定の言葉に設定するリンク。新しいサイトをUPする…
かわいいサイト トップページにオロナインがポンと置かれているのがとても印象的。 縦にスクロールしていくと、出てきたオロナインがクルっと回るのがとてもかわいい。画像とオロナインの説明しかないとてもシンプルなサイトだけど、商品説明およびアピール…
シンプルでかっこいいサイト シンプルで見やすくわかりやすい。写真がランダムに並んでいることにより、レイアウトが更にかっこよく見える。情報も読みやすい。シンプルでよくありがちな感じのレイアウトだけど印象に残る。これは4カラムレイアウトなのだろ…
パンダカフェ茶の花サイトを修正しました。 http://mitani.kurushiunai.jp/pandaweb/index.html◆主な修正点◆ ドリンクメニューの横幅を中心に向かって縮小し、横スクロールが表示されていたchromeでもフルサイズで表示できるように変更。 chromeおよびIEだと…
WordPressレッスンブック入力 5章まで入力完了。 はじめは手間取ったものの、入力しているうちに規則性がなんとなく理解できた。 が、テキスト無しで入力できる日はまだまだ遠い。 1/26発表予定のオリジナルサイトのテーマについてはまだ考え中。 ブログシス…
