今からサークルのホームページを作ります。
作りながらメモをしていきます。
作成したサイト
Misterylab – world creaters factory
デザインを用意する。
イラレで作ったデザインを用意した。
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;
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と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/
毎回忘れる言葉 タグライン
時間が経つと、この言葉をいつも忘れる。
タグライン
タイトルの下にあるサブタイトルやスローガンとか…
まぁ、タグラインはタグラインだ。