• 管理人へのメール

  • crossbreed tumblr.  ※画像をクリックして拡大できます tumblr-タンブラーって何?tumblrの始め方
    最新記事ヘッドライン (※画像をクリックして拡大できます)
    はてなブログ始めました この記事を読む → はてなブログ始めました http://crossbreed.tv/archives/201709011610.php お前らってどうやって嫌な事乗り越えてるの? この記事を読む → お前らってどうやって嫌な事乗り越えてるの? http://crossbreed.tv/archives/201501150028.php キモ美しい街並みを集めてみたよ(Googleマップ付) この記事を読む → キモ美しい街並みを集めてみたよ(Googleマップ付) http://crossbreed.tv/archives/201501101258.php みんなのビヤホールCMがリア充過ぎる件 この記事を読む → みんなのビヤホールCMがリア充過ぎる件 http://crossbreed.tv/archives/201501101122.php 【DJMIX】Bar KNAT FINAL MIX この記事を読む → 【DJMIX】Bar KNAT FINAL MIX http://crossbreed.tv/archives/201411300014.php
    同カテゴリ内最新記事ヘッドライン (※画像をクリックして拡大できます)
    使えるリンク集 – フリーソフト for windows編 この記事を読む → 使えるリンク集 – フリーソフト for windows編 http://crossbreed.tv/archives/200504101501.php 使えるリンク集 – データベース編 この記事を読む → 使えるリンク集 – データベース編 http://crossbreed.tv/archives/200408071706.php 使えるリンク集 – web作成編 この記事を読む → 使えるリンク集 – web作成編 http://crossbreed.tv/archives/200405080129.php 使えるリンク集 – 探し物編 この記事を読む → 使えるリンク集 – 探し物編 http://crossbreed.tv/archives/200403311242.php

    5月
    08
    2004

    使えるリンク集 – web作成編

    カテゴリ:リンク集 |

    STARを押してこの記事を評価お願いします→
    つまんないイマイチ普通まあまあよかった! (評価して下さい!)
    Loading...


    新ブログ始めました!
    http://crossbreed.hatenablog.com

    前回の使えるリンク集 – 探し物編も好評だったので、気合入れて作成してみました。今回はweb作成編です。
    web作成、といってもweblogの驚異的な普及で個人サイトのあり方が激変してきています。
    いわゆる、「ホームページ」を作成する為に不可欠だった、「macromedia dreamweaver」「homepage builder」「adove golive」などのwebオーサリングツールは個人サイトを作成する上で必須のツールではなくなって来ています。
    どのソフトもweblogをデザインする為に必要なCSSのデザインに完全には対応していないからです。
    ということは、お金を出してオーサリングツールを購入してもweblogのデザインをするだけならば全く使用しないという事もありえます。というか、僕はこのサイトを構築するに当たって、以前まで使っていたdreamweaverを全く使っていません(泣
    テキストエディタとの格闘の毎日です。
    というわけで、今回のお題は「web作成」。サイト立ち上げまでは一昔前とは違った道のりを辿る方も多いと思います。
    もちろんFLASHメインのサイト、weblogの便利さに頼らないサイトはまだ沢山あります。
    そういう方もひっくるめて、これからwebサイトを立ち上げようという方にとっても便利なサイト達を紹介します。


    【レンタルサーバ編】

    まずはWEBスペースをレンタルしなくてはいけませんね。色々なサービスで値段もピンキリです。独断でチョイスしました。無料の所と安い所を。
    ■infoseek isweb
    無料で、50MB、CGI・SSI・PHP・Ruby・Python可。上部に広告有り。倉庫にも使え(以下略
    ■ロリポップ
    月250円で200MB。転送量無制限。驚異の価格。低価格レンサバでは一人勝ちなのでは?CGI・SSI・PHP・Ruby・Python・MYSQLまで利用可。movabletypeを日本一安く設置できるサーバ。

    【web作成環境編】

    web作成前に揃えておきたい環境がありますね。まずは、オーサリングツールの紹介
    ■macromedia studioMX2004 (win& mac)
    これの前のバージョン使ってます。fireworksというグラフィックツールのhtml書き出しが強力です。studioMXはflashのオーサリングツールも同梱です。お金あるならコレ。
    ■IBM homepage builder(win)
    日本で一番売れているwebオーサリングツール。ダサいサイトが一発で作れる事で有名ですね。使った事ないので分かりませんが。
    ■Adobe Golive CS(win & mac)
    アドビのwebオーサリングツール。adobe慣れしてる方にはインターフェースが分かり易いらしいです。photoshop→imageready→goliveという流れでしょうか?これも使った事ないので・・・
    フリーのHTMLエディタはあまり使った事ないので、リンク集を紹介しておきます。
    ■フリーのHTMLエディタを比較してみる。
    次、テキストエディタですね。これは必須です。メモ帳は使ってはいけません。
    ■TeraPad(win)
    フリーのシンプルなテキストエディタ。HTML/Perl/Ruby/INI/BAT/C++/Java/HSP/Delphiの各種編集モード等、必要な機能はほとんど搭載されています。unicodeにも対応してます。
    ■mi (mac)
    文字コードはShiftJIS, JIS, EUCをサポート(MacOSにText Encoding Converterがある場合は、UTF-8, ISO-8859-1, KOI8-Rなどもサポート)
    シンプルで使いやすいです。
    次はローカルで作成したページをサーバにアップロードする為のソフト、FTP転送ソフトが必要ですね。
    ■FFFTP(win)
    フリー最強のFTP転送ソフト。windowsならコレしかないでしょう。
    ■RBrowser (mac)
    最初はとっつきにくいが慣れると快適な、macでも数少ないフリーのFTP転送ソフト。
    他にもあるかもしれませんが、とりあえず、これだけで始められます。

    【web学習編】

    さて、準備は出来ましたが、htmlとは何か、もわからないアナタは「できる」シリーズを求めて本屋に行くのではないでしょうか?買ってはいけません。
    数ページしか読まないことウケアイです。
    インターネットのことはインターネットで。とりあえずぐぐれ、と怒られますね。というわけで、web作成の為の学習が出来るサイトを。サイトを立ち上げた後も何度もお世話になっているところをピックアップしました。他にも色々ありますが、それはぐぐっとけ、ということで。
    ■はじめてのWebドキュメントづくり
    webの仕組みから丁寧に書いてあります。ただ、僕は手打ちでhtmlを最初から勉強するのは難しいと思うのでここは概念だけでいいと思います。
    ■みんなのタグ辞書/HTMLタグ辞書
    初心者が最初に引っかかるHTMLのタグを非常に分かり易く、簡単に解説しています。カテゴリ分けが非常に便利です。
    ■とほほのWWW入門
    老舗のWEB作成支援サイト。逆引きリファレンスが便利。質問掲示板に有益な情報あり。javascriptやperl、SSIのリファレンスもあります。
    ■HTML/CSS クイックリファレンス
    HTMLのタグやCSSの記述に悩まされたら迷わずココ。
    アルファベット別、目的別に検索できます。便利!色見本も良く使います。
    ■30分間(X)HTML入門(web KANZAKI)
    ある程度ページが出来上がった頃に読むと良いです。美しいhtmlとは何ぞや?みたいな事が丁寧に書かれています。

    【インタラクティブなページの作成】

    ある程度自分でwebページを作ることが出来たら、次のステップに進むのが「掲示板」「アクセスカウンタ」の設置でしょう。
    cgiやphp等を駆使してそれらを設置するわけですが、プログラムの知識などは全く必要ありません。web上の豊富なサンプルでなんとかしましょう。
    これらのプログラムには大きく分けて「掲示板丸ごとレンタル」「自分のサーバに設置」とに分かれます。
    まずは、レンタル系。ほぼ無知識で利用できます。しかし、広告は出るし、出来ることは限られてるし、ちょっとガッカリですが。
    ■[CGIBOY]無料CGIレンタル
    無料のアクセスカウンタ、掲示板、日記、アクセス解析など。とりあえず、簡単に無料で始めたいヒト向き。
    ■teacup.
    無料掲示板、チャット等。ものの数分で自分だけの掲示板が作成できます。ここだけで活動していらっしゃる方もいるようですね。
    ■FC2BBS
    無料レンタル掲示板 アクセス解析等。ここの利用者もかなり多いです。teacup同様数分で作成できます。
    ■スゴいカウンター ~ アクセス解析付 カウンター無料レンタル
    アクセス解析付無料アクセスカウンターです。これの利用者も多いですね。
    ぱっと思いつくだけでこんなところです。星の数ほどこの手のサービスはありますので、無料リンク集でも眺めてみてはいかがでしょうか?
    次は設置系です。上記レンタルサーバだと問題なくcgiやphpが使えるのでこれらも利用可能です。是非自分だけのBBSを設置することをオススメします。
    ■Perl Script Language TryTheHomePage
    perl(cgi)解説サイト。設置方法やパーミッションの設定等、初心者向けの情報も満載です。プログラムは覚えなくてもいいので、設置方法だけでも読んでおくと、サンプルの作者に「厨房が」と思われなくて済みますね。
    ■2apes.com
    スキン型掲示板の老舗。ユーザが作成した豊富なスキンをDLするだけで掲示板のデザインを変えられる。日記タイプに改造することも、自作することもhtmlが分かるならワリと簡単。movabletypeを使うまで掲示板にも日記にも、ずっと重宝してました。
    ■futomi’s CGI Cafe
    超高機能アクセス解析やその他使えるCGIプログラムがダウンロード出来る。ウチのアクセス解析はここのを使ってます。最強
    ■CGI RESCUE – ネットサーフレスキューWeb裏技
    cgiの基礎解説から、豊富なcgiスクリプト(掲示板や日記とか)のサンプルダウンロードまでcgiに関することなら殆どの情報が手に入ります。サンプルの数では群を抜いてます。
    ■レッツPHP!
    PHPを自サイトに活用したいならココ。ウチのメールフォームやphotologはこちらのを利用させてもらってます。凄い便利。
    ■9TST4.
    ランキング作成・アクセス解析機能付きカウンタ・高機能掲示板等のスクリプト配布サイト。デザインセンスがとてもよいです。

    【素材・フォント系】

    PCで絵が書けない人、上手く写真が撮れない人はweb上のモノをガンガン利用しましょう。フォントも上手く使えばリッパなデザインになります。
    というわけで、素材集。これも挙げだしたらきりがないので、厳選。
    ■Free Images
    2500を超える高画質フリー写真がDLできます。ジャンル分けされており便利。
    ■FreeFoto.com
    50000オーバー(!)のフリーの写真素材サイト。すげえ。
    ■OpenPhoto.Net
    20000オーバーのフリー写真。センスが良い写真がカテゴリ別に。オススメ。
    写真素材はコレくらいで充分です。次、フォント。
    ■マニアッカーズデザイン
    フリーフォント系サイトの大御所。ここのフォント使ってるヒト多いですよね。カワイイ系フォント満載。
    ■Pentacom.jp
    使えるフリーフォントから超便利フリーソフト、使えるフォトショッププラグインまでの素晴しいサイト。VTRfilterとかtoyFilterとか良い感じです。
    ■pizzadude.dk!
    カワイイ系のフォントサイト。有名フォント多数。
    ■Font Junkie
    作者さんのセンスで集めたフォントリンク集。デザインを見ながら探せるのがいいね。検索も良いです。
    ■DaFONT
    DINGBAT(絵文字)系フォント多数。ジャンルで選べる大量のフォント集。ここだけでホトンドのフォントがDLできるかも。

    【MOVABLETYPE系】

    当サイトはmovabletypeというweblogツールを使って構築しております。weblogの利点として、過去ログの整理のし易さ、更新のし易さが挙げられます。そしてなんといってもgoogleに引っかかり易い(現在のところは)という利点があります。movabletypeならば他のツールに比べて自由度がかなり高いのでweblogっぽくないデザインでやりたい方にもオススメです。
    その内設置マニュアルを作ろうと思っているのでお楽しみに。
    今回はweb作成の中でのMTということで、リンク先は必要最小限に抑えました。
    ■Movable Type 日本語化手順
    日本語環境のMTを語るには外せない存在のみらのさん作のMT日本語化の手順及びMTインストール解説。
    丁寧すぎて涙が出ますね。
    ■HINAGATAテンプレートダウンロードページ(iNTERNET magazine)
    2XUPのかみのごうや氏作成のMT用テンプレート、「HINAGATA」。2カラム、3カラム、写真用があります。シンプルでとても良いです。ここから自分流にアレンジしてみてはどうでしょうか?
    ■すちゃらかCSS素材集: Movable Type用 テンプレートサンプル
    あまりMT用のサンプルページっていうのも見かけないが、すちゃらかさんは豊富にあります。
    これを使って自分流にアレンジしてみるのもよいかもです。
    ■Movable Typeカスタマイズ集(ブロッグ崩し)
    MTはやはりカスタマイズしてこそ楽しいと思います。ブロッグ崩しさんとこは随分前から「読みやすいweblog」を目指していらっしゃいます。大切な事ですよね。
    そのブロッグ崩しさんのカスタマイズリンク集を紹介。大体網羅されています。
    MT系のネタはまた別の機会に特集します。必ずや。

    【CSS系】

    やはり、CSS(カスケーディング・スタイルシート)はweb作成の次のステップには必要不可欠ですね。文字の大きさ、レイアウト等を一元管理できるので覚えたほうが絶対楽なのです。そして鬱陶しいテーブルレイアウトとも早くおさらばしたいものです。
    weblog系のサイトは一部を除いてテーブルを使用してません。fireworks、imageready等で書き出したレイアウトはテーブルにしかならないので仕方ないのですが、文章の部分等はcssを使いたいものですね。僕もまだ理解するには程遠いです(泣
    ■スタイルシートの基本(The Web Kanzaki)
    激しくわかりやすくスタイルシートについて解説してあります。
    ■正誤情報:スタイルシートWebデザイン
    解説書はもういらないかも。
    【その他】
    他にもオススメサイトは沢山あります。
    ■ColorMatch 5K
    スライドバーをマウスでスライドさせるだけでその色に合った5種類の色を表示してくれます。
    色合いに迷ったときはココ。
    ■DHS Front Page
    ダイナミックDNSサービス。自宅サーバでwebをやる人は必須ですね。
    ■FLASH パワーリファレンス
    FLASHを始めようと思ったらまずココ。解説書も顔負けの図付解説アリです。サンプルも豊富。
    ■Internet Archive
    既になくなってしまったサイトを見ることができる驚愕のサイト。月別にアーカイブされています。凄い。ウチのオープン直後の状態もバッチリ晒されています(泣
    ■ミケネコの htaccess リファレンス
    あなたの知らない.htaccessの利用法が満載。
    ■やってはいけない!! ホームページの掟
    一度は読んでおくと良いサイト作成時の注意点が満載です。
    ■サーチエンジン一発登録・一発太郎
    膨大なサーチエンジンに一発で登録してくれます。あまり意味がないように思いがちですが、googleが他のサーチエンジンの結果を拾ってくれるので登録しておいたほうがよいと思われ。
    ■The W3C MarkUp Validation Service
    HTMLをチェックできる。
    ■W3C CSS 検証サービス
    CSSをチェックできる
    =========================
    というわけで一気に書きました。どうでしょうか?僕はwebデザイナーではないのでその筋の方から嘲笑されそうですが、その辺はご勘弁。
    あのサイトが足りてねえよ(怒
    とかはコメントで教えてください。こっそりメールでもいいですよ(笑
    どなたかこれを読んでくれた方が参考になれば幸いです。

    【当サイト関連】

    ■使えるリンク集 – 探し物編


    日々の生活にhappyをプラスする|ハピタスサイフもココロもハッピーに!ちょびリッチ

    この記事を読んで頂きありがとうございます。
    コメント欄も設けておりますが、
    よかったらtwitterやfacebookなどでつぶやいたりシェアして頂けると嬉しいです。

    STARを押してこの記事を評価お願いします→
    つまんないイマイチ普通まあまあよかった! (評価して下さい!)
    Loading...

    Written by ayu in: リンク集 |

    15 Comments »

    • 憲武 より:

      キタ━━━━━━(゚∀゚)━━━━━━ !!!!
      昔作成を断念した僕にぴったりのサイトが沢山ある。
      あ、そうそう足りないといえばここはどうでしょうか?
      ttp://www.sky.sannet.ne.jp/masapine/homepage/

    • mai より:

      わーお。
      参考になります!(泣
      ブログ移行でてんやわんやになってるので・・
      1人の時に問題が起きると泣きそうです。
      知らなかったのがけっこうあって、か~なりありがたいかも。

    • ayum より:

      おひさしぶりです、ブロッグ崩しです。
      ご紹介いただいてありがとうございます。それからちょうどフリーのフォントをいろいろ探してみようと思ってたところにこの情報の充実っぷり、感謝です!

    • 管理人ayu より:

      >憲武さん
      おお、ありがとうございます。そういう小技集のページを載せるのを忘れてました。
      後で追加させてください。
      >maiちゃん
      weblog化おめでとー。あの時に話してからだからかなり早いペースでオープンしたねえ。今後の発展を祈っております。
      >ayumさん
      ホントご無沙汰です。
      フリーフォントって探すの結構ツライんですよね。
      僕はもう上のリンク以外には探しにいかないことに決めてます(笑

    • 使えるリンク集 – web作成編

      使えるリンク集 – web作成編 かなり役に立ちそうです σ(-_-)ワタシも元サイトはHTML打ち込んでますから

    • 使えるリンク集 – web作成編

      使えるリンク集 – web作成編 これは… ううむ、なんて参考になるんだ! ネットショップの商品紹介ページとか、ブログは商用でもかなりいけそうです。(とか言ってる私は、遅れてコトの重大性に気づき、とりあえすブログを触り出したところですが…) 通常のweb作…

    • 渉雲堂別館 より:

      web作成ソフト使ってねぇなぁ

      使えるリンク集 – web作成編 (CROSSBREED クロスブリード!)情報

    • Ono より:

      MT等のblogはそれなりにW3C標準に準拠しているので必要性はそれほどは
      高くないと思いますが、サイト制作について語るならHTML Lintは外せない
      ところではないでしょうか。
      http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

    • より:

      CSS者ならバグ集も必須じゃあ(泣)。
      http://cssbug.at.infoseek.co.jp/

    • 管理人ayu より:

      >onoさん
      確かにそういうサイトは外せませんね。
      ウチはw3c準拠じゃないタグいっぱい使ってるのでダメダメでした(泣
      >樽さん
      僕は上手く表示できないときはすぐにバグかと疑ってしまう横着者です(笑
      情報ありがとうございました。ヒマを見つけて補完します。

    • より:

      善悪を判断してみたり。
      http://homokaasu.org/gematriculator/

    • 管理人ayu より:

      >の さん
      ウチは76%GOODでした。
      喜んでいいのやら悪いのやら・・・

    • 使えるリンク集 – web作成編(メモ)

      ■今回はweb作成編です。有用なサイトがあったのでメモ。オーサリングソフトについ…

    • MARCセミナー

      ●村山らむねのブログ 「らむね的通販生活」 ワーキングマザースタイル[wmstyle.jp] ママドンナ うら@らむ ●影響力のあるブロガー 有名人ブログ集【b…

    • 初心者 より:

      はじめてお邪魔します。
      最近、制作を初めて間もない初心者です。
      大変参考になりました。
      ありがとうございます。

    RSS feed for comments on this post. TrackBack URL


    コメントして下さい

    同一カテゴリ内記事

    最近買ったモノ


    Template: TheBuckmaker.com Blog Themes | Website Hosting, Gesundheitspapst