第3回/フロントエンド開発/グリッドシステム
の編集
https://cs27.org/wiki/kobespiral2021/?%E7%AC%AC3%E5%9B%9E/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA/%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0
[
トップ
] [
編集
|
差分
|
履歴
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
[[第3回/フロントエンド開発]] * レスポンシブデザインとは [#o769bfa1] - ユーザの環境(PC,タブレット,スマートフォン)に合わせて、見せ方を変化させること。 - メリット -- 1つのhtmlで完結する（変更が楽） -- ユーザにあったページが自動で表示される - こんな感じ~ &attachref(res01.jpg,,50%); ~ &attachref(res02.jpg,,50%); * Bootstrapにおけるグリッドシステム [#pa7df087] - レスポンシブデザインの実装を容易化するbootstrapの仕組み． -- 画面を''格子状（グリッド）''にとらえ，画面サイズに応じたオブジェクトの配置を行う - bootstrapでは、「画面サイズ(横幅)」を基準にして、表示するコンテンツの大きさを変更している。 - 基本は「画面を12等分して、どの環境では、どれだけの大きさで表示するか」を設定する - 大きさの基準は以下の通り~ &attachref(res3.png,,50%); ~ &attachref(res4.png,,50%); xs: iPhone縦向き sm: iPhone(～8)横向き、iPad縦向き md: iPhone(X～)横向き、PCブラウザ半分 lg: ipad横向き xl: PCブラウザ全画面 -- 例 <div class="col-xs-12 col-sm-6 col-xl-4"> -- スマホだと横幅全部に表示、ipadだと半分、PCだと1/3分だけ表示 - クラスに付属させるだけでレスポンシブになるため、簡単に作れる * まあ触ってみよう [#j55cac6d] - なんかやってみる - Chromeでは、F12 => 右上のボタン で、スマホサイズのエミュレートができる~ &attachref(res5.jpg,,50%);
タイムスタンプを変更しない
[[第3回/フロントエンド開発]] * レスポンシブデザインとは [#o769bfa1] - ユーザの環境(PC,タブレット,スマートフォン)に合わせて、見せ方を変化させること。 - メリット -- 1つのhtmlで完結する（変更が楽） -- ユーザにあったページが自動で表示される - こんな感じ~ &attachref(res01.jpg,,50%); ~ &attachref(res02.jpg,,50%); * Bootstrapにおけるグリッドシステム [#pa7df087] - レスポンシブデザインの実装を容易化するbootstrapの仕組み． -- 画面を''格子状（グリッド）''にとらえ，画面サイズに応じたオブジェクトの配置を行う - bootstrapでは、「画面サイズ(横幅)」を基準にして、表示するコンテンツの大きさを変更している。 - 基本は「画面を12等分して、どの環境では、どれだけの大きさで表示するか」を設定する - 大きさの基準は以下の通り~ &attachref(res3.png,,50%); ~ &attachref(res4.png,,50%); xs: iPhone縦向き sm: iPhone(～8)横向き、iPad縦向き md: iPhone(X～)横向き、PCブラウザ半分 lg: ipad横向き xl: PCブラウザ全画面 -- 例 <div class="col-xs-12 col-sm-6 col-xl-4"> -- スマホだと横幅全部に表示、ipadだと半分、PCだと1/3分だけ表示 - クラスに付属させるだけでレスポンシブになるため、簡単に作れる * まあ触ってみよう [#j55cac6d] - なんかやってみる - Chromeでは、F12 => 右上のボタン で、スマホサイズのエミュレートができる~ &attachref(res5.jpg,,50%);
テキスト整形のルールを表示する
添付ファイル:
res01.jpg
197件
[
詳細
]
res02.jpg
192件
[
詳細
]
res3.png
200件
[
詳細
]
res4.png
203件
[
詳細
]
res5.jpg
195件
[
詳細
]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
res01.jpg 197件
[詳細]
res02.jpg 192件
[詳細]
res3.png 200件
[詳細]
res4.png 203件
[詳細]
res5.jpg 195件
[詳細]
