スポンサーサイト

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



にほんブログ村 その他趣味ブログ 趣味の工作へ にほんブログ村 その他趣味ブログ ビデオ撮影・編集へ

引きこもり機HP製作-私流HPの作り方-

HP製作は順調に進んでいます。

外観はこんな感じです。


基本はHTMLとCSSだけです。
右のメニューをクリックすると中央の欄がぬるっと切り替わるような若干動的な部分があるので、少しJavaScriptを使っています。

放送しているとよく作り方について聞かれるので私流ですが紹介します。

まずInkscapeというソフトでデザインをします。
ベクター画像を作るのに特化したソフトで、ペイント等とは違ってこういった図形を書くのに向いています。
有名なAdobeのillustratorとほぼ同じようなソフトです。

Inkscape



デザインが完成したら、背景やボタンをそれぞれ個別に画像ファイルに書き出します。


そしてとりあえずそれをHTMLでページに配置します。


この時リンクを張りたかったら<a>タグで囲ったり、CSSやJavaScriptで位置や動作を弄りたかったらidやclass属性を追加します。

最後にCSSで位置を調整したり、必要ならばJavaScriptでアニメーション等を付けます。
CSS


JavaScript


今回の場合はCSSが短いので直接HTMLに書く方が私は好きです。



HTML、CSS、JavaScriptを書くのにサクラエディタというテキストエディタを使っています。
メモ帳がちょっと使い易くなった感じです。

サクラエディタ

ホームページビルダー的なソフトを使えばもっと効率よく作れますが、型にはまってしまったのでこの方法でやっています(笑)
まあ、そういうソフトに任せるよりは自分で書いた方がソースが綺麗になって、メンテナンスもし易いから、というのもありますが^^;

たまにJavaScriptメインでページやゲームを作るときはAptana Studioを使ったりもします。
JavaScriptはソースが膨大になると目で追うのが大変なので(汗)

こんな感じで製作を進めていきます(^ω^)



にほんブログ村 その他趣味ブログ 趣味の工作へ にほんブログ村 その他趣味ブログ ビデオ撮影・編集へ

コメントの投稿

非公開コメント

プロフィール

回路師

Author:回路師
趣味がロボットと動画製作です。
便利な機械やあほなマシンの動画を投稿しています.

最新記事
最新コメント
カテゴリ
電子工作キット








月別アーカイブ
書籍






Twitter
リンク
RSSリンクの表示
ソーシャル

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