私の会社では、HTMLやCSSまわりはデザイナーやコーダー、マークアップエンジニア、フロントエンドエンジニアが作るのですが、 たまに工数の関係でバックエンドエンジニアやサーバーサイドエンジニアに直接HTML/CSS側を修正してもらうことがあります。 今回は、その方々向けによく質問に上がるようなレイアウトの基礎部分を教えるために展開した資料を再度まとめました。 ※HTML/CSSのソースが書いてある部分は、codepenなどで実際にソースを表示しながら説明したので 同じように確認してもらえると分かりやすいとおもいます。 ながれ HTMLのブロック要素とインライン要素 positionプロパティ 横並びのCSS 中央寄せのCSS(テキスト) 中央寄せのCSS(ブロック) まとめ HTMLのブロック要素とインライン要素 CSSの前に、少しだけHTMLについて説明をしたいと思います。 HTMLには
![エンジニア向け!CSSレイアウト講座&用途別に選べる横並び・中央寄せのまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/84674d1c5b60ae11f1f69ebe6f96a4af37f60afe/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgyJUI4JUUzJTgzJThCJUUzJTgyJUEyJUU1JTkwJTkxJUUzJTgxJTkxJUVGJUJDJTgxQ1NTJUUzJTgzJUFDJUUzJTgyJUE0JUUzJTgyJUEyJUUzJTgyJUE2JUUzJTgzJTg4JUU4JUFDJTlCJUU1JUJBJUE3JUVGJUJDJTg2JUU3JTk0JUE4JUU5JTgwJTk0JUU1JTg4JUE1JUUzJTgxJUFCJUU5JTgxJUI4JUUzJTgxJUI5JUUzJTgyJThCJUU2JUE4JUFBJUU0JUI4JUE2JUUzJTgxJUIzJUUzJTgzJUJCJUU0JUI4JUFEJUU1JUE0JUFFJUU1JUFGJTg0JUUzJTgxJTlCJUUzJTgxJUFFJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iMDM0YzA0M2M5MGY4MjIxZmEwZmUwODBmZDBiYWM0NQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbmV6dXJpa2EmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTljYTZlZTJlZTliOTU3MmQ1N2ZmYTQ3YTZkM2Q2YzVj%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9565a920cf5599969483cced39ed250e)