『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![Bootstrap利用、無料HTMLテンプレート素材まとめPhotoshopVIP |](https://cdn-ak-scissors.b.st-hatena.com/image/square/65f9916bcb867a8a436766db6dcf7bb839e977fd/height=288;version=1;width=512/http%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2013%2F12%2Fbootstrap_html_top.jpg)
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE(Internet Explore)のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える(かもしれない)最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
昨日のSeasar2のエントリについたコメントなどで、「とはいえ代わりに何つかうの?」みたいな話が出てたので、とりあえずJava EEのWebフレームワークについて簡単にまとめてみます。 Java SE 8+Java EE 7+lombokで書いていますが、基本的なところはJava SE 7+Java EE 6でも大丈夫です。 なので、今どきとは書いてますが、基本的には2009年12月のJava EE 6ということで、実はすでに4年近くたってます。 何も考えてない なんも難しいこと考えないなら、やっぱJSPが楽ですよね。 なんでも書けちゃう。 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=
デザイナーチームマネージャーのひろです。 最近、息子のアンパンマンのハマり具合に困惑しています。 アンパンマンが、画面に現れるやいなや大興奮。 軽い近所迷惑状態です(@_@;) クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね(笑) さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です!Bookmark間違いなしです!! デザインするときに役立つWEBサービス5選 960 Grid System 横幅960px用にグリッドが引かれたpsdを何パターンかDLできるWebサービス。 http://960.gs/ Gridulator グリッドデザインには必須のグリッドラインを手軽に作れちゃうWebサービス。 PNGを書き出せるのでとても便利です! http://gridulato
こんにちは、最近ブログに時間を割きすぎてるENJIです。 先日、「あまりに酷い。アクセスが伸びないという前によく考えてほしい。」 という記事を書いて結構な反応を頂きました。 この記事なんですが、注目すべき点はもう1つあって当のブロガー(?)の方に 悪気は一切ないという事なんですよね。 本気(マジ) なんです。良くも悪くも。 つまり、「意識が無い」「知らない」という事だと思います。 僕らみたいに少し色々経験を積むと本当に 何もわからなかった頃 の気持ちを忘れてしまいます。 僕の最初の頃は、mixiのコミュで必死に相談していたものです。 なので、今回は初心者の為にわかりやすく記事のルールを書きます。 初心者の方がこれを守れば、おそらく 劇的にSEO効果は変わるでしょう。 いや、マジで。 photo credit: woodleywonderworks via photopin cc ブログの書
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては(特にCSS3を用いているもの)ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
HTML5にはCanvasタグやVideo/Audioタグ、ドラッグ&ドロップ、Microdata、Web Workersなどさまざまな機能があると説明されますが、実際にはこれらは「HTML5とその関連仕様」を含んでいます。 仕様書に従った厳密な「HTML5」とは、どこまでの範囲を指すのでしょうか? モジラジャパンの浅井智也氏が「Keypoints HTML5」という資料を公開して分かりやすく紹介してくれています。 仕様書に沿った「HTML5」の範囲とは HTML5は、W3CとWHATWGが共同で仕様策定をしていますが、両者の仕様書に書かれている範囲は異なっています(非常に細かい部分では一部の仕様に違いもあります)。Keyoints HTML5から、その両方の仕様でHTML5の範囲を示した図を紹介します。 図の右側のW3C仕様ではCanvas、Microdata、Web Messaging
さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。 無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。 しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー!って成る事もあるやもしれません。 というわけで、今日はここ最近見たチートシート紹介第二弾!チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います! それで行ってみましょー! OverAPI.com | Collecting all the cheat sheet
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
Webブラウザを提供する主なベンダ、グーグル、マイクロソフト、モジラ、オペラ、アップルらは、HTML5への対応を急ぐと同時に、相次いでHTML5の魅力や内容をデベロッパー向けに紹介するサイトを開設しています。この記事では、それらをまとめて紹介することにしましょう。 グーグルの「HTML5 Rocks」 グーグルは6月22日に開発者向けにHTML5を紹介し、学習するためのWebサイト「HTML5 Rocks」をオープンしました。 HTML5 Rocksは現在3つのコーナーに分かれています。 1つ目は「Interactive Presentation」。これはHTML5の新たなAPI、DOM APIやLocal Storage、WebWorkerなどさまざまな機能を紹介するプレゼンテーション。機能と共にJavaScriptでのコーディング例や実際に動作するデモなどが用意されており、HTML5の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く