全体のスタイル - paulbarre/RssReader GitHub Wiki

このレッスンでは詳細なCSSの説明は行いませんが、今まで作ったページのデザインを改善するために、CSSを編集していきます。

下記のCSSをそのまま適用しても構いませんが、時間に余裕があればCSSを編集して好きなデザインに変更してみてください。

全体

main.css

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    font-family: "Roboto Condensed", Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
    background-color: #fff;
}

body, h1, h2 {
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-weight: 500;
}

button:hover {
    cursor: pointer;
}

ヘッダー

header.css

#header {
    background-color: white;
    position: fixed;
    width: 100%;
    height: 6rem;
    color: #5d80ff;
    text-align: center;
    border-bottom: 1px solid #5d80ff;
}

#header h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#header nav {
    position: absolute;
    left: 1rem;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0, -50%);
}

メニュー

メニュー用のヘッダーを用意します。

<aside id="menu">
    <header>
        <nav>
            <button class="menu-btn"><i class="fa fa-close fa-3x"></i></button>
        </nav>

        <h2>メニュー</h2>
    </header>
    ...
</aside>

メニューのボタンアイコンを大きくするため、Font Awesomeのクラスfa-3xを使います。

menu.css

#menu {
    background-color: #5d80ff;
    height: 100%;
    opacity: 1;
    width: 0%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: .5s;
    white-space: nowrap;
    color: white;
}

#menu.opened {
    width: 40%;
}

.menu-btn {
    height: 4rem;
    width: 4rem;
    background-color: inherit;
    border: 0;
    color: inherit;
}

#menu header {
    position: relative;
    height: 6rem;
    border-bottom: 1px solid #fff;
}

#menu header h2,
#menu header nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0, -50%);
}

#menu header h2 {
    left: 1rem;
}

#menu header nav {
    right: 0.5rem;
}

#menu article {
    margin-left: 1rem;
    margin-right: 1rem;
}

#menu li {
    list-style: none;
}

#menu a {
    text-decoration: none;
    color: #e8e9ff;
}

#add-favorite-form {
    width: 100%;
}

フッター

footer.css

#footer {
    background-color: #5d80ff;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 6rem;
    text-align: center;
}

#footer input {
    margin: 1rem;
    width: 80%;
    font-size: 2rem;
}

本文

page.css

#page {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#page h2 {
    text-align: center;
    margin: 2rem;
}

#feed-articles article {
    border-left: 4px solid #5d80ff;
    margin-right: 1rem;
    padding-left: 1rem;
}

#feed-articles .article-title {
    color: #5d80ff;
    font-weight: 300;
}

#feed-articles .article-description  {
    margin: 0;
    color: #848484;
    font-size: 1.4rem;
}

#feed-articles a {
    text-decoration: none;
    color: #5d80ff;
}

完了

上記のスタイルを設定したら、下記のようなデザインになっているはずです。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️