スタイルシートのflexboxが効かない時に私がやってしまっていた凡ミス | 在宅ネットでコツコツお金を稼ぐ

無料ブログや WordPress を使っていると、普段はあまり意識することがありませんが、 時々、何が変わったことをしようとすると、スタイルシートをいじらないといけないといけなくなる場合があります。

また、 WordPress などを使わずに自分で html ファイルを作る場合なども、 スタイルシートを記述しなければなりません。

このサイトでは、自分でスタイルシートを記述しているのですが、 私はスタイルシートがどうも苦手で、いつも苦労してしまいます。

php を記述するのは比較的好きなのですが、 デザインなどを担当するスタイルシートがあまり理解できていないのかもしれません。

スタイルシートでflexboxを試してみる

先日、スタイルシートで flexbox と言われるものを使う機会がありました、 この flexbox は、要素の配置に関する記述で、横並びにしてみたり、左右に振ったり上下に振ったりということが 簡単にできるというものです。

だいぶ前はフロートと呼ばれるもので、このような配置をしていたのですが、 最近はこの flexbox を使うのが主流になっているようです。

私も、この flexbox を使わなくてはならなくなり、書いてみることに。 完成のイメージは、以下のような感じです。

flexbox-leftとflexbox-rightとして、左と右で横並びにして、配置したいというものです。これを目指して、自分で書いてみたものの、 flexbox がちゃんと動いてくれません。全然、flexbox が効かないという状態になりました。

記述の面では間違いないはずなのですが、全く効かなくて、2時間ほどハマってしまいました。

誤ったスタイルシートの記述は以下の通りでした。


.header{
  margin: 0px auto;
}

.body_style{
  padding: 10px;
  border: 1px solid #cccccc;
  margin: 30px auto;
  width: 900px;
}

.google-adsense{
  font-size: 100%;
  text-align: center;
}

.flex-container{
  display: flex;
  justify-content: center;
}

.flex-item{
  border: 1px solid #cccccc;
  width: 300px;
}


サンプルページの記述は本番のページとは違うので、一例なのですが、 これで、動かなかったので、悩んでいました。

そこで、ひとつずつ、上の要素にdisplay:flexを当ててみると、ちゃんと反応しました。 それで気づいたのですが、正しい記述は、以下のとおりでした。


.header{
  margin: 0px auto;
}

.body_style{
  padding: 10px;
  border: 1px solid #cccccc;
  margin: 30px auto;
  width: 900px;
}

.flex-container{
  display: flex;
  justify-content: center;
}

.flex-item{
  border: 1px solid #cccccc;
  width: 300px;
}

.google-adsense{
  font-size: 100%;
  text-align: center;
}


赤字の部分の順番を変えたら動くようになりました。 ちゃんと動くようになったサンプルページは以下のページです。

スタイルシートflexboxのサンプル

要素の順番の記述が上から順番になっていなかったのが、原因だったようです。 今回はflexboxのために、新しくサンプルページを書いてみたので、 テストしてみたところ、順番が入れ替わっていても、動くようです。

ですが、作成中の私の本番のページでテストしたところ、要素の記述が違うこともあるのか、 順番通りに記述しないと動かないみたいです。

この辺がスタイルシートの難しいところだと思いました。 他の要素との兼ね合いなのでしょうか、私の作成しているページの場合、順番に記述しないと、 flexboxがちゃんと効いてくれませんでした。

スタイルシートに詳しい方なら、すぐに分かるのかもしれませんが、 flexbox を設定したdivタグの順番を直すだけで、無事表示されることになりました。

時々、凡ミスをしてしまう

考えてみると、ものすごく凡ミスなのですが、 私は スタイルシートだけではなくて、php でも時々このような凡ミスをして、ハマってしまうことがあります。 自分でやると大変な面もありますね。

その点、 WordPress などの、ブログ作成を助けてくれるツールというのは、 とても素晴らしいものだと思っています。 これらのツールを使わずに自分でサイトを作ろうとすると、 html の知識やスタイルシートの知識、 php も使いたい場合は php の知識なども知っておかなくてはならないので、 覚えることがが一気に増えてしまいます。

もちろん細かなところも自分の自由にできるので、 その辺りの満足度も高いのですが、作業する時間も、ものすごく増えてしまいます。

アフィリエイトサイトに必要なコンテンツ作りに時間を回せなくなるというデメリットもあります。

その辺りを考えながら、ブログ作成ツールや、 自分で記述することを使い分けてサイトを運営しかなくてはと思っています。

(2017/10/26)

トップページ

その他のコラム

コンテンツ

トップページ