福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【flexレイアウト】 左右のレイアウトで文字を要素の下に落としたい時はこれ

SUGOYOKU BLOG

【flexレイアウト】 左右のレイアウトで文字を要素の下に落としたい時はこれ

福岡のホームページ制作会社のスゴヨクです。 今回は小ネタシリーズになります。 スマホ、パソコン共に左右にするレイアウトって多いんじゃないか思います。 左右とはこのような感じです。 flex レイアウト 左右 そこで文字だけを要素の下につけたい時はfloatと同じ要領で relativeとabsoluteだけで下に落としていきます。 HTML

scss まずはflexの場合だとこうなります。 flex レイアウト 左右 それからpositionを設定していきます。 scss 設定するとこのようになります。 flex レイアウト 左右 なぜ「Bottom-Txt」を囲ってpositionを設定するのかというと ワードプレスのカテゴリーやタグを配置するときに <p>タグや<span>タグで設定をすることかと思います。 同じように<p>タグや<span>タグにabsoluteを設定すると文字が被ってしまい、 後々面倒なことになってしまいます。   floatの時と一緒で下に下げたい時はこの方法が一番簡単ですね。

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金を使ってホームページを制作しませんか?

スゴヨクでは、小規模事業者持続化補助金を使ったホームページ制作を行っています。
助成額が3分の2、最大50万円まで補助されるので、(要件次第で100万円も可能)
ホームページ制作、広告をお考えの方は一度ご連絡ください。
申請は無料なので、まずはご連絡いただけると幸いです。



補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得