foundation6のHTMLテンプレートを見てみよう
まずは、foundation6のHTMLテンプレートを見てみましょう。
下記は、foundationのinstallationのサイトで公開されている「HTML Starter Template」です。
http://foundation.zurb.com/sites/docs/installation.html
CSS版のfoundation6をダウンロードすると、CSSファイルとScriptといっしょに、このテンプレートに近いHTMLファイルが付いてきます。
html5の標準的なコードに加えて、bodyを閉じるタグの前に、独自のScriptを読み込んでいます。
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Foundation Starter Template</title> <link rel="stylesheet" href="css/foundation.css" /> </head> <body> <h1>Hello, world!</h1> <script src="js/vendor/jquery.min.js"></script> <script src="js/vendor/what-input.min.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html>
続いては、Sass版で作成したProject\src\layout
にあるdefault.html
です。この部分はすべてのページに共通に読み込まれ、{{!-- }}部分に、\src\pages\index.html
を読み込んで、\dist\index.html
に出力します。
{{!-- This is the base layout for your project, and will be used on every page. --}} <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation for Sites</title> <link rel="stylesheet" href="{{root}}assets/css/app.css"> </head> <body> {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} {{> body}} <script src="{{root}}assets/js/app.js"></script> </body> </html>
そして、初期状態でProject/distに書き出されているHTMLのコードが以下です。
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation for Sites</title> <link rel="stylesheet" href="assets/css/app.css"> </head> <body> (省略) <script src="assets/js/app.js"></script> </body> </html>
次回は、引き続きHTMLをいじってみたいと思います。