おはこんばんじにちは。

今日はフッターを作りました。

もちろんMaterial Design{.keyword} Liteのです。

今から説明してきます。

1.Material Design{.keyword} Liteからフッターのコードを入手

Material Design{.keyword} Liteのコンポネートに、フッターってのがありました。

それを使って作っていきます。

元のコード↓

<footer class="mdl-mega-footer"><br /> <div class="mdl-mega-footer__middle-section"><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked><br /> <h1 class="mdl-mega-footer__heading">Features</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Terms</a></li><br /> <li><a href="#">Partners</a></li><br /> <li><a href="#">Updates</a></li><br /> </ul><br /> </div><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked><br /> <h1 class="mdl-mega-footer__heading">Details</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="#">Specs</a></li><br /> <li><a href="#">Tools</a></li><br /> <li><a href="#">Resources</a></li><br /> </ul><br /> </div><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked><br /> <h1 class="mdl-mega-footer__heading">Technology</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="#">How it works</a></li><br /> <li><a href="#">Patterns</a></li><br /> <li><a href="#">Usage</a></li><br /> <li><a href="#">Products</a></li><br /> <li><a href="#">Contracts</a></li><br /> </ul><br /> </div><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked><br /> <h1 class="mdl-mega-footer__heading">FAQ</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="#">Questions</a></li><br /> <li><a href="#">Answers</a></li><br /> <li><a href="#">Contact us</a></li><br /> </ul><br /> </div><br /></div><br /><div class="mdl-mega-footer__bottom-section"><br /> <div class="mdl-logo">Title</div><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="#">Help</a></li><br /> <li><a href="#">Privacy & Terms</a></li><br /> </ul><br /> </div><br /></footer>

2.そしていろいろな部分を変える

このブログのフッターなので、HelpとかFAQとかいりません。ってことで、文字を変えていきます。ついでにURLも入れます。

友達であるdeep君(https://user-duah4553.hateblo.jp)と猫山さん。.lzh{.keyword}(https://nekoyama3.hatenablog.com)のサイトを入れ、完成!!

できたときのコードはこちら↓

<footer class="mdl-mega-footer"><br /> <div class="mdl-mega-footer__middle-section"><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked=""><br /> <h1 class="mdl-mega-footer__heading">Categories</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="https://nsk-1010.hatenablog.com/archive/category/VARIOUS">VARIOUS</a></li><br /> <li><a href="https://nsk-1010.hatenablog.com/archive/category/DESIGN">DESIGN</a></li><br /> <li><a href="https://nsk-1010.hatenablog.com/archive/category/MAKE%20FONT">MAKE&nbsp;FONT</a></li><br /> </ul><br /> </div><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked=""><br /> <h1 class="mdl-mega-footer__heading">Details</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="https://nsk-1010.hatenablog.com/entry/self-introduction">Self-introduction</a></li><br /> <li><a href="https://profile.hatena.ne.jp/nsk_1010/">Hatena-Profile</a></li><br /> <li><a href="https://nsk-1010.hatenablog.com/about">About</a></li><br /> </ul><br /> </div><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked=""><br /> <h1 class="mdl-mega-footer__heading">Links</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="https://www.pixiv.net/users/39463570">pixiv</a></li><br /> <li><a href="https://twitter.com/nsk_id1010">Twitter</a></li><br /> </ul><br /> </div><br /><div class="mdl-mega-footer__drop-down-section"><br /> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked=""><br /> <h1 class="mdl-mega-footer__heading">Friend Blogs</h1><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><a href="https://user-duah4553.hateblo.jp/">deep&nbsp;ぺちぺちぶろぐ</a></li><br /> <li><a href="https://nekoyama3.hatenablog.com/">猫山さん。.lzh&nbsp;猫山さんの雑記ぶろぐ。</a></li><br /> </ul><br /> </div><br /></div><br /><div class="mdl-mega-footer__bottom-section"><br /> <div class="mdl-logo">BLOG-NO-NANIKA</div><br /> <ul class="mdl-mega-footer__link-list"><br /> <li><i class="material-icons">copyright</i>2020&nbsp;nsk-1010<br>Base Theme by hatenablog</li><br /> </ul><br /> </div><br /></footer>

 まとめ

こんな感じにフッターを作りました。

飽きるまではこれを使っていきたいです。

またねー!!