自己紹介

29歳。文系卒。新卒入社でWebディレクターを２年半経験。
その後は番組の字幕制作の仕事に従事。
現在はエンジニア転職を目指して勉強中。

HTML/CSSの印象

おそらく最も親しみのある言語。学習していて発見という発見はなかったが、marginやpaddingなどふわっとしていた概念が少しずつ身についてきている気がする。

レスポンシブデザイン

基本的なことは問題ないので、レスポンシブに関する基本～Flexboxの順でまとめる。

viewport

レスポンシブはこれをしないと始まらない。headタグ内に設定しよう。これがないと後述のmediaクエリがうまく機能しない。

html

<!-- headerタグ内に設定 -->
<meta name=”viewport” content=”width=device-width,initial-scale=1″>

box-sizing

これも準備のうち。paddingとborderがwidthに収まる。レイアウト崩れ防止に使用。

css

/* 全体に適用するとレイアウトを管理しやすいらしい */
*{
    box-sizing:border-box;
}

max-width

これも準備。全体の画面幅の上限を指定しよう。もし2000pxとかになったら、要素も広がって見づらくなるので。

ついでに全体のwidthは100%にするといい。pxで固定するとスマホで見づらくなっちまうからね。

css：例

.container{
    max-width:1170px;
    width:100%;
}

mediaクエリ

こいつでブレイクポイント(タブレットやスマホの幅に合わせてCSSを切り替えるポイント)を指定する。

css

/* 〇〇px以下の場合～という意味 */
@media(max-width:1000px){...}

テクニックやお作法

レスポンシブ用にcssファイルを分けるといい。読み込みタグはviewportよりも下に記述しな
コンテンツが並ぶ場合、widthを%で記述すると段組み表示されるよ。100%で１段、50%で２段って具合さ
heightが固定されてるせいで段組み時にコンテンツがはみ出す場合。それはコンテンツがfloatで浮いちまってるからさ。コンテンツ終わり直後に空タグを作って、clear:left;でfloatを消してやれば解決だよ

css

.clear{clear:left;}

要素の表示/非表示

画面幅によって要素を表示したり消したりするよ。

css

display:none;
display:block;

Flexbox

コンテンツの並び向きや、折り返しの有無を指定できる。mediaクエリを併せて使えば、もう立派なレスポンシブデザイン。

css

/* 子要素を横並びにする(親要素で指定) */
display:flex;

/* 幅を親要素に合わせて伸縮させる(子要素で指定) */
flex:auto;

/* 子要素のサイズに応じて折り返す(親要素で指定) */
flex-wrap:wrap;
/* 列数に応じたwidthを指定 */

/* 子要素を上から下に並べる(親要素で指定) */
flex-direction:column;
/* 併せて、ブロック要素を中央合わせに */
margin:0 auto;
/* 必要であればwidthで%指定 */

まとめ

個人開発の際、ここに記したことがきっと役に立つことでしょう。

今後も継続して学習を続けていきたいと思います。

Progate