2019年4月11日あれー、float:left;って指定しているのに全然効かないよ...?と、少しはまってしまった。試したけどなかなか正解に辿り着けなかったので、対処を載せておきます。floatに限らず、CSSで指定した効果がうまく反映されない!どうやって解決すればよいかわからない!という方に、参考にしていただけるかと思います。目次floatプロパティの意味と使い方floatの意味floatの使い方フッターを3カラムにしたかったがfoatが効かないまずは私が作成したソース確認したこと何がいけなかったのかfloatプロパティの意味と使い方まずは、floatの意味と使い方について説明します。floatの意味floatは、浮かぶ、という意味があります。コーヒーフロート、コーラフロートのフロートと同じ意味ですね。CSSでは、「要素を浮かせて、横並びにする」ことができます。HTMLを普通に書くと、要素は縦に並びます。floatを使うと横に配置することができるので、レイアウトの幅が広がります。floatの使い方floatは、float:値の形式で記述できます。float:left(左寄せで横並びにします)float:right(右寄せで横並びにします)float:inherit(親要素のfloatを継承する)当ブログのサイドバーもfloatが使われています。float:rightなので右側に寄っていますね。floatの難しいところは、ただ横並びにするだけではなくて、「浮かせて」横並びにするところです。お絵描きする方だと、レイヤーの考え方がイメージ湧きやすいかと。2枚のレイヤーがあって、通常は下の層に要素が配置されるけど、floatを使うと、上の層に配置されるイメージです。こちらのサイトの図がわかりやすかったです。フッターを3カラムにしたかったがfoatが効かないこのブログのフッター(一番下のところ)を3カラム(タテ3列)に分割するために、floatを使った(正確には、他の方のブログにあるソースをコピペした)のですが、これがうまくいきませんでた。試して迷走した結果、解決することができました。私が作成したソースおかしかったプログラムです。原因がわかりやすいように抜粋しています!CSS(style.css)HTML(footer.php)早い人だと、これくらい余裕で気付くと思います。私は「コピペしてるしソース間違うとかないでしょ。」という考えで、見逃してしまった箇所があります。画面はこんな状態でした。思いっきり縦並びです。確認したことF12を押して出てくるデベロッパーツール。これで原因を探りました。問題になっている要素をつついて、その要素にかかっているCSSを確かめます。今回確認したけどだめだったのは以下のとおりです。普通ならこれを確認すれば解決できます。clearプロパティが直前にないか?(clearで横並びを解除できます)幅に問題はないか?(おさまりきらないと下にずれます)競合している別の記述がないか?(セレクタの書き方や、書いた順番よって無効になっている可能性がある)何がいけなかったのかデベロッパーツールでよく確認したところ、該当のフッター要素に、floatのCSSが全くかかっていませんでした。HTMLとCSSの記述をもう一度よく見なおしたときに、以下に気が付いたのです。ulと書いてあるidがfooterの要素内にasideが無い#はidを意味します。>は、子要素を意味し、スペースは子孫要素を意味します。id=”footer”の子要素asideの子孫要素ulに対して適用、という意味です。コピペする場所を間違えていたんです。footer要素内に配置しないといけなかったのに、footer-in要素内にいれてしまったんです。以下のソースで解決しました。思い込みはよくないですね。それと何も考えないコピペも。これから気を付けなくては。横並びになりました!私がソースをコピペさせていただいたのは、きにぶろぐ.comさんさんでした。stinger8のカスタマイズ方法がいろいろあり、参考にさせていただいています。丁寧な説明で、私が貼り方をミスったのは、ありえないレベルだったと思います。HTML執筆者:shiori関連記事もしもアフィリエイトのかんたんリンクをカスタマイズ!ボタン色やテキスト変更などもしもアフィリエイトのかんたんリンク、とても便利ですよね。商品検索して、選んで、スクリプトを記事に貼りつけるだけで、カエレバのようなボタン付きリンクが作成できます。他の人のブログをいろいろ見ていると、吹き出しを使って会話形式で進めていくスタイルに出会うことがあります。...簡単!ブログ記事にプログラムをプラグイン無しで埋め込む方法プログラミングの記事を書きたいな。できればプラグイン無しでできるといいんだけど。...PREV不純な動機でもいい、興味があるなら新しいことをやってみるべきNEXTメモリ増設でPC軽量化!私の重いノートPCが生まれ変わりましたプロフィール運営者:シオリ法学部卒→システムエンジニア(SE)としてSI企業に9年勤めてます。結婚後、共働きで仕事と家事に追われる毎日に疑問を持ち、ひとり働き方改革中。プログラミングとイラストとおいしいご飯とゲームが好きな超インドア派です。アイキャッチなどのイラストはスマホの無料アプリ使って自分で描いています。当ブログは、私が勉強したことや日々の暮らしの中で考えたことなどを発信する雑記ブログです。同じ壁にぶつかっている方のお役にちょっとでも立てればうれしいです。