時代は明らかにスマホですね。
自分の知り合いにも、パソコン持っているのにスマホでばっかりインターネットやってる人います。
自分の場合はハードがアレなんでやっぱりパソコンでインタネットやることのほうが多いのですが。。

□ スマホからのネット利用が1年で急増、PCからの利用に迫る勢い - ニールセン | マイナビニュース

 

タグ ：

スマホ

パソコン

サイト

Webデザイン

Webデザインをする上でかねてから気になっていたことをしっかりとしらべてみました。
それは、リストタグの左マージンのこと。 
実際は、リセットCSSで「margin:0;padding:0」 をしてしまうので、気にすることはないのですが、
でも、知っておいても損はないですもんね。 

 
左がソース、右がブラウザ表示。
今回調べたのは赤で書かれている初期マージンの部分。 

タグ ：

CSS

Webデザイン

リスト

UL

OL

DL

マージン

margin

padding

以前、Illustrator（イラストレータ）を使ってWebデザインを行うポイントとして紹介した「ピクセルにスナップ」機能ですが、CS5あたりから仕様が変わり、「ピクセルグリッドに整合」という機能になったようですね。
どちらもペジェ曲線を強制的にピクセル単位で吸着させる機能ですが、Webデザイナーとしては非常に嬉しい機能でした。
でもグラフィックデザイナーもやっているWebデザイナーにとっては結構ウザい機能となってしまっているようです。
つまり、こんなことが起こってしまいます。


Web用に作ったマップを印刷物でも流用しようと印刷物にコピー&ペーストして拡大したら枠罫線やJR線等が変な表示になったしまった。

で、これを解決するのに結構とまどってしまったのでメモしておきます。 

タグ ：

Illustrator

イラストレータ

Webデザイン

DTP

ピクセルにスナップ

ピクセルグリッドに整合

これは知らなかった。。というか、ここまで意識してなかった。。

タグ ：

img

imgタグ

vertical-align

bottom

Webデザイン

CSS

画像

隙間

なんとも有名なjQueryを使用したスライドショー（スライダー）「bxSlider」ですが、
デザインがなかなか思うようにいかなくて嫌いになりそうになっていました。
が、その理由がわかったので報告したいと思います。

なお、 「bxSlider」の設置等に関しては以下のサイト等を参考にしてください。

■ jQuery Content Slider | Responsive jQuery Slider | bxSlider
□ jQueryスライドショー「bxslider」の使い方まとめ - NAVER まとめ

今回設置させていただいたスライドショー。
右上、通常の写真風な部分で「bxSlider」を使っています。

タグ ：

jQuery

bxSlider

JavaScript

スライダー

CSS

レイアウト

Webデザイン

コーディング

Web覚書

そろそろCSS3を初めてみようシリーズ。今回は「box-shadow」を使ってみようです。
今まで「transition」や「boader-radius」等を紹介してきました。


こんな感じにドロップシャドウ（影）を付けてみました。

タグ ：

CSS3

ドロップシャドウ

影

Webデザイン

box-shadow

「Dreamweaver」のソースビューにちょくちょく緑色の波線が表示されるのにお気づきでしたでしょうか？
実は、自分は全く気づいていませんでしたが、教室の生徒さんからちょっと聞かれたので気になったので調べてみました。

□ Dreamweaverで質問です。 コードビューで緑の波線がでてしまいます。マウスをのせるとエラーメッセージが表示されてしまうのですが。。。 - ホームページ制作Q&A - DESIGNMAP

Dreamweaverで「ブラウザの互換性」という機能があり、緑の波線はその機能による警告です。

こんなヤツがひょうじされます。 

タグ ：

Dreamweaver

ドリームウィーバー

ブラウザ

ブラウザ互換

波線

Webデザイン

そろそろHTML5が正式に勧告される昨今に今更感漂いますが、個人的にそろそろ積み重ねをかたちにしてやる頃だなぁというのもあって、オリジナルのリセットCSSを考えてみました。
考えるにあたり、とにかくシンプルに最低限のところのみ記述することを心がけました。
結果として非常に短いCSSになってしまいましたが、そのあたりはご了承下さい。

タグ ：

CSS

HTML

Webデザイン

コーディング

デザイン

リセットCSS

swfファイルを修正するという仕事が流れ流れてきました。
Webデザインをやっている方であれば御存知の通り、swfファイルはFlashでは編集できません。
swfに変換する前の、flaファイルがあれば修正も比較的用意にできるのですが、理由があってflaファイルが手に入らないようです。
であれば一般的には「全部作り変え」ということになるのですがそれも予算の関係上ちょっと難しいようです。

そこで、素材だけでも抽出できないか調べてみました。
すると見つかったのが以下のツールです。

□ HugFlash - 窓の杜ライブラリ

タグ ：

Webデザイン

フラッシュ

Flash

swf

fla

HugFlash

自分、基本的にIllustrator（イラストレーター）ではWebデザインやりません。
というのは、ピクセル単位でのデザインができないから。


こんなんなっちゃいます。

ただし、最近のIllustratorではピクセル単位でのデザインもできるようになってきています。
以下、Illustratorを使ってピクセル単位でのデザイン（Webデザイン）をする際の注意点をお伝えします。

タグ ：

Illustrator

イラストレーター

Webデザイン

Webサイト

1px

ピクセル

Illustrator_CS4

Illustrator_CS6

学校で生徒さん用にまとめたのですが、意外と重要な事だと思ったので公開することにしました。
みなさんは、Webサイトのデザインをどのように作られていますか？
Photoshop？Illustrator？それとも、ダイレクトにDreamweaver等で作られちゃっている人もいるかもしれません。
自分の場合は元紙媒体のデザインをやっていた関係上、IllustratorやPhotoshopを使うことが多いのですが、
WebであればまずはPhotoshopベースで全体のデザインを作ってしまうことが多いです。
（紙媒体であれば当然、Illustratorベースですね。）

タグ ：

Webデザイン

グラフィックデザイン

コーディング

Photoshop

ビットマップ

WebデザインにおいてHTML同様重要となってくるCSS（カスケードスタイルシート）に関して、セレクタの優先順位をまとめてみることにしました。
同じプロパティが各セレクタに書かれている場合、優先順位の高いセレクタに対して書かれたプロパティ値の方が適応されるというわけです。

タグ ：

優先順位

CSS

HTML

Webデザイン

コーディング

セレクタ

プロパティ

プロパティ値

これ、生徒さんに聞かれてすぐ答えられなかったのでメモ。
いや、簡単なことだったみたいですけどね。。 

タグ ：

フォトショップ

Photoshop

スライス

消去

スライスを消去

エクストラ

表示メニュー

Webデザイン

Webデザイナーとして当然なんでしょうけど実は知らなかったWebディレクターがここにいます。

紙物とWeb物とのデザインの一番の違いはWeb物はビットマップでデザインしなければならないところ、
加えて色域がRGBとCMYKとで違うなどもありますがそこは置いておきます。 
で、Webデザインでイラストレーター（Illustrator）を使う元紙物デザイナーが時たまいますがこれはぶっちゃけいけません。
なぜいけないかというとイラストレーターのデータ（ベクターデータ）はWeb用のビットマップデータに変換した地点で細い線や細かいテクスチャが不規則なビットマップデータになってしまうから。
この違いが分かる人じゃないとWebデザイナーとしては失格です。
そこで、フォトショップ（Photoshop）等ビットマップデータで編集できるアプリでデザインするのですがここでも注意すべき点があります。
それは、シェイプ（ベクターデータを使った機能）を使う時です。

タグ ：

Webデザイン

角丸長方形

長方形

角丸四角形

四角形

シェイプ

ベクターデータ

フォトショップ

Photoshop

Web覚書

ちょっと前の記事だが、モリサワが「クラウドフォント」に参入するとのニュースがあった。

□ モリサワ　クラウドフォントサービス「TypeSquare（仮称）」を発表 | 企業情報 | 株式会社モリサワ
□ モリサワも参入、ウェブ新潮流「クラウドフォント」とは?【増田(@maskin)真樹】 : TechWave

タグ ：

クラウドフォント

モリサワ

TypeSquare

フォント

書体

Webデザイン

インターネット