やりたいこと
applestoreとgoogleplayの二つのバッジを横に並ベて配置したい。
問題点
googleplayのバッジは、周辺に余白を伴うため、両者のバッジ部分のサイズが同じであっても、余白の分ずれる。
解決方法
テーブルを使い、二つのバッジを同一のtrのtdにそれぞれ収める。
同一tr内のtd同士は高さが同じになり、td内容の要素は縦方向に中央揃えとなる結果、バッジ部分のサイズさえ同じなら、片方のバッジがその外側に余白を伴おうと、バッジ部分の位置は揃えられる。
クラス名の決め方(囲み系)
やりたいこと
複数の要素を内包するブロックのクラス名には、
・container(wrapper)
・inner
・outer
・content
・box
などなど、様々なものが使われている。
それぞれのクラス名がどのようなケースで使用すべきなのか、明らかにし、クラス名の選択に迷わないようにしたい。
使い分けの基準
・container(wrapper)
全てのブロックを囲む親分ブロック。
ページ全体の幅、背景などはここに設定する。
・inner
containerが内容する複数の要素を全て囲むブロック。(divなど)
意味がある囲みというより、
囲むと、widthなどが綺麗に決まるなどのレイアウトの便宜上の理由から囲むイメージ。
・content
innerのうち、そのページの主役となる内容。
フリマサイトの詳細ページで言うなら、
商品の情報部分。
コメント欄や、サイドナビなどは含まない。
・box
一つの機能のために働く要素群を囲む狭いグルーピング。
複数あるSNSボタンを囲んだり、
検索ボックスのテキストエリアと実行ボタンを囲んだり。
placeholderのテキストが表示されない
解決したい問題
placeholderを設定したのに、「ここに名前を入力してください」等のテキストが表示されない。
解決方法
ケース別の解決方法は次の通りです。
①font-sizeが0に設定されているケース
placeholderで表示されるテキストの大きさはfont-sizeで設定しますので、0だとテキストが見えなくなってしまいます。
よくあるのが、親要素のfont-size0を子要素が承継した結果表示されなくなるなるケース。
この場合、子要素で改めてfont-sizeを設定すれば表示されます。
原因は他にも色々ありますが、それは追って紹介します。
inline-block要素間の原因不明な余白の消し方
やりたいこと
意図せずにinline-block間に生じた原因不明の余白(marginもpaddingも0にも関わらず)を取り除きたい。
実はこれ、正体は半角スペースなんです。
もっと言うと、inline-blockが二つ続けば、自動的に改行が行われ、その改行が半角スペースとして扱われるんです。
解決方法
そこで、その半角スペースをなくす方法ですが、
そもそもスペースは、font-sizeに比例してサイズが決まるので、二つのinline-blockを包含している親要素のfont-sizeを0にしてしまえば消えます。
副作用
親要素のfont-sizeを0にすると、包含されている子要素が、属性を承継してしまいますので、子要素にベット値を設定しなおしましょう。
例えば、子要素にキーワードを入力するinput要素があった場合、副作用により、placeholderが見えなくなりますし(placeholderはfont-sizeで表示文字の大きさが決まる)、入力もできなくなります。
font-sizeが0だと、入力もできなくなる(厳密にはできてるけど、０だから見えないだけかもしれませんが)
フレックスボックスで横並びにしたブロックレベル要素のwidthを調整
やりたいこと
width1024pxのdivに子要素を２つ持たせ、フレックスボックスで横並びにして、子要素のwidthを調整したい
解決法
2つの子要素のうち、左にはpタグで囲ったimage要素、右にはdivで囲ったinput要素を置いた場合で、右のdiv要素の幅はどうなるのか考える。
「子要素のwidthはデフォルトでは親要素の100%となる」というルールから、子要素であるdivは、親要素であるdivのwidth1024と同じ幅に揃いそうだが、フレックスボックスにより、左にはimage要素がいることから、親要素の幅いっぱいに広がれないし、かと言って、親要素の幅からimage要素の幅を引いた、残りの幅いっぱいにも広がってくれず、divが内包するinput要素がもつ幅が、そのまま子要素divの幅となる。
では、子要素divが内包するinputのwidthはどうあるべきか。
想定するのは、ウインドウ幅の変化に合わせて伸縮するwidthなので、
pxではなく、％で設定することになる。
結論として、100％にすれば良い。
ただし、%とするには、親のdivにも基準となるwidhtを持たせないといけないので、840pxと設定する。
固定値にすると伸縮しないように思えるが、
この場合、840pxと言っても、その幅は「子要素のinputで決まる」というルールが優先されるので、
ウインドウ幅を縮めると、(840pxとは関係なく)子要素divのwidthが縮むので、子要素のinputは、常に縮んだdivの100%のwidthとなるため、合わせて縮んでくれる。
paddingの設定(ヘッダー編)
□やりたいこと
ヘッダー内ナビゲーションとウィンドウ枠のパディングを次の条件を満たすよう設定したい。
【条件】
・ウィンドウの幅に関わらず、必ずヘッダーの左右に60pxのパディングを確保
・ウィンドウの幅が最も広い時、60pxしかないと、ナビゲーションエリアが横に伸びきって見栄えが悪いので、伸びきらないようwidthに上限を設定する。(結果、ナビエリア-ウィンドウ枠間にマージンが発生)
【解決方法】
・最低限の60pxを確保するために、ヘッダー左右に60pxでパディングを設定
・ナビゲーションエリアにmax-widthを設定する。
1日目 学んだこと
□sectionタグの使い方
sectionタグは、コンテンツ内の章、節として使いましょう。
サイトの要素は大体これに該当するので、しょっちゅう使います。
よくariticleタグとの比較で説明されますが、
sectionタグはあるコンテンツの一部(章など)、articleは、それ自体が一つのコンテンツとして独立しているものに用います。
具体例は、ニュースサイト、まとめサイト内の各記事が該当します。
これらのサイト内記事は、もちろん、サイトの一部を構成していますが、内容としては、それだけで完結しており、それ以外の要素とは無関係ですよね。
このため、１つの独立した記事、articleとして取り扱います。
他にはあまり例が思いつかないぐらい、articleタグの出番は少ないです。