複数の要素を内包するブロックのクラス名には、
・container(wrapper)
・inner
・outer
・content
・box
などなど、様々なものが使われている。
それぞれのクラス名がどのようなケースで使用すべきなのか、明らかにし、クラス名の選択に迷わないようにしたい。
・container(wrapper)
全てのブロックを囲む親分ブロック。
ページ全体の幅、背景などはここに設定する。
・inner
containerが内容する複数の要素を全て囲むブロック。(divなど)
意味がある囲みというより、
囲むと、widthなどが綺麗に決まるなどのレイアウトの便宜上の理由から囲むイメージ。
・content
innerのうち、そのページの主役となる内容。
フリマサイトの詳細ページで言うなら、
商品の情報部分。
コメント欄や、サイドナビなどは含まない。
・box
一つの機能のために働く要素群を囲む狭いグルーピング。
複数あるSNSボタンを囲んだり、
検索ボックスのテキストエリアと実行ボタンを囲んだり。
placeholderを設定したのに、「ここに名前を入力してください」等のテキストが表示されない。
ケース別の解決方法は次の通りです。
①font-sizeが0に設定されているケース
placeholderで表示されるテキストの大きさはfont-sizeで設定しますので、0だとテキストが見えなくなってしまいます。
よくあるのが、親要素のfont-size0を子要素が承継した結果表示されなくなるなるケース。
この場合、子要素で改めてfont-sizeを設定すれば表示されます。
原因は他にも色々ありますが、それは追って紹介します。
意図せずに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だと、入力もできなくなる(厳密にはできてるけど、０だから見えないだけかもしれませんが)
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となるため、合わせて縮んでくれる。
□やりたいこと
ヘッダー内ナビゲーションとウィンドウ枠のパディングを次の条件を満たすよう設定したい。
【条件】
・ウィンドウの幅に関わらず、必ずヘッダーの左右に60pxのパディングを確保
・ウィンドウの幅が最も広い時、60pxしかないと、ナビゲーションエリアが横に伸びきって見栄えが悪いので、伸びきらないようwidthに上限を設定する。(結果、ナビエリア-ウィンドウ枠間にマージンが発生)
【解決方法】
・最低限の60pxを確保するために、ヘッダー左右に60pxでパディングを設定
・ナビゲーションエリアにmax-widthを設定する。
□sectionタグの使い方
sectionタグは、コンテンツ内の章、節として使いましょう。
サイトの要素は大体これに該当するので、しょっちゅう使います。
よくariticleタグとの比較で説明されますが、
sectionタグはあるコンテンツの一部(章など)、articleは、それ自体が一つのコンテンツとして独立しているものに用います。
具体例は、ニュースサイト、まとめサイト内の各記事が該当します。
これらのサイト内記事は、もちろん、サイトの一部を構成していますが、内容としては、それだけで完結しており、それ以外の要素とは無関係ですよね。
このため、１つの独立した記事、articleとして取り扱います。
他にはあまり例が思いつかないぐらい、articleタグの出番は少ないです。
gemfileでインストールするgemを記述する際、バージョンを指定することがありますが、その結果何が起こるのか、どういう時にバージョンを指定すべきなのか、いまいちピンとこなかったので調べてみました。
# 5.2.3以上、6未満のものしかインストールできない。 '~>5.2.3', '<6.0.0'と意味は同じ。 gem 'rails', '~> 5.2.3' # 0.4.4以上、.0.6.0未満のものしかインストールできない。 gem 'mysql2', '>= 0.4.4', '< 0.6.0' # 1.3.0以上のものしかインストールできない(以上あればなんでもいい) gem 'uglifier', '>= 1.3.0'
Aというアプリがあって、このアプリが、0.4.4以上、.0.6.0未満のバージョンのmysql2に対応するよう設計していたとしましょう。 この場合、gemfileにバージョン指定せず、単にmysqlとだけ書くと、bundle install した際には、現在公開されている最新バージョンがインストールされてしまい、エラーが起きてしまう可能性があります。
このため、バージョンによってはエラーが生じる可能性のあるgemは、問題が起きないと確信がもてるバージョンしかインストールできないよう制限をかけているのです。