Webサイトの模写

このWEBページを模写してHTMLとCSSの練習をしたい!
というときのお役立ちの技。




テキストだけを保存したい時

Webページのテキストを保存する方法 for Mac
http://inforati.jp/apple/mac-tips-techniques/application-hints/how-to-save-a-web-site-with-mac-stickies-app.html

  1. そのWEBサイトをすべて選択。
  2. Mac標準装備のスティッキーズを起動して、選択部分をそのままスティッキーズにドラック&ドロップ。
  3. スティッキーズのメモにテキストだけが抽出される。

画像すべてを保存したい時

Webページの画像をまとめて保存する方法 for FireFox
http://journal.mycom.co.jp/articles/2010/09/29/firefox-all-images-download-tip/index.html

  1. Firefoxを使った場合の方法で、アドオンやエクステンションをインストールすることなく、デフォルトで提供されている機能。
  2. 画像を保存したいWebページをFirefoxで閲覧
  3. ツールメニューから「ページの情報」を選択。もしくはマウスを右クリックでもOK。
  4. ページの情報ダイアログが起動してきたら、メディアタブをクリック。
  5. Ctrl-Aを押して全部選択。選択した状態で「名前を付けて保存」をクリック。あとは保存する場所を指定して「OK」を選択。


テキストと画像さえそろえば、あとは、miやDreamweaverなどでタグうち練習!

テンプレートなどをダウンロードすれば、psdファイルもついてきたりするので、psdを作り込むのもいいかな、と。