サイタWeb・デザインスクールホームページ作成講座 東京 東京Webカレッジ 三谷クラス レッスンノート flexを使ったトリッキーなレスポンシブコーディング

flexを使ったトリッキーなレスポンシブコーディング

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

今回flexプロパティを使ったトリッキーなレスポンシブコーディングをご説明しました。

widthをcalcで設定してあげることで、marginを自在に作れます。
PCとtabletとSPで横並びの数を変える設定も簡単ですね。

この方法を充分活用できるようになれば、レスポンシブコーディングに奥行きがうんと増します。
がんばって復習してください。
解らないことがあれば、次回のレッスンで聞いてください。

さて、1点。
レッスンで説明し忘れたことがあります。(ここ、ものすごく重要です!)

背景色を消して全体を白色にしたバージョンですが、ここからは.boxのpaddingを削除、またはpadding: 0;に設定しなおしてください。

白色バージンのほうは、余計な余白を残してしまってました。ごめんなさい。

この説明の意味が、わからなかったらメッセージで質問してください。
このレッスンノートを書いたコーチ

国内最大のポータルサイト運営会社にて実績多数!リラックスして学べます

目的・種類別にホームページ作成・作り方講座を探す

新着レッスンノート

レッスンおつかれさまでした。 今回は、ロゴマークを変更、ニュース欄の更新、リンクリストなどを更新しました。 時間があったら、自宅で右カラムのリンクリストを更新してみてください。 HTMLやCSSには、慣れてきたでしょうか? 最初は何がなんだかわからなかったと思いますが、読み書き...

レッスンおつかれさまです。 前回にひきつづき、テンプレートを使ったサイトの制作を進めて行きました。 今回は、横並びのコンテンツに、それぞれ画像、タイトル、サマリーを入れていきました。

レッスンお疲れ様でした。 今回から、テンプレートを使ったサイトの制作を始めます。 既存のデータを使用して、コンテンツに最適化するようカスタマイズしていく作業になります。

レッスンおつかれさまでした。 今回のレッスンでは、floatを使って、横並びのコンテンツをレイアウトしてみました。 前回までのレッスンで、floatとは本来「回り込み」をさせるためのプロパティであることを説明してきました。 しかしながら、web制作の現場では、floatは主に...

前回のレッスンでclearとclearfixについて、ご説明しましたが、今回はもう少し理解を深めていきました。 clearfixは、floatさせた要素の高さを認識させる目的で、floatさせた要素の親に付与します。 clearは、回り込みを解除させるために、floatさせた要素の兄弟...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta