タイトル通り、ちょっとしたことを調べるときに使えそうなページを作りました。
- BMI調べたいとか
- テレビ買う時とかにインチって何センチだっけとか
- 今年西暦／和暦何年で干支は何で自分は何歳なんだっけ
とかたま〜〜に気になるようなことを知ることができます。
webページとして公開したいけど、サーバー立てるのは面倒だったので、github pagesで公開しました。
というわけで慣れ親しんだPythonは使えないので、
JavaScript素人／jQuery初見、の状態でなんとか色々調べながら作成しました。
jQueryについてはいまだによく分かっていません。
もちろんcssもよく知らないのでカスみたいな見た目してます。
こういうの追加してほしいとかあれば可能な限りで追加してみます。
あとcssもアドバイスあれば嬉しいです。
追記
内容なさすぎたし、コード書けって言われて確かにとなったので追記します。
コード全部載せるのはアレなんで、詳しく見たい方はgithubで見てください。
ここでは作成時に気にしてたことを一つだけ書きます。
今回こちらのサイトを作成する際には、レスポンシブデザインを気にして作成していました。
safariにはレスポンシブデザインモードがあり、そこで逐一タブレットやスマホでの表示をチェックしながら作成していました。
PCでは3列表示で、全コンテンツを一度に表示するように見れ、
スマホ表示ではそれだと小さすぎるので、一列に表示するようにしているのですが、
PCの場合の3列表示したいときに、普通に
<div id="leftside">
左中身
</div>
<div id="center">
中央中身
</div>
<div id="rightside">
右中身
</div>
として
#leftside {
float:left;
width:29%;
}
#center {
}
#rightside {
float:right;
width: 29%;
}
とかってやるとrightsideの要素がcenterの要素の右下に来てしまいました。（確か）
centerが普通に表示した後に、float:rightが効いてるからでしょうか。
htmlでcenterとrightsideの要素を逆にすればちゃんとなりましたが、今度はスマホにしたときにcenterがrightsideの後ろにきて気持ち悪いです。
ということで、自分は以下のようにしました。
<div id="leftside">
左中身
</div>
<div id="center-right">
<div id="centerside">
中央中身
</div>
<div id="rightside">
右中身
</div>
</div>
#leftside {
float:left;
width:29%;
}
#center-right {
float: right;
width: 70%;
}
#centerside {
float:left;
width: 49%;
}
#rightside {
float:right;
width: 49%;
}
centerとrightsideをまとめた要素を作ってそれを右寄せして、その中でまた左右に分けることで、2列表示のやり方を入れ子にすることで、上の問題を解決できました。
自分で思いついたのは偉いと自画自賛していますが、
CSSのスペシャリスト的に、もっといい3列表示の方法があれば教えてください。