新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
20 Creative Design Galleries to Submit Your Website
2013年3月25日 Web Design Web design gallery websites are very useful to get inspiration. When you had created great works, show off your creative design which you are really proud of! All of the ones featured in this post are free to submit to. I will share some Japanese web design galleries as well. [adA-en] You can submit your website from “Submit” page. People who are managing those gallery websit
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
無料で商用利用も可能な印象的な英字フォントいろいろ
ウェブサイトやイラスト・ポスターなど、何かをデザインする時に重要になってくるのが、情報をいかに効果的に伝えるかということ。ウェブデザインに関する情報を集めたブログCrazy Pixelsが、そんな時に役立ちそうなインパクトのあるフォントを50以上集めています。フォントはそれぞれ無料で商用利用も可能です。 50+ Precious Free Fonts for Commercial Use | Crazy Pixels http://crazypixels.net/50-precious-free-fonts-for-commercial-use/ ◆Museo Slab:がっしりしたゴシックフォント。このフォントには12種類のスタイルがありますが、そのうち「Museo Slab 500」と「Museo Slab 500 Italic」がフリーで利用可能です。 ◆Free Font Qarm
商用でもフリーの日本語フォント・こども丸ゴシックに細字タイプが追加
制作者さんよりご連絡頂いたので ご紹介。いつも有難う御座います！ 以前ご紹介した、商用でも無料で 利用可能、クレジット表記も不要 の日本語フォント、こども丸ゴシ ックに細字タイプが追加されたと の事です。 手書き風の日本語フォント。商用でも無料で利用可能です。漢字は小学校1~3年で習う漢字が入っているとのこと。 こども丸ゴシック細め 公式のキャプチャ。かわいいです。 試しに思いつきで作って見ました。 ※この委員会が存在するかは知りません。子供の画像から思いつきで書いただけですので誤解無きよう。 フォントは何もデザイナーさんだけが必要としているものでは無いので商用で利用出来る日本語フォント、というだけでも多くの方にとって価値の高いものかなと思います。 ダウンロードは以下よりどうぞ。 Typing Art
Webデザイナーによるカラーコードを使った便利なテクニックあれこれ
By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ
[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
日本で全く冴えなかったWeb屋が海外就職する為に必要だった絶対の5カ条！ | バンクーバーのうぇぶ屋
今日はたまには海外WEB屋なお話もしなくちゃと思い、ちょっと前にお友達になった玉さんとのお話を公開してしまおうと思います。 彼は現在、カナダの現地の制作会社に勤務する日本人WEBデベロッパーです。2009年にバンクーバーのIT専門学校へ入学してインターンシップを経て海外就職に成功し現地の制作会社にてWeb制作を続けています。それだけに留まらずに、今ではカナディアンのIT専門学校のカリキュラムアドバイザーに就任するまでに至った人です。（要するに学校の授業内容とかにアドバイスする人っすね。） 僕はカナダに渡って数年も立たずフリーランスになった側の人間なので、彼のような現地の企業へ就職しきちんとしたキャリアを積んでいる人はやっぱり凄いなと思います。 しかし、僕は高卒（印刷会社に就職後、仕事しながら日本のクリエイター育成スクールに1年通学）。そして彼は高校中退→大検というキャリアです。 『海外で仕
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
Photoshop CS6で快適にWebデザインするテクニック vol.5
「PhotoshopでWebデザイン」をするためのテクニックを紹介するこの連載。全5回にわたって、さまざまなテクニックをご紹介してきましたが、今回が最終回です。 最終回は、写真やイラストなどの画像素材を加工して、バナーや背景を作成する際に役立つCS6ならではの新機能をいくつかご紹介したいと思います。 おさらい 【レポート】Photoshop CS6で快適にWebデザインするテクニック vol.1 【レポート】Photoshop CS6で快適にWebデザインするテクニック vol.2 【レポート】Photoshop CS6で快適にWebデザインするテクニック vol.3 【レポート】Photoshop CS6で快適にWebデザインするテクニック vol.4 レイヤーごとに一気に自動スライス! デザインしたサイトの画像パーツを切り出す時、"スライスツール"で範囲指定して書き出すにはパーツ数が多
レスポンシブWebデザインはブームではない
スマホ表示がFC2のデフォルトテンプレート使ってるような私にいわれたかないでしょうが、あくまでも使ってるユーザー側の視点として考えてもらえると嬉しいなと。 決して軽くするのが目的ではない 基本的にCSSでもじょもじょしているわけですから、例えばPC表示でサイドバーに画像があり、その領域をスマホに最適化する為に全て排除したとしても、見えないだけで読み込んでは居るわけですね。 Ethan Marcotte（イーサン・マルコッテ）氏が考案したレスポンシブWebデザインが生まれたのは2010年の5月。読み込みサイズに関してはやはり海外でも色々と議論されているわけでして、なかなかどうして大変ですねと。 そこから1年くらいたったあたりから日本にも広がりつつあります。 広がった理由はとてつもなく単純でして、PC表示、小型のスマホ、タブレットなど、様々なデバイスサイズに対応するために、全て1からCSSを書
ここがヘンだよRWD（レスポンシブWebデザイン） / Maka-Veli .com
定義がいまだ曖昧 何を指して「レスポンシブ」なのかと。 モバイルファーストという考え方は素晴らしいです。レスポンシブとするならば、やはり制限のあるスマホでの閲覧は考えるべきで、そこにどうアプローチできるかは優先的に考慮しなければ、そもそもRWDを取り入れる必要性は無いわけですから。 いや、スマホでのアクセス見込みは切り捨てで、おまけ程度で見せたいからRWD採用って手も無くは無いか・・・ 極端な話、こういったサイト、プロジェクトならばPC閲覧時のデザイン、装飾は極限までにそぎ落とし、スマホ閲覧時にどれだけ快適にできるか、つまりPCサイト（PC表示時）はシンプルで良いんじゃないかなと思います。（この時のポイントは企画段階時のRWD導入の見極めかなと思います） しかし、PC閲覧の最適化が後回しになり、最終的にPC閲覧時、特にまだまだ使用率の高い解像度1024、1280（共に横）などでの閲
Basic Process to Apply CSS to Your Website
2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次
激安 格安 爆安ホームページ制作屋
！！新勘ウエッブログはじめました！！ ！！旧勘ウエッブログはじめました！！ 大閉店セール開催中（期間未定） いつもとかだと１ページ２０、０００円のところ １９、８００円でどうですか？ 何故か大人気となってしまう私のオリジナルデザインを 抽選で１名に無料で３ページ作ってあげます。 無料だからといって、手抜きはしないのでご心配なく。 ようこそCOOL職人の谷口です（↑似顔絵） 絵は管理人がペイントソフトで書いたものです。 真似や使い回しは出来ません。 Yahooに掲載されました！ これを記念して、広告を大募集！ 広告料金もYahoo掲載ホームページでありながら 驚きの低価格！月極８万円！ あなたのボラウザ環境 あなたは2736222人目のお客様です 最終更新日2005年2月27日 見積り無料になりました！ 壁紙をFlachにしてみました！ Yahoo申請経験を生かした制作 激安１ページ２０、０
HTML5を使ってWordPressをiPadに最適化するプラグインOnswipeを試した→結果：なかなか(・∀・)ｲｲ!! - かちびと.net
iPadでアクセスしたときに、WordPress をiPad向けに最適化してくれるプラグイン Onswipeを試してみましたが、思いの外 良かったのでご紹介。ページ推移もフリ ックで出来る雑誌風レイアウトに自動で 変換してくれますよ。 OnswipeはHTML5を使って、WordPressを自動で雑誌風のレイアウトにしてくれるプラグインです。WordPress.comでも既に導入されており、プラグインとしても配布されています。 人気のFlipboardライクなインターフェースにしてくれると聞いて試してみましたが、なかなか良かったので備忘録がてらご紹介します。 使い方はすごく簡単で、基本的には有効化してフォントや色を選ぶだけです。試しにWPデザインギャラリーでテスト。 Before 可変式のグリッドレイアウトなので何もしなくても一応はちゃんと表示されていました。 After ご覧のようにマガ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
Dreamweaverのコードカラーリングまとめ | Webデザインのタネ
HTML5.JP - 次世代HTML標準 HTML5情報サイト
見栄えが良くなるPhotoshop簡単テク
