元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

独自ドメインのWORDPRESS(ワードプレス)ブログを半日で作る方法(前編)

■ 独自ドメインのWORDPRESS(ワードプレス)ブログを半日で作る方法(前編) | 新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
ブログ移転後最初の記事はまさに、そのブログを立ち上げた手順を紹介しようと思います。 以前、似たような記事を書いていたような気もするのですが、時代は変わったのであらためて記事にしておきましょう。

リストタグ(<UL>、<OL>)の左マージンはpadding-left。<DL>だけmargin-left【Webデザイン・CSS】

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

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

レストランで料理の写真を撮ってブログにアップすると違法?

などというドキッとするようなタイトルの記事を発見。
結論はどっち?

□ レストランで料理の写真を撮ってブログにアップすると違法? | 法、納得!どっとこむ


え、こんなのが違法なの?

>> 続きを読む

定額見放題の映像オンデマンド配信サービス「Hulu(フールー)」。日テレ(日本テレビ)が買収

みなさん、Hulu(フールー)というWebサービスはご存知でしょうか?
以前当ブログでも紹介した映像オンデマンドサービスで、月額980円を支払えば数多くの映画やドラマ等が見放題。
パソコンだけではなく、スマホやタブレットでも見れちゃうという凄いサービスです。
なんて言っていながらも契約していないのですが、契約したらブログ書く時間がなくなるくらい映画やドラマを見ちゃいそうだから。
それだけ、たくさんの作品が月980円で見れるわけです。

Hulu - 人気映画・ドラマ・アニメが見放題

Hulu
>> 続きを読む

ブログのメニューにCSS3の「box-shadow」プロパティでドロップシャドウを付けてみた【Webデザイン】

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

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

>> 続きを読む

Webブラウザによる「標準モード」と「互換モード」の違い

最近のブラウザには「標準モード」というのと「互換モード」というのがあるらしいですね。
ただし、違いがよくわかりませんでした。
そこで、調べてみることにしました。

WEB02

>> 続きを読む

自分のサイト表示がブラウザごとに確認できるサイト「browserling」

Web制作する際に困るのが表示確認です。
最近は、W3Cの勧告している仕様に沿ったブラウザが増えているのでそんなに気にする必要なくなりましたが、
以前は、ブラウザによって随分と表示が変わることがあって、色々なブラウザをインストールしてそれぞれで表示確認していました。

ただ、確認のためだけにたくさんのブラウザをインストールするっていうのもいまいち。
ハードディスクの容量も限られていますしね。

そんなときは以下のサイトが便利です。
□ browserling - interactive cross-browser testing

browserling01
>> 続きを読む

ブログの角丸部分をCSS3の「border-radius」プロパティに変えてみた【Webデザイン】

今年、HTML5及びCSS3が正式に勧告されるなんて言われていますが、いつ頃なんでしょうかね?
いずれにしてもそろそろ当ブログもCSS3を盛り込んだコーディングに変えていこうということで、まずは、角丸部分をCSS3で書いてみることにしました。
右のメニューの部分です。見た目は変わっていませんが、CSS3になってます。
(古いブラウザだと角丸じゃなくてソリッドな直角になってると思います。 )
ちなみに上のヘッダー部分はオール画像。

CSS3で角丸

>> 続きを読む

Dreamweaver(ドリームウィーバー)で見かける緑の波線の正体とは?

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

□ Dreamweaverで質問です。 コードビューで緑の波線がでてしまいます。マウスをのせるとエラーメッセージが表示されてしまうのですが。。。 - ホームページ制作Q&A - DESIGNMAP
Dreamweaverで「ブラウザの互換性」という機能があり、緑の波線はその機能による警告です。

緑の波線の正体を探れ!
こんなヤツがひょうじされます。 
>> 続きを読む

HTML5対応HTML構文チェック(バリデート)サイト「Another HTML Lint5」

Dreamweaverなど、HTMLコーディング用オーサリングアプリにもバリデート(バリデーター)というような機能が付いていて、HTMLの構文をチェックして間違っている部分は指摘してくれるのですが、いかんせん、Dreamweaverを持っていないと使えないというのが難点。
まあ、当然なのですが、最近では無料のWebツールがたくさんあるので、無理にバリデート機能だけのためにDreamweaverを購入なんてことをする必要はないと思います。

なぜかって? こんな便利なWebツールがあるからです。
■ Another HTML Lint - Gateway

オンラインバリデート01
オンラインHTMLバリデーター「Another HTML Lint5
 
>> 続きを読む

最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】

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

WEB

>> 続きを読む

Illustrator(イラストレーター)を使ってWebサイトのデザインをする際の注意点

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

こりゃダメだ
こんなんなっちゃいます。

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

Web制作会社はいずれなくなる? アメリカにWeb制作会社がない5つの理由

アメリカにはWeb制作会社がないそうです。
厳密に言うと、Web制作だけをしてビジネスにしている会社形態の組織がないということ。
日本には存在するWeb制作会社、アメリカではなぜ、存在できないのか?
なるほど、読んでみてこれは納得ですね。

□ アメリカでWeb制作会社が存在出来ない5つの理由 | freshtrax | btrax スタッフブログ

WEB

>> 続きを読む

Web公開用PDFファイル内の決まったページにリンクを貼る方法

PDFファイルってのは2種類あって、一つが印刷の時に使う版下データ。
版下は印刷会社の資産になるわけですから、これにはいろいろセキュリティを掛けたりしてあげないといけません。
で、もう一つがインターネット上に紙媒体のレジュメやマニュアル等を公開する時。
これは、セキュリティ等よりもむしろ使い勝手(ユーザビリティ)を考えてあげないといけないわけです。

ただしお世辞にもPDFはHTMLに比べたら使い勝手がいいとは言えません。
HTMLだと、ページ毎にURLがあって、そこへリンクを貼ればそのページが見れるわけですが、
PDFでページ物になったりすると、目当てのページまで行き着くのが一苦労。
PDFにもリンク設定ができるので目次にリンクを入れるという方法も考えられますが、
だとしても目次を開いて該当のページを探すまでが大変です。

なるほど〜♪

>> 続きを読む

Photoshop(フォトショップ)を使ったWebデザインで注意する点

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

PhotoShop

>> 続きを読む




最新コメント