HTMLの勉強を始めて、まだ一ヶ月くらいしか経っていないのですが、がんばって「集中執筆モード」やYoutubeのフルスクリーンモードのような「集中読モード」を作成しようと考えています。
動作は、
1. 各投稿ページ(例、http://guacamo-le.com/evernote-kowaza)を開いたら、pocketのように、サイドバーや、ヘッダー、背景のないページを表示
2. ページの右下に「集中読モードの終了」ボタンを表示
3. そのボタンをクリックすると、ヘッダー、サイドバー、フッターがスライドで表示される。
4. あるいは記事の一番下までスクロールしたら、ヘッダー、サイドバー、フッターがスライドで表示される。
仕組みは
1. #header, aside, #footerをJqueryfadein,fadeoutさせる
2. marginなど、細かくCSSを調整して、記事をディスプレイの中央に配置させる。
3. 「記事の一番下までスクロールしたら」の部分は、スクロール量に合わせてボタンを表示するを参考にする。
理論的には、簡単そうなのですが、実際に導入するとなると、慣れていないので何度もテストを繰り返すことになりそうです。そのたびに、filezillaを使うのは都合が悪いし、CSSの変更のように、何とかGoogle Developerツールなどでうまく仮組み込みとテストをすることはできないでしょうか?