マルチデバイス
ボックスの並び順の指定 floatの値によってコントロールすることができます float: left; <html> <head> <meta charset="UTF-8"> <title>float:left;</title> <style> #container { width: 50%; height: auto; } .box { height: 100px; text-align: center; line-height: 100px; } .wrapA>.box { width: 25%; float: </meta></head></html>…
ボックスを分割する 「%」指定をします 足して「100%」になるよう指定します <div id="container"> <div class="wrapA"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> </div> </div> .wrapA>.box { background: #ECF7FD; border: 4px solid #689DD1; width: 50%; float:left; box-sizing: borde…
段組とは 「段組」とは、テキストや画像を複数の段落に分けてレイアウトすること 日本語の場合、横に文字を文字を組んだ場合、適切な文字数は「40文字」と言われています 「40文字」を超えると視線を意図的にずらさないと読み続けることができない基準の文字…
レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと 技術的には Fluid Grid（フルードグリッド） Fluid Image（フルードイメージ） Media Queries（メディアクエリ）…
