Hina-Mode

CSS3では角丸を指定できるそうです。

2009-02-14T16:45:36Z

今までのCSS2ではブロックタグの枠線は角の尖った四角、と相場は決まっていたのですが、CSS3が実装されている一部のブラウザではなんと丸い角ができるよう指定ができるそうです。

]]>

という事で実際にやってみました。

角丸のボックスです。どうでしょうか？
FirefoxやSafari,iPhoneなどのブラウザでは角丸に見えるようです。
ＩＥでは残念ながらまだ実装されていないようです。

CSSの記述方法は以下のようになります。

■ Mozzila系（Firefox等のレンダリング方法）の場合

-moz-border-radius: ***px;

■ Webkit系（SafariやiPhone等のレンダリング方法）の場合

-webkit-border-radius: ***px;

おそらくpx指定以外にも可能なはず。
角丸を使用する場合は両方指定する事をお勧めします。

CSS3自体、まだ草案状態で完全に勧告されている訳ではないのですが、FirefoxやSafariは積極的に先行実装しているようです。
こうしてみるとやはりIEの不便さが目立ちますね......。

ブラウザ毎にスタイルを設定する方法

2009-02-07T13:48:30Z

大学で友人たちによく聞かれる事の一つに
「IEではちゃんと期待通りに表示できるんだけど、Firefoxだとぐちゃぐちゃになって・・・」というのがあります。

IEのレンダリングとモダンブラウザのレンダリングが異なるのは有名な話。

そんなときはそれぞれのブラウザに個別にスタイルを設定してあげなければいけません。

今回はそんな困ったチャンであるIE6以前,IE7,Mac+IE5のそれぞれのハック方法のご紹介。

]]>
というわけで以下、例です。

ex.
/* モダンブラウザの設定 */
body {
color: #333;
width: 800px;
}
/* IE4～6への設定 */
*html body {
color: #666;
width: 780px;
}
/* IE7への設定 */
*:first-child+html body {
color: #565656;
width: 820px;
}
/* Mac+IE5への設定 \*//*/
body {
color: #808080;
width: 802px;
}
/**/

簡単に解説。

IE6以前のIEブラウザには「スターハック」というものが適用できます。
IE6以前にだけ指定したいスタイルの前に「*html」を加えるだけです。

逆にIE7にだけ指定したい場合には「*:first-child+html」と記述してあげればＯＫです。

Mac+IE5の場合は特殊です。
巷ではHollyハックと呼ばれる方法で、Mac+IEでのコメントの認識バグを利用したハックです。バックスラッシュを用いるところからバックスラッシュハックとも呼ばれます。
通常、/* ～～*/と記述するところを、
/* ～～ \*//*/と記述することで、Mac+IE5にだけその先のＣＳＳを読み込ませることが出来ます。
指定を終了させたいときには/* ～～ */を記述すれば大丈夫です。

IEのためにＣＳＳで四苦八苦している方、是非お試しあれ。

グループ展の下見へ

2009-02-01T15:58:14Z

表参道まで行ってきました。

サイトがセンタリング出来ないとき

2009-02-01T15:16:58Z

このサイトみたいに自分のサイトを左側じゃなくて真ん中に持ってきたいのだけど、CSSでtext-align:centerと記述しても真ん中に来ないという方へ。

]]> まず最初に、DOCTYPE宣言は正しいですか？
ここを間違えても問題ない場合が多いですが一応。
現在作られているＨＰの多くはXHTML 1.0 TransitionalというタイプのＨＴＭＬで作られています。
一応、この水準に合わせておくと便利ですよということだけ覚えておけば後々が楽になります。

次に、text-align:centerはブロック要素の箱をセンタリングするものではありません。
ボックスのセンタリングを行う場合にはmargin:auto;を用います。

また、該当する箱（ブロック要素タグ）に幅指定をしていますか？
widthを指定をしないとmargin:auto;を記述してもブロックはセンタリングされません。

通常はこれだけでセンタリングが出来るはず。
極端な話

hogehoge

これだけで中央ぞろえになってるはずです。

これからもちょくちょく、ＨＴＭＬやＣＳＳ、ＭＴについて書いていくつもりです。

今回はこの辺で。ではでは。

イディアライズのサイトリニューアルに関わりました。

2008-10-19T15:00:00Z

投資マンション関連の不動産、イディアライズコーポレーションのサイトリニューアルに関わりました。
以下詳細。

]]> 私の担当はコーディングとCMSテンプレート形成、MTへの組み込みでした。
前後にデジハリ祭の作業でてんやわんやしている間での作業でしたので中々にハードだったことを覚えています。

edit: 2009/02/21

携帯写真のテストなのです。

2008-10-17T20:09:29Z

こんなのー。2008年6月ぐらいに食べたカレーです。
撮影:秋葉原某所

DHFES2008のWEB担当しました。

2008-10-11T15:00:00Z

デジハリ祭というデジタルハリウッド大学の学祭イベントの2008年度のＷＥＢ制作、更新作業を担当していました。
学生のうちにしか出来ない貴重な体験をさせていただきました。

以下詳細。]]>

トップＦＬＡＳＨのみ、友人が制作いたしました。
トップデザインは二人で相談、改良を重ね私のほうで制作とブラッシュアップ。
コーディングや下位ページデザインは全て私のほうで行いました。

些事ですがブログパーツの制作などもこのイベントで行っております。

浦和中央自動車教習所のサイトリニューアル

2008-09-30T15:00:00Z

埼玉県の浦和中央自動車教習所のサイトリニューアルに関わりました。

以下詳細。

]]> 担当はトップページコーディングと下位テンプレート形成、ＭＴへの組み込みでした。
複数のブログが混在する仕様となっており、マルチブログ化いたしました。

edit: 2009/02/21

DHFES2008スタッフブログのデザイン

2008-07-04T15:00:00Z

デジハリ祭2008のスタッフ奮闘記のブログデザインを担当しました。
]]>
原型はデジハリ祭2008公式ウェブサイトのデザインを流用したものです。
「明るく」、「楽しそうな」雰囲気を出し、かつブログ自体は読みやすいように工夫をしてみました。

ジュゲムブログを使うのが初めてだったので、テンプレート編集が少し大変だったのを覚えています。

吉田運輸株式会社のページリニューアルを致しました

2008-06-27T15:00:00Z

南関東圏の運送会社、吉田運輸株式会社のサイトリニューアルをさせていただきました。
以下詳細。

]]> 担当はトップページコーディング、下位ページテンプレート作成、Nucleus（CMSツール）への当て込みでした。
この時期に初めてNucleusというCMSツールを知り、実際に仕事で使うことになりました。
それまでMovableTypeを中心に製作を行っていたので勝手が違い中々慣れずにいましたが今ではいい経験となっています。

edit: 2009/02/21

ロジラボ通信のページリニューアルに関わりました。

2008-04-14T15:00:00Z

『5分で読めちゃう物流メルマガ「ロジラボ通信」』のリニューアルを担当いたしました。

以下詳細。

]]> 私の担当はページコーディング、一部素材製作、ページシステム設計でした。
サイトのページはMovableTypeで構成しています。
MovableTypeを使ってサイトを製作する仕事はこれが初めてでしたので、今コードを見ると色々と至らない部分が多くいつかは直したいところです......。

edit: 2009/02/21