まずは、foundation6のHTMLテンプレートを見てみましょう。
下記は、foundationのinstallationのサイトで公開されている「HTML Starter Template」です。
http://foundation.zurb.com/sites/docs/installation.html
foundation.zurb.com
CSS版のfoundation6をダウンロードすると、CSSファイルとScriptといっしょに、このテンプレートに近いHTMLファイルが付いてきます。
html5の標準的なコードに加えて、bodyを閉じるタグの前に、独自のScriptを読み込んでいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctypehtml> <htmlclass="no-js"lang="en"> <head> <metacharset="utf-8"/> <metahttp-equiv="x-ua-compatible"content="ie=edge"> <metaname="viewport"content="width=device-width, initial-scale=1.0"/> <title>FoundationStarterTemplate</title> <linkrel="stylesheet"href="css/foundation.css"/> </head> <body> <h1>Hello,world!</h1> <scriptsrc="js/vendor/jquery.min.js"></script> <scriptsrc="js/vendor/what-input.min.js"></script> <scriptsrc="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html> |
続いては、Sass版で作成したProject\src\layoutにあるdefault.htmlです。この部分はすべてのページに共通に読み込まれ、{{!– }}部分に、\src\pages\index.htmlを読み込んで、\dist\index.htmlに出力します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | {{!--Thisisthebaselayoutforyourproject,andwillbeusedoneverypage.--}} <!doctypehtml> <htmlclass="no-js"lang="en"> <head> <metacharset="utf-8"/> <metahttp-equiv="x-ua-compatible"content="ie=edge"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>FoundationforSites</title> <linkrel="stylesheet"href="{{root}}assets/css/app.css"> </head> <body> {{!--Pagesyoucreateinthesrc/pages/folderareinsertedherewhentheflattenedpageiscreated.--}} {{>body}} <scriptsrc="{{root}}assets/js/app.js"></script> </body> </html> |
そして、初期状態でProject/distに書き出されているHTMLのコードが以下です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctypehtml> <htmlclass="no-js"lang="en"> <head> <metacharset="utf-8"/> <metahttp-equiv="x-ua-compatible"content="ie=edge"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>FoundationforSites</title> <linkrel="stylesheet"href="assets/css/app.css"> </head> <body> （省略） <scriptsrc="assets/js/app.js"></script> </body> </html> |
次回は、引き続きHTMLをいじってみたいと思います。
コメント