カテゴリー
プログラミング

【演習】テキストを画像に回り込ませるには?floatとclearfix。

テキストを画像に回り込みさせよう

今回は「インタビュー記事」を題材に「テキストを画像に回り込みさせる」を学習します。

記事内のサンプルコードをコピーしても良し、コピーしつつ自分なりに中身を変えても良し、全て手打ちでやってみるのもOKです。

お手持ちのテキストエディタで、HTMLとCSSを組んでみましょう。

完成イメージは下の画像の通りです。

<今回の演習の完成イメージ>

今回の演習の完成イメージ写真

上の画像を解説すると、

①最初に「エンジニアになったきっかけは?」という見出しがある

②そのあとにインタビューが改行や文字間も読みやすく組まれている。

③写真は右に寄せてある。

④写真の周りをテキストが適切な距離を空けて回り込んでいる。

⑤背景は明るい緑色にしている。(練習なので視認性の高い色にしています)

以上、いわゆる「雑誌のようなレイアウト」ですね。これを再現してみましょう。

写真は右側に。テキストは回り込ませる。

デスクの上のタブレット

まず大前提として「HTMLでマークアップされた要素」というのは基本的に「縦」に積み重なっていきます。

しかし、単に文字や写真のコンテンツが縦においてあるだけのWEBサイトは味気なく、また読みにくいですよね。

そこで今回は先ほどの完成イメージのように「画像を右に寄せて」「テキストを写真の周りに回りこませる」処理を行い、読みやすいWEBページを作ります。

用意するもの

①テキストエディタ

②ブラウザ(クロームなど)

③写真
以下のロイヤリティーフリーの写真をお使いください。画像の名称は「jane-01.jpg今回のインタビューはこちらの女性を「エンジニアで活躍するジェーンさん」として、インタビューしたという設定です。

では、お手持ちのテキストエディタを立ち上げておいていただき、さっそくHTMLのコードから見ていきましょう。

今回はマイクロソフト社の無料テキストエディタ『Visual Studio Code(VSCode)』を使用します。

【演習開始】HTMLのコードのサンプル

まずは下記のコードをご覧ください。

これをお手持ちのテキストエディタにコピーしましょう。コピーは枠右上の小さなボタンをクリックするだけで可能です。

<!DOCTYPE html>
  <html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="sample.css">
   </head>
<section>
     <h1>エンジニアになったきっかけは?</h1>
    <img src="images/jane-01.jpg" alt="ジェーンさんの笑顔">
    <p>「私がエンジニアになるきっかけは、インスタグラムです。世界中の人々が愛用するこんな素敵なアプリってどうやって作られているんだろう?という興味から始まりました。<br>


プログラミングを勉強する前は全く異なる業界で仕事をしていたのですが、モノづくりには小さい頃から興味があったんですね。ですので、エンジニアになるという決断は結構早かったと思います。<br>


そして、まずは独学で勉強しようと思ったのですが挫折しかけたので、基礎専門に教えてくれる『キソプロ』で習い始めたのが本当のスタートになります。かれこれ4年くらい前になりますかね。<br>


現在の会社ではエンジニアリングもやりつつ、WEBのディレクションや複数のプロジェクトのマネージメントもやらせてもらっています」</p>
</section>
</html>

CSSのコードのサンプル①

続いて「CSSのコードサンプル①」として、まずは回り込みの処置の前に「余白」や「行の高さ(行高)」といった、ベースとなるスタイルを記述してみましょう。

section{
     width: 600px;
     margin: 0 auto;
     padding: 2em;
     background-color: #98fb98;
}
h1{
     margin: 0 0 1em;
}
img{
     width: 320px;
     margin-left:1em;
     margin-bottom: 1em;
}
p{
     line-height: 1.8;
}

<上記コードの解説>

①「margin: 0 auto;
左右のマージンを「auto」にすると「section」が中央配置になります。

②「background-color: #98fb98;
背景色です。今回はWEBのカラーコードの中から「#98fb98;」(palegreen)を指定

③h1の「margin: 0 0 1em;
見出しには1文字くらいの下マージンを付けるとちょうどよいバランスになります。

④h1の「margin: 0 0 1em;
見出しには1文字くらいの下マージンを付けるとちょうどよいバランスになります。

⑤imgの「margin-left:1em;
margin-bottom: 1em;

画像に回り込むテキストが画像にくっつかないよう左と右のマージン。

⑥最下部pタグの「line-height: 1.8;
行の高さの指定です。1にすると行間がなくなってしまうため、今回は1.8でセットしています。

<現時点でのブラウザの表示>

現時点でのブラウザでの状態

現時点のコードで上記のようになっています。まだ、テキストが写真の周りを回り込んでいないですね。

では、次のCSSコードで「回り込み設定」を記述しましょう。

floatとclearfix(CSSのコードのサンプル②)

右(または左)に寄せたい要素に「float:right/left」を指定します。その記述だけでとりあえず見た目だけはすでに変化します。

先ほど記述したCSSのコードに、こちらのコードを追記しましょう。下のfloat記述は「right」つまり「右寄せ」を指定しています。

img{
    float: right;
}

しかし、この追記だけでは完璧ではありません。この状態だけだと、もしテキスト原稿が短い場合、背景から写真が飛び出てしまうなど支障が出てきます。floatの指定により<img>タグが親要素に認識されなくなるからです。

そこで「clearfix」という「回り込み解除」の設定コードをさらに追記します。

}
section::after{
    content: "";
    display: block;
    clear: both;
}

上記の「clearfix」構文は定型文なので、暗記する必要はありません。

ここまで出来れば完成です。

完成品はこちら

ブラウザで確認すると、以下のようになっているはずです。

<完成品>

今回の演習の完成イメージ写真

これで完成です。

h1の見出しやインタビュー記事の適切な行高や改行、回り込み、写真周りの余白、背景色など全て反映することができました。

おつかれさまでした。

WEBサイト制作の基礎は奥が深い

HTML/CSSを勉強する駆け出しエンジニア

今回行ったテキストの回り込みは、私たちが普段頻繁に目にするWEBサイトの”デザイン”のひとつですね。

スマートフォンでの閲覧ですとほとんどは縦並びになってしまいますが、パソコンや一部のタブレットですと、まるで雑誌のようなダイナミックな構成にすることが可能です。

これらも実は今回のような基礎的な技術と理解があってこそ。奥の深いマークアップの世界=プログラミングの基礎をしっかりと理解し固めていきましょう。そこができれば、そこそこしっかりしたWEBサイトや、WordPressのアレンジなんかも怖くなくなってきます。

プログラミングの基礎を固める大切さ

画像とテキストを調整しているエンジニア

当サイト「キソプロ」は、プログラミングの基礎を専門的に学ぶオンライン授業のサービス。マンツーマンで受講することができるので、個人指導を受けることが可能です。

今回のような記事に沿ってコードを写したり書いたりしてみても、何らかもミスで反映されなかったり、自分では完璧にやっているつもりでもうまくいかないことがあります。

原因不明のミスを探るのに何日も費やすのではなく、講師の個人指導のもと効率的に勉強することで、時間のロスやモチベーションの低下を防ぐことが可能です。

ITになんとなく苦手意識のある方や、異業種からの挑戦の方、文系だからとプログラミングを躊躇している方。しかしITの時代にちょっとやっておいたほうがいいと思う方。とはいえ大げさなプログラミングスクールに入学するのもちょっと気が引ける方。

プログラミング基礎をまずしっかりと理解できる「キソプロ」で新しい勉強を始めましょう。

「キソプロ」は”長持ちするスキル”を伝授いたします。