【違いは何??】HPとLPの違いについてのまとめ!③まとめ

こんにちは、Itoop(アイティープ)の広報担当の黒澤です!

だんだん涼しくなってきましたね。秋は過ごしやすい気候で個人的に好きです。

さて、これまで、HPとLPの役割や特徴をまとめてきました。

【違いは何??】HPとLPの違いについてのまとめ!①HPとは?
【違いは何??】HPとLPの違いについてのまとめ!②LPとは?

今回は、これまで述べてきたHP、LPの違い、それぞれのメリット・デメリットについてをまとめました。

HPとLPの目的の違い


HPの目的はとても広く、企業の説明や広報、ブランディングなど多岐にわたります。
LPの目的は、ユーザー・顧客の契約や購入、問い合わせといった具体的な行動に着地することを目的としています。

HPとLPの特徴の違い


HPは、複数のページやメニュー、リンクで構成されています。
対してLPは、基本的に1ぺージ構成となっており、コンバージョン獲得に効果的な情報のみが掲載されています。

HPとLPそれぞれのメリット


HPは、幅広い情報を発信することができるため、汎用性が高く新しい情報を継続的に掲載していくことができます。
これにより、中長期的に運用していくとコンテンツが充実していき、検索エンジン上位に表示されやすくなり、継続的に集客していくことが出来ます。

LPは、ページに訪れたユーザーが知りたい情報が1ページにまとめられており、他のページへのリンクなども少ないことから離脱率を減少させることが出来ます。
また、ユーザーや顧客が具体的な行動に着地しやすいよう導線を敷くことが出来ます。

HPとLPそれぞれの注意点

HPの運用には、ノウハウが必要になります。
外注することもできますがやはりコストがかかりますし、内部に担当者を設けたほうが運用しやすく、情報更新も業者を挟まないためスムーズに進めることができます。

LPは、ユーザーや顧客の行動着地を目的としたページなので、対象の人が実際の行動に繋がりやすいよう導線を引く構成にする必要があります。その上で、画像やレイアウトなどのデザイン性を高めて作成していたりするので、製作コストがかかってしまうことが挙げられます。

まとめ

以上の様に、HPとLPの目的、それぞれのメリット・デメリットについて理解していただけたのではないでしょうか?
「どういった結果を作りたいか」その目的によってどちらをどう運用するか、誰に対してどういった情報を掲載していくかが決まってきます。
それらを理解した上で、適切、かつ、効果的に運用することが出来れば、基本的にデメリットは気にならないと私は思っています。
この記事が、皆さまのホームページ運用の一助となれば幸いです。

それでは本日も良い一日をお過ごしください。

【HP作成】Webデザインの基礎!【レイアウト編】

こんにちは。Itoop(アイティープ)の佐藤です。

9月に入りましたがまだまだ暑い日が続きますね!僕はWebデザインの基礎を学ぶために「いちばんよくわかるWebデザインの基本きちんと入門」という本を読みました。

URL:https://www.sbcr.jp/product/4797389654/

現在WordPressについての記事を書いていますが、Webデザインの基礎についても勉強することが大事だなと感じることがたくさんありました。

今回はWebデザインの基礎である「レイアウト」について書いていきます!

※WordPressの記事についてはこちら:「【 WordPressとは? 超超超入門編 <第1弾>】IT業界3ヶ月目のエンジニアがWordPressについて調べてみた!

レイアウトとは

「レイアウト」とは、デザイン・編集・設計などにおいて「何を、どこに、どのように配置するか」ということを意味します。

大事なのは、いずれも感覚で文字や画像を配置するのではないということです。

関連するものを近くに配置したり、同じフォントや色を使用したり、特に重要な項目を差別化したり、ポイントをしっかり意識することで、見やすく美しいレイアウトを作ることに繋がります!

なぜ見やすいレイアウトを作る必要があるのか

見やすいレイアウトを作る理由は、ユーザーが欲しい情報を的確に伝えること。

サイトに訪れたユーザーに必要な情報を正しく伝えるためにも、的確なレイアウトを作ることはとても重要です。

上手にレイアウトすることで、サイトの信頼度が上がったり、ユーザーの心を動かして成約にいたったり、それぞれの目的に繋げることができます。

レイアウトの具体例

・よく見かけるWebサイトのレイアウト

ページ上部にヘッダーがありその下にメインコンテンツとサイドコンテンツ、そして最後にフッターがくる構成になっているそうです。※以下画像参照

ヘッダーにはサイト自身を象徴するロゴやナビゲーション、検索フォームなど。

メイン部分には文字通りサイトのメインとなるコンテンツ。そしてサイドにはメインコンテンツの補足。

フッターにはお知らせやコピーライト、アクセスマップ。

というのがよく見かけるWebサイトのレイアウトになります。

これは視線の動き(動線)を考慮した作りになっているからです。

たとえば、動線を考慮せずにサイドコンテンツがヘッダーの場所に配置されているようなレイアウトだとしたら、いきなりお知らせや関連情報などの表示を見ることにとなります。

お知らせやメインコンテンツの関連情報を最初に見ても、「何のサイトだろう?」と見る側を混乱させてしまう可能性があります。

だからこそ、初めてサイトに訪れたユーザーにもわかりやすいように、どう行動してどういう体験をしてもらうかを意識してレイアウトを作る必要があるんですね。

おわりに

「デザイン」と聞くとセンスが必要に思えたり、難しく見えるかもしれません。

しかし、ポイントを押さえてレイアウトするだけで誰でも良いWebサイトを作ることができます。

引き続きレイアウトについての記事を書いていきますので、Webデザインについて触れ始めた方々の参考になれば幸いです。

それでは本日も良い一日をお過ごしください。

【 WordPressとは? 超超超入門編 <第3弾>】IT業界3ヶ月目のエンジニアがWordPressのテーマを使ってみた!

はじめに

こんにちは、Itoop(アイティープ)技術担当の佐藤です!

以前投稿した、

【 WordPressとは? 超超超入門編 <第2弾>】IT業界3ヶ月目のエンジニアがWordpressインストールまでにやることを解説!

に続く、第3弾の記事を書いていきます!

第2弾では、WordPressをインストールする前に、「サーバー契約」と「ドメイン取得/発行」をする必要があると書きました!

第3弾では、WordPressをインストールした後の、「まずやること」について書いていきます!ひとつ目は、「テーマをダウンロード」です!

「テーマ」とは!

パソコンにあるフォルダをイメージしてください。

そのフォルダの中に、たくさんのファイルがあります(例:page.php、single.php、画像ファイルその他たくさん)。

フォルダの中にあるpage.php、single.php等の一部のデザインを担当しているファイルが「テンプレート」です。

このフォルダとその中のファイルを含めたもの一式を、テーマといいます。

引用:https://wp-customize.net/wordpress/7924.html

テーマには有料版と無料版がある!どっちがいいの!?

テーマには、有料版と無料版があります。

有料版を選択すれば、デザインのクオリティやSEO対策は、ある程度保証されます。

ですが、だからといって無料版のテーマを使わない方が良いかというと、そんなことはありません!

無料版のデザインは、有料版ほどではないですが一から作り込む手間を考えれば、十分なクオリティを持ち合わせていると思います!

SEO対策に関しては、プラグインを追加することでセキュリティ面を強化することが出来ます。

プラグインについては、次回の記事でご紹介しますね!

テーマをつかってページ作成にチャレンジ!

ここからホームページを実際に作り始めていきます!

詳しい編集手順はこちらを参考にどうぞ!

参考:https://bazubu.com/wordpress-fixedpage-24169.html

おわりに

今回テーマについて学びました!

作り始めてから、本当にプログラミング言語の知識がなくてもページが作られることに驚きました!書きたいことをそのままタイピングしたり、画像を挿入したりするだけでした!

テーマの中に組み込まれている機能が僕の知識・技術力をカバーしてくれているようです。

徐々にWordPressの使い方が分かってきました。

できることが増えていくと、より業務への意欲が湧いてきますね!

今回はWordPressをインストール後にやること「テーマのダウンロード」について書きましたが、次回はそれに続く「プラグインのインストール」について書きたいと思います!

それでは皆さん、今日も良い一日をお過ごしください。

【簡単!SEO対策の初歩!】SEO対策とは何か、基本とメリットをまとめます!

こんにちは、Itoop(アイティープ)の橋本です。

突然ですが!みなさま、SEO対策はしていますでしょうか。

今回は、HP作成の後のSEO対策についてまとめました!

まずおさえておきたいSEO対策の初歩!ということで、SEO対策とは、という部分とメリットについて書きます。

実は、HPを作成しただけではSEO対策は不十分です!

しっかりメリットを理解した上で、設定を行いましょう!

SEO対策とは

SEOとは、「Search Engine Optimization」の略称のことで、日本語訳すると「検索エンジン最適化」です。

簡単にいうと、「検索結果の上位に表示されるために行う施策」のことで、検索エンジンからの集客を増やしたい場合に非常に重要になります。

SEO対策のメリット

SEO対策のメリットは、主に2つあります。

①質の高い見込みユーザーを集客することができる

②検索順位が上がることでブランディング効果が大きい

しっかりSEO対策を行うことで、売上に繋げていくことが可能です。

WordPressでSEO対策を行う場合は、無料プラグインなども出ており、簡単に導入することも出来ます。

作成したサイトにSEO対策をしよう!

SEO対策の初歩の初歩について話してきましたが、いかがでしたでしょうか。

HP作成の際に大事なことだと思うので、HPにより多くの人がアクセスするように、SEO対策をばっちりしていきましょう!

それでは、本日も素敵な一日をお過ごしください。

【違いは何??】HPとLPの違いについてのまとめ!②LPとは?

こんにちは、Itoop(アイティープ)の広報担当の黒澤です!

暑い日が続いてましたが、最近は雨続きでじめじめしますよね…

こんな時は家にこもって映画三昧してしまいます。

さて、前回はHPとその役割についてまとめました。

https://itoop-blog.yuima-ru-tokyo.com/20210728-article/

今回はもう一方のLPについて整理しましょう。

LPとは?その役割は?

一般にLP(ランディングページ)とは、

「検索結果やウェブ広告などから最初にユーザーが訪問するウェブページ」を指します。

そういった意味では、ユーザーが最初に訪れたページは全てLPとなりますが、ウェブ広告においては、商品・サービスの購入や問い合わせに特化したウェブページのことを指します。

リスティング広告*1やディスプレイ広告*2などをクリックした先によく見られますね。

*1 ユーザーが検索エンジンで検索したキーワードを元に関連する情報を表示する広告のこと。

*2 画像や音声、動画、テキストなどで構成されたバナーを通して配信される広告のこと。

LPの目的

LPは、基本的には集客のために作成するため、主に商品やサービスの内容やメリットなどの情報を記載して、最終的にユーザー・顧客の行動(契約や購入)を促します。

LPの特徴

前述したようにLPの目的は、ユーザーや顧客の行動に着地することです。

そのため、セールス情報を1枚のチラシにまとめたような構成になっています。

情報量が多く、縦長のページになっていることが一般的で、

コンバージョンに関わるリンクやフォーム以外のリンクが排除されています。

これによりコンバージョンボタンにユーザーを集中でき、コンバージョン率の上昇に繋げることが出来ます。

おわりに

今回は、LPについての整理をしました。

前回のHPと違って、読み手の行動着地を狙うのがそもそもの目的です。

それぞれの用途を抑えることで効果的にサイト運用をしていくことができます。

次回は最終回で、HPとLPの違いについてまとめます。

それでは本日も良い一日をお過ごしください。

【再確認】インターネットの基礎!IPアドレス!

こんにちは。

Itoopの技術担当、橋本です。

意外と基礎知識って理解しないままでも仕事に影響しなかったりするので、不明確なままの方もいらっしゃるのではないでしょうか?

今回はそんな基礎知識、IPアドレスの話を書いていきます。

今回は概要について書きますので、IPアドレスについて再確認したい方やまだ理解できていないかも?といった方の目にとまれば幸いです。

IPアドレスとは?

まず、IPアドレスとは「Internet Protocol アドレス」のことです。

アドレス(=住所)の名前どおり、手紙を送るときの住所のように、やり取りする先を判断するために使います。

言葉を分割して考えると下のような意味になりますね。

 Internet:世界中のコンピュータなどの情報機器を接続するネットワーク

 Protocol:インターネットでやり取りするとき時の、決まりごとのようなもの

 アドレス:住所

つまりInternetProtocolで利用するアドレスということです。

このIPアドレスが割り振られているから、インターネットでメールを送ったり、動画を見ることができるわけですね。

この住所、実はバージョンの違いでv4とv6に分けられています。

なぜアドレスのバージョンがあるのか、次はバージョンの話をしていきます。

IPv4とIPv6はバージョンの差!

上でも書きましたが、IPアドレスはインターネットに接続するすべての機械に割り振る必要があります。

割り振れるIPアドレスの数は、IPv4の場合、2の32乗で「4,294,967,296」、つまり約43億個!とても多いですね。

しかし、実はIPv4は枯渇しています。

もともとは全世界の機械にIPアドレスを割り振っても余る想定でしたが、当時の想定よりPCなどの機械が普及していったため、新しいバージョンのIPv6が生まれました。

IPv6で割り振れるIPアドレスの数は2の128乗で「3.402823669209385e+38」、つまり約「340澗」!この単位は「かん」と読み、340兆を1兆倍したものをさらに1兆倍した値で、多すぎてイメージができないです…PCの電卓でおこなった計算結果を載せていますが、e+38は10の38乗という意味なので、38桁の数値になっています。

これで解決と言いたいですが、世界ではまだIPv4が利用されており、なぜなのかという理由を次に解説していきます。

現在も古いバージョンのIPv4が使われている?

新しいバージョンとして生まれたIPv6ですが、使われてはいるもののIPv4がまだまだ現役です。詳しい話は次回に回そうと思いますが、取り決めを作りIPv4のIPアドレスをローカルIPアドレスとグローバルIPアドレスという区分で分けることで、使える範囲は変わらないものの総量を増やすことが出来ています。

例)以下のように住所が3つあるとしましょう。

1.○○県○○町1丁目1番地1号

2.○○県○○町1丁目2番地3号

3.○○県××町1丁目1番地1号

○○県○○町までが他と同じだと、1.と3.の番地が同じなので住所が特定できなくなって困りますよね?

県名や町名が一意であることで、1.と3.のように番地が同じでも問題なく住所が特定できます。

県と町名のように一意であるものがグローバルIPアドレス、特定の範囲でしか使えないので問題ない番地のようなものがローカルIPアドレスという感覚で理解しています。

また、インターネットで使われているということは全世界での問題のため、IPv6は全世界で適用していく必要があります。

現在使われている機械をほぼすべて置き換えなければいけないこともあり、IPv4を廃止できるほど普及や対応は進んでおらず、併用しているのが現在の状況です。

他にも理由はあるのですが、興味のある方はぜひ調べてみてください。

改めて重要!基礎知識!

基礎知識は、仕事に使わなくても、理解していると次の知識に繋がるなと感じます。

PCの設定やネットワークの構成と紐づけていると、はじめは分からなかったIPアドレスの話も、分かりやすくなりました。

どうやって使うなどの話は次回以降に書きますので、お待ちいただけると幸いです。

【WordPressとは? 超超超入門編 <第2弾>】IT業界3ヶ月目のエンジニアがWordPressインストールまでにやることを解説!

こんにちは、Itoop(アイティープ)技術担当の佐藤です!

以前投稿した、

【 WordPressとは? 超超超入門編 <第1弾>】IT業界3ヶ月目のエンジニアがWordPressについて調べてみた!

に続く、第2弾の記事になります!

前回「WordPressとは何か」について学び、

WordPressを使えば、初心者でも簡単にホームページが作れるということを知りました!

早速インストールして始めようとしたところ、その前にやるべきことが2つありました!

サーバー契約

ドメイン取得/発行

それぞれ耳にしたことはありましたが、実際にやるとなると難しいイメージがありました。

先輩方の力をお借りして、順々に進めることができたので、詳しく書いていきます。

サーバーとは

サーバーとは、簡単にいうと、「サイトやメールなどの情報を保管・配信するもの」です。

自力でサーバーを運用する際には、以下のような知識が必要となります。

  • Webサーバーの知識
  • ハードウェア・ソフトウェアの知識
  • ドメインやIPアドレスに関する知識
  • セキュリティに関する知識

僕は、こんなにたくさん覚える必要があるのか!?と最初は戸惑いました。

流石に全てを一から学ぶと時間がかかるので、今回は「レンタルサーバー」を契約しました。

レンタルサーバーとは、「複雑なサーバー管理を業者に任せつつ、より高速かつ安定した環境でウェブサイトを公開するもの」とあります。

引用:まずはレンタルサーバーの契約が必要

https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php

レンタルサーバーを契約することで、豊富な知識がなくとも、簡単にサーバー契約ができます。

レンタルサーバーには、エックスサーバーなどの数種類のサーバーがあります。

今回は、以下の理由からエックスサーバーを採用しました。

  • 低価格
  • サーバーダウンしない安全性と通信速度
  • WordPressの導入が簡単

レンタルサーバー契約手順

参考:https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php

ドメイン取得/発行

サーバー契約が終わったら、次にドメインの取得/発行を行います。

ドメインとは、わかりやすくいうと「インターネット上の住所」です。

閲覧したいWebサイトの特定や、メール送信に必要です。

例)

URL→//www.xserver.ne.jp/

ドメイン→www.xserver.ne.jp

引用:ドメインの構造

https://www.xserver.ne.jp/blog/about-domain/?gclid=Cj0KCQjwub-HBhCyARIsAPctr7x5yU658OPdT7pNxm10feNp0LwYhF5PRRUraNVcKLAzQY7ke-9T9CkaAnhxEALw_wcB#%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A8%E3%81%AF

ドメインは無料でも発行可能なのですが、セキュリティ面や今後のサイト運用を考慮して、有料のものを使用することにしました。

有料のドメインは、1000円前後の費用がかかりますが、信頼性が高く、ホームページ作成であれば検索エンジンで上位に表示されやすいというメリットがあります。

ドメインは1日あれば取得可能で、特に難しさを感じることはありませんでした!

ドメイン取得手順

参考:独自ドメイン取得手順

https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php

これまでの工程を済ませ、ようやくWordPressをインストールしました!

こちらも手順を確認しながらやれば、簡単にインストールができました!

WordPressインストール手順

参考:https://www.xserver.ne.jp/manual/man_install_auto_word.php

今回はWordPressをインストールするまでに必要なことについて、紹介しました!

ホームページを作る際に、情報を保管する場所や、インターネット上に住所を作る必要があると学びました!

次回はWordPressインストール後の知識や学びを書いていこうと思います!

それでは皆さん、今日も良い一日をお過ごしください。

【違いは何??】HPとLPの違いについてのまとめ!①HPとは?

こんにちは、Itoop(アイティープ)の広報担当の黒澤です!

近年、企業や個人がWEBページを使って情報発信することは一般的になってきました!
Itoopでも、専用ページを作成し、日々情報発信をしております。

さて、WEBページにはHP(ホームページ)とLP(ランディングページ)がありますが、実際にどういう違いがあるかご存じですか?

今回は、HPとLPの違いや、それぞれの運用目的についてまとめてみました。
まずはHPから見てみましょう!

HPとは?その役割は?

企業や団体、個人などが最初に立ち上げるウェブページをHPといいます。
HPは、主に公式用のページとして幅広い情報を掲載します。

今回は、企業HPを例に、実際にどんな情報を載せるか目的別に整理しました。

役割①:企業の看板・集客

企業のHPには、概要や事業内容、社風、アクセス情報などを掲載します。
企業の基本的な情報を掲載することで、存在を外に広く示すことができ、信頼感を高めることができます。
また、中長期的に情報を発信し続けることで、ページの閲覧者やそこから流入する顧客を増やすことも可能です。

役割②:利害関係者(ステークホルダー)への情報共有

企業HP上で、IR情報や投資家・株主情報などの項目をみたことがあるでしょうか。
企業HPは、社外の株主や投資家など、企業のステークホルダーへの情報発信を担います。
具体的には、IR情報の他に企業の役員情報、資本金や従業員数などです。
ステークホルダーとの信頼関係を構築していく上で、企業情報を最新に保ち、かつ早い更新をすることが大切です。

役割③:広報活動

「広報活動」も、HPの重要な役割です。
対象は、株主や投資家、顧客、関連企業、就業志望者、社員など多岐にわたります。
各対象に向けた情報を掲載することで、企業のイメージを適切に伝えることができます。
顧客獲得や良い人材を得るために効果的に活用することが可能です。

終わりに

今回は、企業HPを例にHPの役割についてまとめました!
公的な情報掲載を主とするため、投資家や取引関係者、就業希望者など色々な立場の人に向けた情報をまとめて掲載することが重要です。
上記の役割を意識して情報発信することで、企業活動を適切に伝えることができるので、私達も日々取り組んでいきます!次回はLPについて整理していきます。

それでは良い一日をお過ごしください!

初めてのホームページ作成のやり方と、簡単かつ大事な3つのポイント

はじめに

こんにちは!

Itoop(アイティープ)技術担当の佐藤です!

世の中には様々な企業があり、多種多様なホームページがありますよね!

中には、「こんなホームページを作ってみたい」と思うサイトもあるのではないでしょうか。

ただ、初めてホームページを作成する場合、どこから手を付ければいいのか分からない方もいると思います。

今回、新卒・IT未経験の僕が、ホームページを初めて作成したときのことを振り返り、作成過程をまとめてみました。

ゴールを明確にする

まずは、どんなサイトを作るのかを明確にしました。

何かを作成する際は、最初にゴールを明確にすることが重要だからです。

そうすることによって、実現するために必要な知識やスキルが分かってきます。

ゴールを決める際のおすすめは、見本となるサイトを見つけることです。

自分が「面白いな!」と思えるサイトを選ぶと、作成するモチベーションも上がり、仕事が一層楽しくなると思います!

WordPressでホームページ作成

そうしてゴールが明確になったら、次は実際にホームページ作成に取り掛かりました。

使用したソフトは「Wordpress」です。

WordPressは、ホームページ作成経験がない方でも、使いやすいソフトだと思います。

コードを打ち込まなくても感覚的に作成が可能なうえ、

「今作成した部分ってどんなコードが使われているんだろう?」

という時には、コードを見ることができます。

そうしてコードを学びながら、ホームページを作成しました。

「まず、言語の勉強とか必要じゃない?」と思う方もいるかもしれません。

僕も、元々は基礎知識をしっかり身に着け、準備が整ったら実践をするタイプでした。

しかし、実践しながら学ぶ方が何倍も早く技術が磨かれるし、何より楽しいです。

3つのポイント

ここまで、ホームページ作成の具体的な流れをお伝えしました。

次に、初めてホームページを作成するときの、3つのポイントをご紹介します。

1.成果物のイメージを明確にすること

最初にゴールを明確にすることで、具体的に必要な作業が分かってきます。

特に初めて作る場合は、作成するサイトのイメージが中々湧かないので、見本サイトを見つけるのはおすすめです。

2.教えてくれる人がいること

作成しているうちに、疑問点がたくさん出てきます。その疑問を解消する早さが、仕事の早さに直結すると言っても過言ではないです!

疑問解消してくれる人の存在がいることで、仕事の早さが2倍も3倍も変わります。

3.実践を通して学ぶこと

勉強して事前準備をバッチリしてから作成するのも良いですが、個人的には実践しながら学ぶことをおすすめします。

手を動かしながら疑問解消することで実践的な技術も磨かれますし、自分のスキルアップが目に見えるので、仕事が楽しくなります。

おわりに

今日は、初めてホームページ作成する方へ向けて、やり方とポイントをお伝えしました!

この記事を読んで、実践を通してスキルアップした!仕事が楽しくなった!という方がいますと幸いです。

それでは皆さん、今日も良い一日をお過ごしください。

【初心者必見!】左右寄せ!レスポンシブ対応を見据えた構成!

こんにちは!

Itoop(アイティープ)の技術担当、佐藤です!

だんだん夏らしくなり、スーパーではスイカや夏野菜が目に入るようになってきましたね!

暑くなってきたからこそ、旬のものでエネルギーを補給したいです!

ところで、今回はWEBページ改修依頼の対応中にコンテンツの左寄せがうまくいかない事象を解決したので、理解の整理もかねて紹介させてもらいます!

初めて対応した、コンテンツの左寄せ!

今回は、WEBページの要素について左寄せというのを対応しました。

調べたところ、真っ先に目についたのが「float(フロート)」!

「float」は左右に要素を寄せるときに使う設定で、left、rightと指定することで左右に寄せることができます。

floatを利用することで左寄せが完了しました!

しかし、このあと対応を続けていくなかで想定外の問題が発生しました。。

問題発生!要素が重なってしまう!

左寄せは「float:left」で実現しました!

しかし、レスポンシブ対応といって、画面の幅が違うデバイスに対応させようとしたとき、不思議な挙動をするようになりました。

対象の画像と別の画像が重なって見えるようになってしまったのです!

別の画像は重ならずに左右に分かれたままだったり、左右に合った要素の段が変わったりしていたので、素直に「なんでこんなことに?」と驚きました!

悩んでも分からない僕は、先輩に相談しました!

どうやら左寄せを実現するために利用した「float」の仕様が問題でした!

『display:inline-block』で解決!

先輩の言葉をもとに調べたところ、左寄せを実現するために複数のやり方を発見しました!

例を挙げると、「float」「inline」「inline-block」・・・

それぞれ役割が違いました!

原因としては、今回利用した「float」の仕様でした。ほかの要素に「float」の設定がないと干渉しないという動きをします。

ほかの要素との間隔を直接数値で指定していたのもあって、画面の幅が変わると画像と画像が重なるような動きになっていました!

今回の対応に限れば「display:inline-block」という設定を「float:left」の代わりに利用するのが最適でした!

ほかの画像と重なることもなく、そのあとに加えた設定とも競合しませんでした!

参考:https://saruwakakun.com/html-css/basic/display

おわりに

今回、自分の能力を超えた挑戦だったので、先輩に助けていただいて本当にありがたかったです!

「左寄せ」ひとつにしても、複数の対応方法があり、自分の考えに固執していたことに気づけました!

人に聞くことで、視点を増やせることと、CSSの操作の理解が深まりました!

この記事が自分のような駆け出しのエンジニアの力や、問題解決のきっかけになったらとても嬉しいです!

今日も良い一日をお過ごしください。