サイトを読み込む（ファイル／フォルダ）

新規プロジェクトを作るときに、どちらかを選びます

HTML / CSS ファイルを読み込む… HTML と CSS のファイルだけを選びます。 1枚もののページや、画像をすべて外部URLで指定しているサイトはこちらで十分です。

フォルダを読み込む… ページのファイルが入ったフォルダをまるごと選びます。画像フォルダがある場合や、複数ページで構成されている場合はこちらを選んでください。 画像が正しく表示され、ページ同士のリンクもつながります。

1回の読み込みで扱えるファイルは60個までです。作れるページの数は ご利用のプランの上限にもよります（→ クレジットの数え方）。

読み込めない・白紙になることがあるもの

SHITAJI は見た目をそのまま写すツールで、ボタンを押したときの動き・ 切り替え・アニメーションといったJavaScript による見た目づくりは再現できません。

Tailwind CSS だけで作られたサイトはそのまま読み込めます。クラス名から自動でスタイルを組み立てるので、手書きのCSSと同じように扱えます （CDN版のTailwind（<script src="…tailwindcss.com">）を そのまま使ったファイルでも大丈夫です）。問題になるのはTailwind自体ではなく、React・Vue・Next.js などの「フレームワーク」の方です。

React・Vue・Next.js などで作られたサイトは、ファイルの中身が最初は「箱」だけで、 文字や画像はブラウザで開いたときにプログラムが組み立てます。 そのファイルをそのまま渡しても中身が空なので、SHITAJI は読み込む前に見つけてお知らせします。 この場合は、次の手順で読み込んでください：

1. そのサイトをブラウザで開く（開発中の自分のサイトなら、手元で表示した状態でよい）
2. ブラウザのメニューから「名前を付けて保存」→ 保存形式は「ウェブページ、完全」を選ぶ（Chromeの場合）。 同じ名前の .html ファイルと、 画像などが入った _files フォルダの2つができます
3. SHITAJIで「フォルダを読み込む」を選び、その2つ（HTMLファイルと _files フォルダ）を一緒に選ぶ

一方、スライド形式のプレゼンテーション（reveal.js等で作られたもの）は この検知に引っかからず、読み込み自体は成功したのに画面が真っ白になることがあります。スライドの中身はJavaScriptが動いて初めて1枚ずつ表示される作りのためです。 心当たりがある場合は、表示したい1枚だけを普通のページとして作り直してから読み込んでください。

読み込みが終わると、「直したところ」「まだ直っていないところ」のレポートが出ます。 Studio に取り込むと崩れてしまう書き方を見つけて、可能なものは自動で書き直しています。

「まだ直っていないところ」が残ることもあります。その場合は「自動で直せなかったところ」に 内容が並びます。そのまま取り込むか、元のHTMLを直してから読み込み直すかを選べます。 あとから場所を確かめたいときは、画面上部のチェックの印か書き出しレポートから 「編集画面のどこか見る」で該当箇所へ飛べます。

文字・書体・大きさ・色・画像・リンク先を直せます。どこまで直せるかはエディタで直せること・直せないことをご覧ください。直したら「Studio用に書き出す」を押して、コピー＆貼り付け（⌘V、Windowsは Ctrl+V）で Studio に追加します （うまくいかないときはChrome拡張も使えます）。

読み込んだだけではクレジットを使いません。できあがりを画面で確かめて「Studio用に書き出す」を押したときに、 そのとき初めてページの数だけ消費します（3ページのサイトなら3クレジット）。 気に入らなければ、何度読み込み直しても無料です （→ クレジットの数え方）。