ニューヨーク住人によるビジネス・観光・生活情報など。ご依頼・ご相談はお手数ですが下記「お問い合わせ」からメールでお願いします。 by NY_Liberty
!["Tebrikler Tokyo"(おめでとう東京)、親日国トルコと日本の関係 | ニューヨークの遊び方](https://cdn-ak-scissors.b.st-hatena.com/image/square/208bd774d5dc5d5ca3f5c9127727e7c002d2ba01/height=288;version=1;width=512/https%3A%2F%2Fpds.exblog.jp%2Fpds%2F1%2F201309%2F09%2F05%2Fb0007805_1935130.jpg)
ニューヨーク住人によるビジネス・観光・生活情報など。ご依頼・ご相談はお手数ですが下記「お問い合わせ」からメールでお願いします。 by NY_Liberty
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル1からコードを紹介していきます。 サンプル1 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
誤解がないようにしたいのは、これらの企業は決してスマートフォンを「切り捨てた」わけではない。GAPやキヤノンのサイトを見ると分かるとおり、各パーツや写真が非常に大きく、PCのブラウザーで閲覧すると、画面が少し寂しくさえ思えるほどだ。 タブレット端末、特に最近普及してきている7インチ前後の小型タブレットで閲覧した場合、大きなパーツでないと指でタッチしにくいので、スマートフォンやタブレットのことを第一に考えた、いわゆる「モバイルファースト」なWebサイトと言えるだろう(筆者は、タブレットも考慮して「タッチデバイスファースト」と呼んでいる)。特に、BEAMSのサイトはアプリのような作りで、カタログをぱらぱらとめくって眺めるような感覚で操作できる。 ただし、このような思い切った戦略をとれるのはBEAMSやNike、GAPがファッションブランドであり、「写真」がコンテンツの大きな比重を持っているため
「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ:div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました! レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
先日、うちの夫がTwitterでこんなことを言っていた。 そうか。こどもはなんでも楽しむっていうけれど、ぼくらおとなにとっての「手段(目的地へ行くために走る)(紙を切るためにはさみを使う、とか)」を娯楽に変えているのか…。ぼくはつい「目的」のための「手段」として行動の主従関係を考えてしまうけれども、それは彼らには通じない考え方だよなあ。 おっ、夫のくせにたまには面白いこと言うなと思ったわけですが、確かに最近、うちの息子は「はさみで切るという手段」にハマっています。色とりどりの折り紙を切り刻み、ソファーの上には折り紙の断片が山のように… 基本的に大人がやる行為には「目的」があって、そのために手段がある。はさみを使うのは、切って何かをつくるのが「目的」だし、お風呂でお湯を汲むのは、体を流すのが「目的」。けれど子供がやることの多くは、大人にとっての手段自体が目的だったりする。ただ、はさみで紙を切
ウェブページのレイアウト用にグリッドを設計したり、エレメントの中心をだしたり、余白を確保するなど、Photoshopのガイド引きを楽チンにするエクステンションを紹介します。 この機能はデフォルトで実装してほしいですね。 GuideGuide 以前、紹介した時に比べてバージョンアップし、使い勝手がよくなりました。 [ad#ad-2] GuideGuideの対応バージョン GuideGuideのインストール GuideGuideの使い方 GuideGuideの対応バージョン Photoshop Photoshop CS4 Photoshop CS5 OS Windows(32bit) Windows(64bit) Mac OS CS5+Mac OSX Lionでは「Patch」が必要です。 GuideGuideのインストール GuideGuideのインストールは簡単です。 ここでは、Windo
うちの会社の今の社員数は5人です。正真正銘の零細企業です。ちなみに僕自身のキャリアは、同期だけで400人以上いる10,000人規模の大企業からスタートしました。そこに4年間勤めた後、10人規模の広告会社(2年)→30人規模の制作会社(4年)→フリーランスとして独立→会社設立ときて現在に至っています。そのため、大企業で働くこと、中小企業で働くこと、零細企業で働くこと、フリーランスで働くこと、いずれのメリット・デメリットもある程度は分かっているつもりです。 実際のところ、働き甲斐というのは、会社や組織や環境の中で自分が何をやるか、どこまで自分の限界を越えられるか、どれだけの人に好影響を与えられるか、というまさに自分自身の問題であって、会社の規模はあまり関係ありません。なのでフリーランスやベンチャーに勤めている人が時に声高に言いがちな、今どき大企業で働くことを希望する若者ってどうなの、みたいな意
AdminTitle List . SKY IMAGE1 SKY IMAGE2 SKY IMAGE3 Recent entries 2016/05/05 (Thu) SAPAM 2016/05/05 (Thu) SPA6 2016/05/05 (Thu) SPAM5 2016/05/05 (Thu) 2016/05/05 (Thu) SPAM4 SAPAM 2016/05/05(Thu) 22:41 未分類 Page up▲ | HOME | Next≫ Designed by mi104c. Copyright © 2024 ., all rights reserved.
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには? ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
最近よくウェブデザイナーを目指しています!というプロフィールの twitterアカウントにフォローされることが多くなりました。 ウェブ系で働いている私としては、こうやって目指すひとが増えるのは とても嬉しいこと。 夢をみるだけでなく、会社に就職したり独立したりするまえに、 いまからできることを、書きだしてみました。 ●実際に働いているクリエイターさんのお話を聞く 本当はこれが一番早いんです。 本物のデザイナーさん、クリエイターさんに出会え、 本物だと気がつけたら、その人についていったらいいとおもいます。 何に興味があって、何を買って、いまどんな行動をするのか。 その理由は何なのか。 行動から考えてみると、答えに近づきやすいでしょう。 ただ、ウェブデザイナーの場合、会社でおつとめしている方でも会社員よりの人 クリエイター寄りの人、アルバイト寄りのひと 楽天などで商品登録をしているひと、マーケ
Flower and Nature Photographer based in Sway, Lymington, Hampshire, England, UK ‘RHS Photographer of the year 2008’ ‘1st Place Beautiful Gardens, 1st Place Beauty of Plants – International Garden Photographer of the Year Competition 2020’ ‘The glory of the garden lies in more than meets the eye’ – Rudyard Kipling.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く