とりあえず掲示板を作るのに必要な、送信の部分に関しては作り終えましたけど、まあ見ての通り虚しさを覚えるほどの殺風景です。
前回作ったのがコレです。
なんだコレは。
はやいとこ、ある程度装飾をしていきたいと思います。
最低でもあれらのパーツを縦に並べたいですよね。
というわけでまず縦に並べるところから始めます。
この操作はCSSから行うことになります。
なお、このブログではVS Codeを使っていますので、Sassを使った表示になります。
たとえば、
form { display: flex; flex-direction: column; } form input { margin-top: 10px; }
は
form { display: flex; flex-direction: column; input { margin-top: 10px; } }
のように書くことになります。
inputに対してformが親要素ですので、本来なら毎回「form input{}」のように書かないといけないのですが、Sassを使えばformの入れ子（{}で囲まれた部分です）の中に入れておけば、formと書くことを省略できます。
Sassマジ便利。
で、その便利なSassを使うためには「scss」という拡張子のファイルを作る必要があります。
なので「style.scss」というファイルを作ってください。
これを保存すれば、勝手に「style.css」というファイルが出来上がります。
これが本来のCSSファイルです。
必要なのはあくまでCSSファイルのほうですので、必ずこのファイルが生成されているか確認してください。
さて。まずレイアウトを決めるところから始めるわけですからdisplayをつかうことになります。
ではdisplayはflexとgridのどちらを使うべきかが悩みどころです。
どちらも配置を決めるものだからです。
で、調べてみたんですけど、flexは一方向に配置を並べたい場合、gridは二方向に配置を並べたい場合に使うと良いんだそうです。
つまりすごろくか将棋か、みたいな感じなんだと思います。
すごろくは一般的にはゴールまで一直線ですが、将棋は縦と横があります。
とりあえず今の私の理解はこんなところです。
というわけで上から下にパーツを配置したいだけなので、ここではflexを使いたいと思います。
まずlinkをエメットで変換し、あたらしいstyle.cssに紐づけます。
<link rel="stylesheet" href="style.css"> </head>
form{ display: flex; }
これの子要素を縦に並べるには「方向を縦に」という指示をすればいいので、こんな感じですね。
form{ display: flex; flex-direction: column; }
「flex」と書いただけで、エンターキーを二回ほど押せばここまで書いてくれました。
エメットマジ便利。
columnってのは、もともとラテン語はcolumnaといって「柱」って意味らしいです。
だから縦だってことみたいですね。
ちなみに横はrowです。
これはそのまま「行（ぎょう）」という意味です。
で、なんですけど、これでパーツが縦に配置されるかと思ったけど配置されません。
なんで？
よーく見直したら先日書いたhtmlのが2つありました。（前回の記事をご覧になってない方は気にしないでください。）
ので、要素を挟んでいないほうのを消したら、ちゃんとうまくいきました。
フォームもボタンも画面端から画面端まで届くとんでもない形ですが、とりあえず縦に並びました。
ただし、パーツが画面端から端まで届いていてバグってるようにしか思えない見映えです。
次はその馬鹿みたいな横長をどうにかします。
まずなんとなくわかりやすいということで、ボタンのサイズを考えてみます。
というより考えてもわからないので調べてみます。
適切な結構ボタンのサイズって結構議論があるところみたいですね。
まあサイトにもよるというのがおおきいのでしょうけど。
縦幅は初期設定で問題ないように思えるので、問題は横幅ですね。
これもまあ適当でいいとは思うんですけど、数値的に中途半端だと気分が悪いので、少なくとも偶数にしたいと思います。
とか色々思ってましたけど、まあもう適当でいいや。
あとから確認してダメそうなら修正します。
高さと横幅の指定は以下の通りにしてみます。
button{ width: 200px; height: 50px; }
まあスマホでタップすることも考えたら、これくらいの大きさでいいかというような気がします。
ただ、ボタンは大きくなったけど、中の「送信」という文字が小さすぎるので、これをどうにかします。
button{ width: 200px; height: 50px; font-size: 20px; }
高さの半分より少しだけ小さい、という感じで悪く無い気がします。
で、ここまでやっててずっと思ってたんですけど、フォームとフォームとボタンの間隔がゼロなので、めちゃくちゃ窮屈です。
これ、隙間を入れないとだめですね。
隙間はmarginだったと思います。
paddingやらとごっちゃになってるところがありますので、各々もとの意味を調べておきます。
margin=余白。
padding=詰め物。
マージンって利ざやという意味でしかあまり聞いたことはありませんけど、パッドはありますね。
パッド胸みたいな感じで。
最初に連想する単語としてはどうかと思いますが。
とりあえずGoogleChromeの「検証」で見られるそれらの関係図はこんな感じなので、意味といっしょに考えたら覚えられそうです。
margin。
border。
padding。
borderは普通に線の太さとかでしょう。
なんにしてもやっとmarginを変えれば、隙間を空けられるということがわかりました。
さて、ではどこにそれを書けばいいのでしょう。
ボタンの上に隙間を空ければいいからボタンの上にマージンを指定すればいいのでしょうか。
そうするとフォームの上、もう一つのフォームの上、とか一つひとつ書いていくことになります。
まあ
