ホームページを作成する中でも、私はスタイルシートの記述が一番苦手なのですが、 自分で自由にレイアウトできたら嬉しいものですね。
今回は、スタイルシートのflexboxでレイアウトをするテストをしてみました。
目標としては、左にサイトバーがあって、本文を表示する広いスペースがあるというものにしたいです。 ブログでおなじみのレイアウトですよね。
以前は、floatを使って、このように横並びのレイアウトをしていましたが、 flexboxを使ってみました。
もちろん、私はスタイルシートに詳しいわけではないので、 実戦投入する際はもう少し、手直しが必要だと思いますが、 もっともシンプルなレイアウトのテストということで、試してみました。
左にサイトバーを用意してみます。 レフトバーのwidthは200pxに指定してみました。
divでコンテナを用意します。名称はなんでも良いですが、 今回は、containerとしました。
containerのdivの中に、leftbarとmainの2つのdivを入れ子にします。
スタイルシートには、
.container{
display: -webkit-flex;//safari
display: flex;
border: 3px solid #cccccc;
margin: 30px auto;
}
.leftbar{
border-right: 3px solid #cccccc;
width: 200px;
}
.main{
}
としてみました。safariというのは、iPhoneで使っているブラウザのようで、 こちらも指定しておくということです。
htmlの方には、
<div class="container">
<div class="leftbar">
<p>
こちらはレフトバーです。
<br>
<br>
</div>
<div class="main">
<p>こちらにはブログ記事の本文など
<br>
<br>
</div>
</div>
としてあります。containerのdivタグの中に、 leftbarとmainのdivタグが入れ子になって入っています。
できあがったサンプルは以下のとおりです。
flexboxを使用したらとても簡単に2カラムのレイアウトができました。
レフトバーのレイアウトの仕方はわかりましたが、 今度は、サイトバーを右につけてみたいと思います。
今度はちょっと難しかったです。
スタイルシートには、
.container{
display: -webkit-flex;//safari
display: flex;
border: 3px solid #cccccc;
margin: 30px auto;
}
.main2{
margin-right: auto;
}
.rightbar{
border-left: 3px solid #cccccc;
width: 200px;
}
としてみました。containerの部分は先ほどのレフトバーの時と同じですが、 mainの部分(今回は、main2という名前にしました)とrightbarの部分が異なります。 mainの部分に、
margin-right: auto;
をつけたら、一応うまくいきました。
ちなみにhtmlの方は、
<div class="container">
<div class="main2">
<p>こちらにはブログ記事の本文など
<br>
<br>
</div>
<div class="rightbar">
<p>
こちらはライトバーです。
<br>
<br>
</div>
</div>
となっています。
できあがったサンプルは以下のとおりです。
これで、シンプルな2カラムのレイアウトができました。 flexboxはとても簡単で使いやすいですね。
もしかしたら、専門家の方が見るとおかしなところがあるかもしれませんが、 とりあえずはこれで動きました。
実戦投入される際は、不具合など出ないか確認してから使うと良いのではないかと思います。
(2017/11/25)
(2017/11/25)
その他のコラム
Amazonギフト券がほしいけど出かけて行くのが面倒なときにやってみたこと。コアサーバーの支払い(2021/07/27)
凡ミス！auのスマホ料金は日割りにならないプランも。格安スマホへの乗り換え(2021/05/27)
忍者AdMaxから久しぶりの振り込みがありました。(2021/05/11)
ネット回線、GMOに申し込むならポイントタウン経由がお得です。(2021/05/11)
ADSL廃止のあとネットをどうするか悩む日々。光回線か無線タイプか(2021/04/07)
auからUQモバイルへ実際に変更してみました。月数千円の節約に成功したみたいです。(2021/04/05)
家族が買ったDellのノートパソコンをうらやましく思う。(2021/01/28)
auスマホでWifi接続時に「インターネットに接続されていません」と表示された時の対処法は(Aodroid)(2021/01/17)
あまり稼げないかもしれないけどポイントサイトでやっていること。(2020/12/16)
凡ミス！ロリポップの支払いを忘れたらどうなる？(2020/10/30)
スタイルシートのflexboxが効かない時に私がやってしまっていた凡ミス。その2(2020/08/23)
【javascript】セレクトボックスでonChangeを使ったら[object HTMLSelectElement]というエラーが出る。(2020/08/16)
VPSや専用サーバーを初めてレンタルする時のLinuxやApache、PHP、MySQL、BINDの話(2020/08/06)
Pontaポイントのまま株が買えるStockPoint for CONNECT(2020/08/01)
バリュードメイン・コアサーバーの支払い方法。Amazon PayはAmazonギフト券が使えて便利。(2020/07/28)
ポイントサイトの「Potora」が終了とのことです。(2020/07/25)
できるだけシンプルにAmazon Product Advertising API v5.0をPHPで実装する方法。(2020/07/06)
新しい収入源になる！？ココナラ副業で自分の得意を販売する。(2020/06/25)
A8ネットから振り込みがありました。無料で簡単にできる副業アフィリエイト。(2020/05/16)
現在の状況なので自宅で稼ぐ方法はないか考えてみる。(2020/05/13)
簡単に実践できそうなアフィリエイトの方法を勉強しました。「今日アフィリエイトはじめます。」(お富 著)(2020/02/16)
ブログのPVや収入を増やす方法を勉強してみました。「人気ブログの作り方」(かん吉著)より(2020/02/15)
アフィリエイトで稼げないなぁと悩んで読んでみた本。「ブログの成功技術」(株式会社イノバース與五澤憲一 著)(2020/02/15)
PHPで画像ファイルをリサイズやデータ容量の軽減・圧縮をしたい。(2020/01/09)
管理人の2019年のネット収入は42733円。マクロミルをさぼったのが響く(2019/12/28)
もしもアフィリエイトから初めての振り込みがありました(2019/12/28)
文字列にテーブルタグをつけるPythonのプログラムを作ってみました。(2019/12/28)
PythonでWindowsアプリのもとになるプログラムを勉強しました。(2019/12/28)
遅ればせながらPythonを始めようとインストールしてみました。(2019/12/28)
ロリポップからコアサーバーにお引越しの手順。新規設定や画面が真っ白になる対策も。(2019/12/16)
ライフメディアってどんなサイト？サイトの中身をチェックしてみました。(2019/12/14)
ちょびリッチってどんなサイト？サイトの中身をチェックしてみました。(2019/12/14)
げん玉ってどんなサイト？サイトの中身をチェックしてみました。(2019/12/14)
ポイントタウンでポイントは貯まる？サイトの中身をチェックしてみました。(2019/12/14)
warau(ワラウ)ってどんなサイト？サイトの中身をチェックしてみました。(2019/12/14)
「すぐたま」って稼げる？サイトの中身を詳しくチェックしてみました。(2019/12/13)
エルネは稼げる？サイトの中身を詳しくチェックしてみました。(2019/12/13)
ハピタスは稼げる？サイトを詳しくチェックしてみました。(2019/12/12)
Potora(ポトラ)って稼げる？サイトを詳しくチェックしてみました。(2019/12/12)
フルーツメールでポイントは稼げる？サイトの内容をチェック(2019/12/12)
ECナビってどんなサイト？ポイントって貯まる？(2019/12/09)
Gポイントってどんなサイト？実際に現金に交換してみました。(2019/12/08)
colleee(コリー)で初めて現金に交換してみました。(2019/10/10)
レンタルサーバー「カラフルボックス」の特徴やスペックをチェック。アフィリエイトとの相性は？(2019/06/14)
だるい・・・、やる気がでない時にできるおこづかい稼ぎ(2019/06/07)
C#でテキストボックスを使用するときの忘備録(2019/05/04)
スマホでも簡単、無料ブログを作成しておこづかい稼ぎをしてみよう。(2019/04/18)
楽天アフィリエイトのサービス改定をチェックしてみました(2019/04/14)
PHPでSQLiteを簡単にバックアップする方法を考えてみました。(2019/04/13)
管理人のネット収入2019年1月は残念0円、2月は1944円。そして3月は5362円でした。(2019/04/02)
終了間際、最後にADSLの乗り換え。廃止になった後はどうする？(2019/03/05)
ポイントサイトでのポイ活は無駄？ちょっとしたコツを考えてみました。(2019/03/05)
SBI銀行でVisaデビット付キャッシュカード作ってみました。到着までは何日かかる？(2019/02/24)
楽天銀行のメールアドレス変更でワンタイムキーが受け取れなくなった時の対策。届くまでの日数も(2019/02/22)
楽天カードや楽天スーパーポイントのちょっとだけ便利なワザ(2019/01/26)
管理人のネット収入2018年11月は1324円、12月は8111円。そして、2018年は65506円でした。(2019/01/08)
遅ればせながら、サイトのモバイルユーザーフレンドリー対応に挑戦。(2018/11/08)
ムームードメインでメールをたくさん作ろうと独自ドメインを取得してみました。(2018/11/02)
管理人のネット収入2018年9月は6256円、10月は残念245円(2018/11/02)
無料ブログと有料でサイト運営、独自ドメインの更新料も比較してみました(2018/09/04)
管理人のネット収入2018年8月は2286円(2018/09/01)
JavaScriptやPHPの乱数で遊んでみる。会心の一撃のようなプログラム(2018/08/25)
コアサーバーの申込とちょっと難しかった最初の設定方法。ロリポップ！との比較も(2018/08/18)
なぜか答えるのがスランプに。アンケートサイトに15年以上登録してわかったこと(2018/08/02)
2018年管理人のネット収入7月は15303円(2018/08/02)
マクロミルのポイントをGポイントに交換してみました。(2018/08/01)
普通のゲームをしていたら少しのポイントとWebMoneyがゲットできました(2018/08/01)
Web開発やプログラミングを学ぶオンラインスクールや教室を調べてみました(2018/07/26)
2018年管理人のネット収入5月は1509円。6月は1461円(2018/07/14)
マクロミルで大量ポイントがもらえるキャンペーン実施中(2018/06/21)
SQLiteで同時書き込みエラーを防ぐ方法があるのか探ってみました。(2018/06/18)
独自ドメインを取得してからサイトの表示まで2日48時間かかった話(2018/06/17)
ECナビのポイントが失効しそうだったので、慌てて貯めて交換しました。(2018/05/27)
FC2ブログでサイトマップが保留や不明になる。ミニサイトづくりで気づく(2018/05/12)
2018年管理人のネット収入4月は16700円(2018/05/12)
気のせい！？レンタルサーバーを移転した時ネームサーバーの反映が早くなるような気がする方法【独自ドメイン】(2018/04/24)
レンタルサーバー代を節約しようとコアサーバーにサーバー移転とマルチドメインを計画(2018/04/03)
動的なページを静的なページに見せるURLリライトをするための.htaccessの書き方(2018/04/03)
2018年管理人のネット収入2月は3486円、3月は1173円(2018/04/02)
クラウドワークスから初めて振込がありました(2018/03/03)
電気代が気になってきたので仮想通貨のマイニングを一旦休憩します(2018/02/23)
新しいポイントサイトのcolleeに登録してみました(2018/02/11)
金利が上がっているアメリカ国債をチェック(2018/02/11)
【仮想通貨】投資の王道は株・不動産・債券か(2018/02/06)
仮想通貨NEMの流出問題の経過をまとめてみました(2018/02/02)
アクセストレードのサイト作成コンテストで10万円(2018/02/02)
2018年1月管理人のネット収入は7652円(2018/02/01)
仮想通貨ビットコインが暴落した時の仕組み(2018/01/22)
仮想通貨のマイニングではじめての報酬ゲット(2018/01/15)
【仮想通貨】チューリップの球根にどれだけの価値があるのか(2018/01/09)
【マイニング】ビデオカードについて勉強したことのまとめ(2018/01/07)
【マイニング】古いマザーボードで新しいビデオカードに交換の相性問題(2017/12/05)
独自ドメインでサイトを作って3か月のアクセス数やサーチコンソールなどについて(2018/01/02)
2017年12月管理人のネット収入は2710円(2017/12/29)
サイトのデザインやレイアウトを変更して注目度アップさせよう(2017/12/28)
仮想通貨のCPUマイニングならRyzenがおすすめ！？(2017/12/28)
マイニング用にグラフィックボードを交換したら電気代はいくら増えるのか(2017/12/27)
自作PCやゲーミングPCユーザーは空いた時間に仮想通貨のマイニング(2017/12/26)
投資の世界。価格の下落は半値八掛け二割引？(2017/12/24)
ビットコイン急落のニュース(2017/12/23)
ビットコインは暴落するのか(2017/12/22)
あれ？成果が上がってる・・・アフィリエイトは気まぐれ(2017/12/22)
MinerGATE仮想通貨をマイニングするツールの使い方と画面の見方(2017/12/19)
仮想通貨がもらえるというマイニングを試してみました(2017/12/18)
PCのファンの音がうるさくなった(2017/12/18)
Windows 10でのCドライブのクリーンアップをして容量を確保(2017/12/16)
windows 10のfall creators updateで画面表示に不具合が出たので対策をしました(2017/12/14)
バリューコマース版のAmzonアソシエイトの審査に通って登録してもらえました(2017/12/13)
仮想通貨のビットコインは一年間で20倍に(2017/12/11)
評判の良いマクロミルのアンケートに答える時のちょっとしたコツ(2017/12/09)
投資で出てくるブルとベアの簡単な覚え方(2017/12/07)
ヤフオクの匿名配送スタートと楽天オークションの思い出(2017/12/07)
独自ドメインでサイトを作って2か月のアクセス数やサーチコンソールなどについて(2017/12/05)
スタイルシートのコメントアウトで私がよくやる凡ミス(2017/12/05)
音楽で収入をゲット！？(2017/12/04)
2017年11月管理人のネット収入は14542円(2017/12/01)
PeXでポイント交換する時にちょっとした話(2017/11/30)
イラストを描いてお小遣いを稼ぐ(2017/11/29)
個人でゲームを制作して収入を得る！？(2017/11/27)
スタイルシートのflexboxで2カラムのレイアウトを組むテスト(2017/11/25)
Thunderbirdのインポートやエクスポート、メールの保存などの方法を調べてみました(2017/11/24)
在宅ワークのクラウドワークスに登録してみました(2017/11/22)
YouTubeに動画投稿するユーチューバーは稼げるのか(2017/11/20)
本の「せどり」や輸入した品を販売したら稼げるのか(2017/11/19)
病院の口コミサイトが規制になるようです(2017/11/16)
写真や画像を著作権フリーで使って良いフリー素材アイドル(2017/11/15)
.htmlにphpを埋め込んで動作させる際のローカルとロリポップの.htaccessの設定(2017/11/14)
アフィリエイト広告を掲載するだけで報酬をゲット！？(2017/11/13)
アフィリエイトのためにニッチな検索キーワードを探す(2017/11/12)
洋服やバッグなどハンドメイド作品を作っていくら稼げる？(2017/11/11)
ビットコインなどの仮想通貨はどこで買えばいいのか(2017/11/10)
バリューコマースの50万円ボーナスキャンペーン(2017/11/10)
2017年10月管理人のネット収入は3548円(2017/11/09)
アフィリエイターはつらいよ！？痛い！腱鞘炎の対策(2017/11/07)
blockquoteの背景色はスタイルシートで何色にするか(2017/11/06)
独自ドメインでサイトを作って1か月のアクセス数やサーチコンソールなどについて(2017/11/05)
日経リサーチアクセスパネルのキャンペーンはアンケートに回答するだけでチャンスが増える(2017/11/05)
sqliteとmysqlの違いとメリットデメリット(2017/11/04)
.htaccessファイルがうまく効かないときに見直した書き方(2017/11/04)
phpでsqlite3を設定しても使えない時に私がやっていたとんでもない凡ミス(2017/11/03)
php5.6からphp7.1に変更した時にソースを手直しした部分(2017/11/02)
月収100万円以上をサイトで稼ぐ伝説のスーパーアフィリエイター(2017/10/31)
稼げたのに終了してしまったアフィリエイトサイト(2017/10/31)
Googleアドセンスで稼いでいる方に学ぶブログの作り方(2017/10/30)
VPSのMySQLをエクスポートして自分のPCにインポートする方法(2017/10/29)
キューモニターでポイントが貯まらない時のちょっとしたコツ(2017/10/27)
スタイルシートのflexboxが効かない時に私がやってしまっていた凡ミス(2017/10/26)
儲からない！サイトが赤字になってしまった時どうするか(2017/10/25)
レンタルサーバーを借りる時に見ておきたいスペック(2017/10/23)
ポイントコツコツ貯める派にもすごく嬉しいT-SITE(2017/10/23)
クリック保証型のアフィリエイト忍者AdMaxも使いやすい(2017/10/22)
海外VPSをレンタルするメリットは？(2017/10/21)
A8ネットの振込手数料はゆうちょ銀行にすると30円(2017/10/20)
一度は見たことがある？このイラスト素材はどこのサイトのもの？(2017/10/19)
難しい！Googleアドセンスと成果報酬型どうやって稼ぐのか(2017/10/18)
まさか！Amazonアソシエイトの審査に落ちてしまった理由と対策(2017/10/17)
共用レンタルサーバーとVPS、アフィリエイトをするならどっち？(2017/10/16)
家にいながら仕事ができるランサーズにはどんな種類の仕事があるのか(2017/10/15)
楽天アフィリエイトは初心者の方におすすめなので使い方を紹介します(2017/10/14)
アフィリエイトをするなら無料ブログと有料レンタルサーバーどちらがいい？(2017/10/13)
ロリポップの独自ドメインで403エラーが出る(2017/10/12)
バリューコマースのオートMyLinkがいい感じ(2017/10/11)
楽天スーパーポイントで投資信託を買うのがお得かも(2017/10/10)
アフィリエイトを学ぶ参考書(2017/10/09)
キューモニターで貯めたポイントを換金してみました(2017/10/08)
げん玉で稼げそうな方法を考える(2017/10/07)
マクロミルで貯まったポイントを複数経由する(2017/10/02)
コンテンツ
アンケートで稼ぐ
ポイントサイトで稼ぐ
ライティングで稼ぐ
在宅ワークで稼ぐ
アフィリエイトで稼ぐ
ポイントサイト一覧
ライティングサイト一覧
アフィリエイトサイト一覧