はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Photoshop(フォトショップ)の匠動画

2007/06/29 Fri [Edit]

Nico Di Mattia - Speed Painting

今日は Photoshop(フォトショップ)の匠と言えるような動画を発見してきました。
アルゼンチンの Nico Di Mattia 氏のスピードペインティング動画なのですが、その技術もさることながら面白いアイデアだと思い YouTube 動画を掲載してみました。生物の成長を早送りで目の当たりにするような感覚に陥り、作品が完成する頃に軽い感動を味わえます。なんとなくですが子供の頃に好きだった、粘土のストップモーション・アニメを思い出しました。

Nico さんのサイトを確認したところ、アドビ社の Photoshop(フォトショップ)とタブレットを使い、1つの作品を3~6時間で仕上げているようです。流石スピードペインティングと更に感動してしまいました。
私は普段マウスで Photoshop(フォトショップ)を使っているのですが、安いタブレットでも購入してみようかな?なんて思いが頭に浮かんでいます。
勿論 Nico ちゃんほどスピードも技術もないですが、お絵描きは好きな方なので機会を見つけてタブレットでのドローイングに挑戦してみたくなりました。

ちなみに Nico りんは 1982年生まれの男性です。

スポンサーサイト

続きを読む ≫

CSS縦のセンタリング(中央揃え)

2007/06/18 Mon [Edit]

CSS で横のセンタリング(中央揃え)は margin : auto や text-align : center などで事足りると思うのですが、縦のセンタリング(中央揃え)は何を使えば良いかご存知ですか?

私はつい先日まで知らなかったのですが line-height プロパティで縦のセンタリングが可能です。方法はとても簡単で、ボックスの高さと line-height の値を同じにするだけで縦のセンタリングが行われます。下のソースを参考にしてください。


div.hajime {
	width : 400px;
	height : 50px;/*ボックスの高さ*/
	line-height : 50px;/*縦のセンタリングの為に指定*/
}

簡単な上、Macのモダンブラウザ、Winのモダンブラウザで縦のセンタリングが適用されます。

個人的には何故か素通りしていた部分だったのですが、少し調べたらあっさり解決してしまった事例です。少しの手間を面倒臭がってソースを複雑にしていた事に反省です…。

追記( 2008/08/09 )
通りすがりさんから貴重なご意見頂きました。上記の方法はテキストが複数行になると勘の良い人は察しがつくかも知れませんが、行間が大変広くなります。つまり1行のテキストの時にのみ有効な方法です。ちなみに line-height は文字送りを指定するプロパティなので、インライン要素にのみ適用されるプロパティです。

そこで「良い方法はね~か~」とわりと大きめの声でつぶやきながらネットを検索したところ、参考になりそうな掲示板を発見しました。少し古い書き込みですが、CSS の知識が豊富な方が解決策と思えるような書き込みをされています。興味がある方は覗いてみて下さい。

いつだったか書籍でこの縦のセンタリングについて読んだように思うので良い方法がありましたらご紹介します。夢の中の本屋さんでしたらごめんなさい。

IEハック(アンダースコア・ハック)

2007/06/09 Sat [Edit]

Windows の IE 用の CSS ハックで簡単なものを発見!その名はアンダースコア・ハックです。下のソースの赤い部分がアンダースコア・ハックです。

.sample {
	width : 300px;/*その他ブラウザ用*/
	_width : 320px;/*IE用*/
	padding : 20px;
}

プロパティの前に _ を足すだけなので簡単ですが、その他のブラウザ用と IE 用のプロパティの順番が前後してしまうとハックが適用されないので、そこだけ注意が必要です。
つまり、まず普通のブラウザ用のプロパティを記述し、次に IE だけが解釈するアンダースコア・ハックを使いプロパティを記述します。

ちなみにアンダースコア・ハックはW3CでCSSの検証をするとエラーになります。
また、IE7 では使えません。と言うかエラーなので使えないのが当たり前のようです。IE7 で改善された部分と言うことです。

冒頭で「発見!」とか大騒ぎしていますが、とても有名なハックです。私が最近知っただけですので温かい目でお願いします。

CSS ハックが幾つか溜まってきたので、そのうちCSSハック一覧表でも作ろ。

XML宣言でIE6が後方互換モードになるバグ

2007/06/07 Thu [Edit]

先日、当ブログで制作したテンプレートをご使用中の方から不具合報告を受け、その方とのコメントのやりとりから有益な情報を頂きました。

既にご存知の方も多いと思いますが、XHTML の文章型宣言である XML 宣言をソースの一番上の先頭に記述すると、IE6 では後方互換モードになってしまうバグがあります。FC2ブログのソースで言うと下のようなソースです。

<?xml version="1.0" encoding="EUC-JP"?>

私のように知らなかった方のために説明させて頂くと、後方互換モードとは、IE6 より古いバージョンの IE での CSS の解釈(後方互換モード)となり、W3C の標準仕様に従って表示するモード(標準準拠モード)とは違う CSS の解釈をします。

したがって、他のモダンブラウザと IE6 に表示のズレが発生します。

  1. ボックスモデルの解釈の違い
  2. img 要素の padding プロパティが効かない
  3. margin プロパティの auto が効かない
  4. text-align プロパティによるブロックレベル要素への適用結果の違い
  5. 標準的なフォントサイズの違い

上記したものが、主な違いです。

続きを読む ≫

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。