サークルホームページ実制作 第1回~作業メモ

今からサークルのホームページを作ります。

作りながらメモをしていきます。

作成したサイト

Misterylab – world creaters factory

https://misterylab.com/

デザインを用意する。

イラレで作ったデザインを用意した。

htmlとcss作成

reset.cssの実装

reset.cssって、今もまだ使われてるのかな?

調べたら使われてるみたいだ。

という事で、まずはreset.cssを拾ってこよう。

https://webdesign-trends.net/entry/8137

今回は、昔から良く愛用しているHTML5 Doctor Reset CSSを使おう。

http://html5doctor.com/html-5-reset-stylesheet/

cssで複数のcssをまとめて読み込む

http://rensabanet.com/blog/hp/12115/

@charset “UTF-8“;

@import “cssファイル名”;

charsetを忘れずに!

ちゃんとUTF-8で保存しているなら、無くてもいいらしい。

cssで高さmaxで表示する方法

https://qiita.com/shouchida/items/205fed63b886681661bd

上記の奴でも出来たけれど、下記の方がよさげ

min-height: 100vh;

 を使えばhtmlとbodyに100%設定する必要がない。
vhという、画面の大きさを基準にした単位を使用します。
vhは、初めて使うわ。こんなんあったんだね。
全てのブラウザで対応しているのかしら?

footerを下に固定する。

https://techacademy.jp/magazine/19410

http://www.htmq.com/css3/box-sizing.shtml

スクロールバーを非表示にする。

https://on-ze.com/archives/289

https://qiita.com/naru0504/items/ff0c77775223dc5a9148

高さmaxにしているはずなのに、footerの下に1~2ピクセルできてスクロールしちゃうんだよなぁ…なんだこれ…

スクロールバーは消さずに、その部分だけ消したい。

footerの下の余白を消す

https://guuten.net/footer-margin/

https://mamewaza.com/support/blog/howto-use-flex.html

http://www.htmq.com/css/flex-direction.shtml

overflow:hiddenつければ簡単に出来るけど、それだと小さくした時スクロールできなくなるから却下したい。

footerに高さ設定したら余白無くなる。

height:auto;すれば余白なくなるから、とりあえずこれで良し。

下記の二通りの方法がある。

・position: relative;position: absolute;を使う方法

・display: flex;を使う方法

positionを使うと小さくした時、上のエリアがfooterの下に隠れてしまうのでdisplay:flexの方が好みなので、display:flexを使う事にする。

と、思ったけどwrapにpadding-bottomを設定すれば隠れない。

色々試していて、やっぱりpositionでやった方が色々都合が良いのでpositionにする事にした。

html{height:100%;}
body{
    height:100%;
}
#world{
    /* position: relative; */
    displayflex;
    flex-directioncolumn;

 

    width:100%;
    min-height100vh;
    box-sizingborder-box;
    background#3cafce;
}
#primary{
    background#eee;
    width100%;
    height100%;
}
header{
}
footer{
    /*
    position: absolute;
    bottom:0;
    */
    width100%;
    height:auto;
    margin-top:auto;
    background#002a47;
}
html{height:100%;}
body{
    height:100%;
    color:#fff;
}
/* world
*/
#world{
    /*
    display: flex;
    flex-direction: column;
    */
    positionrelative;
    width:100%;
    min-height100vh;
    padding-bottom50px;
    box-sizingborder-box;
    background#3cafce;
}
/* header
*/
header{}
#logo{
    positionabsolute;  
    left0;
    right0;
    margin:auto;
    width:483px;
    height:179px;
}
/* nav
*/
nav{
}
nav a{
    color:#fff;
}
nav ul{
    displayblock;
    padding:20px 10px;
    background#aaa;
    text-align:center;
}
nav ul li{
    displayinline;
}
/* footer 
*/
footer{
    positionabsolute;
    bottom0;
    width100%;
    heightauto;
    background#89c7de;
    /*background: #002a47;*/
    color#fff;
    overflow:hidden;
}

たぶん要らんもん色々入っているだろうけど、もう知らん。

たぶん、htmlとbodyの100%とか要らないと思う。

まぁ、念のため入れとくお守り的な感じでね。

jsで画像サイズを取得する。

https://lab.syncer.jp/Web/JavaScript/Snippet/35/

今まで手入力で画像サイズ入れてたけど、htmlで取得できるだろ?と思って調べたらjsで取得できるようだ。

そのうち使おう。

css 隣接 関節 直下

http://blog.aire-project.com/articles/541

たまに忘れるやつ。

css 複数指定

「,」 カンマで繋げる。

これもたまに忘れるやつ。

http://weboook.blog22.fc2.com/blog-entry-268.html

position absoluteを使って上下左右を中央に揃える。

https://cotodama.co/position-absolute-center/

https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translateY

clearfixの設定

https://arts-factory.net/clearfix/

 毎回忘れる言葉 タグライン

時間が経つと、この言葉をいつも忘れる。

タグライン

タイトルの下にあるサブタイトルやスローガンとか…

まぁ、タグラインはタグラインだ。

コメントを残す