上面図に切り替えて、スライスツールでポリゴンに切れ目を入れます。CADで作成した開口部のアタリを参考にします。
このように開口部の切れ目を入れました。
窓、ドアが入る部分のポリゴンを削除します。
続く…….
2013年3月14日木曜日
modoで作るインテリアパース_開口部を作る
次に窓、ドアを作成します。先ずは開口部のある壁を選択します。
上面図に切り替えて、スライスツールでポリゴンに切れ目を入れます。CADで作成した開口部のアタリを参考にします。
開口部高さに関しても天井高さ2500に対して2000の所に切れ目を入れます。
窓、ドアが入る部分のポリゴンを削除します。
上面図に切り替えて、スライスツールでポリゴンに切れ目を入れます。CADで作成した開口部のアタリを参考にします。
窓、ドアが入る部分のポリゴンを削除します。
2013年3月2日土曜日
Freeway 外部スタイルシートを読み込む3
CSSとスタイルシートについて今まで何度か取り上げてきましたが、ついでに少し解説してみたいと思います。例えば、
Freewayは最高だ
とサイトに表示されたとします。サイトの内容は『Freewayは最高だ』であり、文字が赤い、太字はデザインとなります。この『内容』と『デザイン』を分離させてコードを書く事はとても重要な事です。
それは、検索ロボットが収集する情報はサイトの内容であって、文字が赤いや太いなどのデザイン要素は不要だからです。
HTMLの文中に『内容『と『デザイン』が混在してしまうと、そのサイトに何が書いてあるのか検索ロボットが判断しにくくなってしまいます。その結果SEO的に不利になり検索順位が下がる事になります。
それを防ぐ為にはサイトの『デザイン』の部分(以下CSS)を別のファイルに書き出したファイル(スタイルシート)を作成し、HTMLに読み込ませる事が一般的です。
残念ながらFreewayで作成されたHTMLは、HTMLの文中に『内容『と『CSS』が混在してしまいます。従ってSEOを意識するのであれば、前回の投稿で取り上げたように、外部スタイルシートを読み込みHTMLをシンプルにする事は非常に重要な事になります。FreewayでHTMLに少し慣れてきたら、スタイルシートの作成にチャレンジする事をお勧めします。
それでは前回のHTMLとCSSを詳しく見て行きましょう。
まずはHTMLから
ポイントは<ul class="menu">です。これは例えるなら<ul></ul>で囲まれた内容は『山田』さんだよ！とスタイルシートに定義する事です。スタイルシートには、文字が太い、青い、斜体など山田さんに関する情報を記述していきます。
この他に<ul id="menu">という書き方もあります。この場合『山田花子』さんだよ！となります。この２つの違いは、『山田』さんはHTMLの中で何度出てきても構わないが、『山田花子』さんは一度きりしか登場させる事が出来ません。それがclassとidの違いです。
それではCSSを見てみましょう。
CSSが
ul.menu
ul.menu li
ul.menu a
ul.menu a:hover
ul.menu a:active
の５つの項目で構成されています。１つめのul.menuはmenuと定義された『ulアイテム』の位置、大きさ、バックカラー、文字装飾等が記述されています。
次はul class="menu"と定義された中にあるul.menu li <li>リストに対して、リストの並び方、間隔などが指定されています。
最後にul.menu a 、ul.menu a:hover 、ul.menu a:active は、そのリスト上にマウスが乗っている時、いない特、クリックされた時の文字の装飾と色が指定されています。
このスタイルシートの記述を書き換えて、オリジナルのMyリストを作成してみてください。
Freewayは最高だ
とサイトに表示されたとします。サイトの内容は『Freewayは最高だ』であり、文字が赤い、太字はデザインとなります。この『内容』と『デザイン』を分離させてコードを書く事はとても重要な事です。
それは、検索ロボットが収集する情報はサイトの内容であって、文字が赤いや太いなどのデザイン要素は不要だからです。
HTMLの文中に『内容『と『デザイン』が混在してしまうと、そのサイトに何が書いてあるのか検索ロボットが判断しにくくなってしまいます。その結果SEO的に不利になり検索順位が下がる事になります。
それを防ぐ為にはサイトの『デザイン』の部分(以下CSS)を別のファイルに書き出したファイル(スタイルシート)を作成し、HTMLに読み込ませる事が一般的です。
残念ながらFreewayで作成されたHTMLは、HTMLの文中に『内容『と『CSS』が混在してしまいます。従ってSEOを意識するのであれば、前回の投稿で取り上げたように、外部スタイルシートを読み込みHTMLをシンプルにする事は非常に重要な事になります。FreewayでHTMLに少し慣れてきたら、スタイルシートの作成にチャレンジする事をお勧めします。
それでは前回のHTMLとCSSを詳しく見て行きましょう。
まずはHTMLから
<ul class="menu">
<li><A href="#">ホーム</A></li>
<li><A href="#">ご利用ガイド</A></li>
<li><A href="#">お気に入り</A></li>
<li><A href="#">ログアウト</A></li>
<li><A href="#">ユーザー登録</A></li>
</ul>
(＃はリンク先を任意で指定)ポイントは<ul class="menu">です。これは例えるなら<ul></ul>で囲まれた内容は『山田』さんだよ！とスタイルシートに定義する事です。スタイルシートには、文字が太い、青い、斜体など山田さんに関する情報を記述していきます。
この他に<ul id="menu">という書き方もあります。この場合『山田花子』さんだよ！となります。この２つの違いは、『山田』さんはHTMLの中で何度出てきても構わないが、『山田花子』さんは一度きりしか登場させる事が出来ません。それがclassとidの違いです。
それではCSSを見てみましょう。
ul.menu{
position:absolute;
left:200px;
top:500px;
z-index:38;
background-color:#DEDE48;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;
font-size:10px;
float:left;
padding:0;
margin:0;
}
ul.menu li {
float:left;
list-style:none;
margin-left: 20px;
}
ul.menu a {
text-decoration:none;
color:#f00;
}
ul.menu a:hover {
text-decoration:none;
color:#3F63A4;
}
ul.menu a:active {
text-decoration:none;
color:#3F63A4;
}
CSSが
ul.menu
ul.menu li
ul.menu a
ul.menu a:hover
ul.menu a:active
の５つの項目で構成されています。１つめのul.menuはmenuと定義された『ulアイテム』の位置、大きさ、バックカラー、文字装飾等が記述されています。
次はul class="menu"と定義された中にあるul.menu li <li>リストに対して、リストの並び方、間隔などが指定されています。
最後にul.menu a 、ul.menu a:hover 、ul.menu a:active は、そのリスト上にマウスが乗っている時、いない特、クリックされた時の文字の装飾と色が指定されています。
このスタイルシートの記述を書き換えて、オリジナルのMyリストを作成してみてください。
2013年3月1日金曜日
Freeway 外部スタイルシートを読み込む2
アクションを使わないもっと簡単な方法がありましたので、内容を修正したいと思います。
マークアップに記述する所までは同じです。
作成済みのCSSファイルをSiteFolder内のCSSフォルダに収納します。
ページを選び、メニュー＞ページ＞HTMLマークを選びます。
マークアップに記述する所までは同じです。
作成済みのCSSファイルをSiteFolder内のCSSフォルダに収納します。
ページを選び、メニュー＞ページ＞HTMLマークを選びます。
そこにこのように記述します<link rel=stylesheet type="text/css" href="css/menu.css">
(赤字はファイル名に変更して下さい)
挿入先を<head>タグの後に切り替えます。
これで、さきほどCSSフォルダに入れた外部スタイルシートを読み込む事が出来ます。
スタイルシートを直接編集できるのでとても便利ですね。
※マスターにはスタイルシートが読み込めないようなので、ページごとに設定しましょう。
※CSSフォルダに入れたCSSファイルはFreewayでは自動的時アップロードされません。必ず手動でサーバー内のCSSフォルダにアップしましょう。
Freeway 外部スタイルシートを読み込む
Freewayは誰でも簡単にHPを作成できるようになっており、HTMLやCSSの知識が無くてもHPが出来ちゃいます。それはとても便利な事なのですが、HTMLとCSSがとても複雑なモノになってしまいがちです。例えば下記のこのようなメニューもFreewayを使えば簡単に作成できますが、書き出されたHTMLとCSSはすこし複雑.........。
SEO的にもあまりよろしくないので、シンプルなコードを自作して、Freewayにマークアップと外部スタイルシートを読み込んでみたいと思います。
position:absolute;
left:200px;
top:500px;
z-index:38;
SEO的にもあまりよろしくないので、シンプルなコードを自作して、Freewayにマークアップと外部スタイルシートを読み込んでみたいと思います。
HTMLはこのようなコードになります。
<ul class="menu">
<li><A href="#">ホーム</A></li>
<li><A href="#">ご利用ガイド</A></li>
<li><A href="#">お気に入り</A></li>
<li><A href="#">ログアウト</A></li>
<li><A href="#">ユーザー登録</A></li>
</ul>
(＃はリンク先を任意で指定)
それに対して、文字装飾のCSS
ul.menu{
position:absolute;
left:200px;
top:500px;
z-index:38;
background-color:#DEDE48;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic', sans-serif;
font-size:10px;
float:left;
padding:0;
margin:0;
}
ul.menu li {
float:left;
list-style:none;
margin-left: 20px;
}
ul.menu a {
text-decoration:none;
color:#f00;
}
ul.menu a:hover {
text-decoration:none;
color:#3F63A4;
}
ul.menu a:active {
text-decoration:none;
color:#3F63A4;
}
それでは、HTMLをマークアップで、CSSを外部CSSとしてFreewayに読み込んでみたいと思います。
先ずは、下記を削除したCSSをメモ帳にコピペして、.cssの拡張子を付けて保存します。
2.3.4.5行目を削除。アイテムの位置情報はFreewayのマークアップアイテムの位置情報が利用されるため不要になります。
次にFreewayのメニュー＞挿入＞マークアップアイテムを作成し、HTMLをコピペした後、アイテムの大きさを整えます。
プレビューすると、文字装飾がされていないのでこうなります。
それではスタイルシートを読み込みます。メニュー＞ページアクション＞ESS-Use External Style Sheetを適用します。
アクションパレットで先ほど作成したCSSファイルを選択します。
Delete Embedded Styleのチェックを外します。
プレビューしてみるとCSSが読み込まれ文字装飾されています。
読み込まれたCSSファイルは、Site Folder内のResourcesフォルダの中に書き出されます。
登録:
投稿 (Atom)