HTML/CSSってナニ!? -15-

こんにちは!
ここではお問い合わせの多いカリキュラム内容について、数回に分けて就労移行支援事業所リネオス福岡天神で学べることなどを紹介していきたいと思います。
前回の第14回の余白を使ってレイアウトを整えるついてはこちらからどうぞ。

今回は”要素を横並びにする方法”について書きたいと思います。

横に並べるとどうなる?

HTMLで画像とテキストをまず表示させてみましょう。

すると、このように画像とテキストが縦に並んだ状態でブラウザに表示されます。
これはdivタグやpタグが持っている自動で改行する特性が働き縦に並んでしまうためです。ブロックレベル要素と呼ばれる特性を持つタグを使用するとこのようになります。

見やすさの点では問題ないのですが、このサンプルでは要素が左側にあり、右側の空白部分が目立ってしまい寂しくみえます。

こんな風に画像の横にテキストを並べてみたり、

画像とテキストのグループを横並びにしたりすると、画面の空白が目立たなくなりデザイン性が高まりますね。

こんな風に、別々の要素を横並びにさせたいときに役立つのが装飾を担当するCSSになります。
横に並べることが出来るプロパティはいくつかあるので、次回また紹介できればと思います。


リネオス福岡天神では実際にwebサイトを作成する課題など、基礎の書き方から学べるカリキュラムを準備しています。

お問い合わせでも「初心者ですが利用してもいいのでしょうか?」「経験者でないと難しいですか?」などのお問い合わせもたくさんいただきます。経験の有無は必要ありません。

初心者でも未経験者でも、どなたでも見学や体験が可能です。
興味があればお問い合わせフォームやお電話などからお気軽にお問い合わせください。