カテゴリーアーカイブ: webサイト

Microsoft Expression Web 4とExpression Design 4の無料版が公開されてた

に が投稿 — 1件のコメント ↓

いつの間にか、Webサイト作成ソフト「Microsoft Expression Web 4」と、ベクターグラフィック作成ソフト「Microsoft Expression Design 4」の無料版が公開されていました。

・Microsoft Expression Web 4
Webサイト作成ソフト(Webオーサリングツール)。
入力の自動補完機能もある。
ただし、色んなブラウザで表示確認が出来る「Expression SuperPreview Remote」機能のベータ版は、2013年6月30日をもって提供終了となっています。

注意点としては、上記サイトで普通に「Download」ボタン(赤いやつ)を押すと、英語版がダウンロードされてしまうので注意。日本語版のダウンロード方法は、このページの下部に掲載しています。

・Microsoft Expression Design 4
ベクターグラフィック作成ソフト。フリーでベクターファイルを作成・編集できるソフトは貴重。
PhotoshopやIllustratorファイルのインポートが可能で、SVGやPNGのエクスポートも可能なので、Web素材作りにかなり使えそう。

以下ファイルのインポートが可能。
　・Adobe Photoshopファイル
　・Adobe Illustratorファイル
　・Windowsメタファイル
　・Encapsulated Postscriptファイル

以下ファイルのエクスポートが可能。
　・XAML Silverlight3キャンパス
　・XAML WPFリソースディクショナリ
　・XAML Silverlight4 / WPFキャンパス
　・SVG
　・PNG、JPEG、GIF、TIFF、BMP、WDP(HD Photo)
　・PSD
　・PDF

こちらも、普通に「Download」ボタン(赤いやつ)を押すと、英語版がダウンロードされてしまうので注意。日本語版のダウンロード方法は、このページの下部に掲載している「Microsoft Expression Design 4」のと同じ感じで出来ます。

[補足説明]
Microsoft Expression関連の日本語公式ページ

■Microsoft Expression Design 4日本語版のダウンロード方法
1)ページ中程の「Details」(赤枠線で囲った部分)をクリック。
Expression Webダウンロード手順1
※「Download」ボタン(赤いやつ)を押すと、英語版がダウンロードされてしまうので注意。

2)Detailsクリック後現れるメニューの中の「Japanese」(赤枠線で囲った部分)をクリック。
Expression Webダウンロード手順2

これで、Expression Design 4日本語版のダウンロードがはじまります。
Expression Design 4日本語版も、ページの構成はほぼ同じなので、同じ手順でダウンロード可能です。

2013年度グッドデザイン賞の受賞結果発表

に が投稿 — コメントはありません ↓

2013年10月1日に、2013年度グッドデザイン賞の受賞結果が発表されました。

・2013年度グッドデザイン賞受賞結果
・グッドデザイン・ベスト100
・2013年度グッドデザイン大賞候補

普段、Webサイトを作ったりしていますが、サイト上のデザインやコンテンツ以外を見ることは刺激になることが多いので、こういうものをばーっと眺めてみるのが結構楽しかったりします。

ベスト100に選ばれたものの中で私が気になったのは、
・デジタルアーカイブ [東日本大震災アーカイブ]
→東日本大震災アーカイブ

・ストアーズ・ドット・ジェーピー
→STORES.jp

・防災用折り畳み式ヘルメット [№100　ブルーム]
→トーヨーセフティー

・松葉杖 [ドライカーボン松葉杖]
→株式会社メディカルチャープラス

・自転車 [ノイズ　カーゴ]
→株式会社NOiS

ドライカーボン松葉杖とノイズカーゴ以外は以前から知ってましたが、改めて見て良いなーと。

特に松葉杖は、以前オーエックスエンジニアリングの車椅子を初めて見た時と似た感覚。
軽さ・デザイン含め、素晴らしいなと思いました。

tableの枠線にborder-radiusを適用する時の注意

に が投稿 — 2件のコメント ↓

tableの枠線にborder-radiusを適用する時に、ちょっと苦労したのでメモ。

<table>
<tr><th>ブラウザ</th><th>開発元</th></tr>
<tr><td>Internet Explorer</td><td>マイクロソフト</td></tr>
<tr><td>Google Chrome</td><td>Google Inc.</td></tr>
<tr><td>Mozilla Firefox</td><td>Mozilla Foundation</td></tr>
</table>

こんなテーブルがある場合。

table {
	border-collapse:collapse;
	border:1px solid #000;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

と書いてみても、枠線の角は丸くならなかった。

ブラウザ 開発元
Internet Explorer マイクロソフト
Google Chrome Google Inc.
Mozilla Firefox Mozilla Foundation

原因は
border-collapse:collapse;
の部分でした。

どうも、
border-collapse:separate;
でないと、テーブルにはborder-radiusが適用されないようで。

というわけで、以下の様に直してみたら問題なく枠線の角が丸くなりました。

table {
	border-collapse:separate;
	border:1px solid #000;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
ブラウザ 開発元
Internet Explorer マイクロソフト
Google Chrome Google Inc.
Mozilla Firefox Mozilla Foundation