Zenn
Closed3

2020/11/28

#
作業ログ
shusukeshusuke

忙しくて作成が夜になってしまった。

今日は前日のReaction Flower Viewerを仕上げたりした。

https://github.com/shusukeO/reaction-flower-viewer
これはajaxだったりp5jsだったり使ってる。
p5jsをサイトの背景にするときこのCSSのプロパティは使える。

body {
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    height: 100%;
}

htmlのheadにはこの辺を入れておけばok

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="sketch.js"></script>

あと、サイト上部に固定するナビゲーションバーは今後も使える。

<header>
        <h2 style="color: white;">Reaction Flower Viewer</h2>
        <nav>
            <ul class="menu">
                <li><a href="https://github.com/shusukeO/reaction-flower-viewer">source</a></li>
                <li><a href="">Join Reaction Flower</a></li>
                <li><a href="" id="ajaxreload"></a></li>
            </ul>
        </nav>
    </header>

header {
    width: 100%;
    height: 53px;
    background: #2196F3;
    padding: 20px 50px;
    box-sizing: bordre-box;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;

}

header .menu {
    display: flex;
}

header .menu li {
    list-style: none;
}

header .menu li + li {
    margin-left: 40px;
}

a {
    text-decoration: none;
}

いい感じにできて満足。講評してくださる方からも良い評価をいただけた。

shusukeshusuke

これからhttps://github.com/shusukeO/reaction-flower-viewerのREADME.mdに参考文献まとめて、chromeのタブを整理する。

このスクラップは2020/11/29にクローズされました