Enviar pesquisa
Carregar
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
•
57 gostaram
•
13,275 visualizações
Kazuki Akiyama
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 33
Baixar agora
Baixar para ler offline
Recomendados
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
Recomendados
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Yasuhisa Hasegawa
Mais conteúdo relacionado
Mais procurados
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
Mais procurados
(20)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
WordPressってブログじゃないの?
WordPressってブログじゃないの?
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
WordPressってこんなCMS
WordPressってこんなCMS
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Destaque
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Yasuhisa Hasegawa
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
オリエンテーション・Web概論 - 芸大Web演習
オリエンテーション・Web概論 - 芸大Web演習
Atsushi Tadokoro
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
tole_390
情報編集(Web) 130409
情報編集(Web) 130409
Atsushi Tadokoro
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
1画面から始めるStoryboard
1画面から始めるStoryboard
Yuichi Fujishige
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
Atsushi Tadokoro
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
Devsの常識、DBAは非常識
Devsの常識、DBAは非常識
yoku0825
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
Kunio Sakamoto
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Awoi Ebinuma
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
Destaque
(20)
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
オリエンテーション・Web概論 - 芸大Web演習
オリエンテーション・Web概論 - 芸大Web演習
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
情報編集(Web) 130409
情報編集(Web) 130409
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
1画面から始めるStoryboard
1画面から始めるStoryboard
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Devsの常識、DBAは非常識
Devsの常識、DBAは非常識
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Webデザインのための配色セオリー
Webデザインのための配色セオリー
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
HTML5時代のWebデザイン
HTML5時代のWebデザイン
Semelhante a CSSフレームワークを使った 簡単なレスポンシブデザインの作成
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
141115 making web site
141115 making web site
Himi Sato
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Wordpress buddypress3
Wordpress buddypress3
Shoichi Otomo
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
Seiko Kuchida
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
schoowebcampus
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
第2回ExtJSユーザー事例紹介
第2回ExtJSユーザー事例紹介
Akiyuki Nomura
フロント作業の効率化
フロント作業の効率化
Yuto Yoshinari
Gruntを導入しよう!の話
Gruntを導入しよう!の話
Koji Nakamura
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
Satoshi Noda
小川流!わかりやすいテーマの作り方
小川流!わかりやすいテーマの作り方
Kasumi Ogawa
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
Shingo Iwahori
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
Semelhante a CSSフレームワークを使った 簡単なレスポンシブデザインの作成
(20)
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
141115 making web site
141115 making web site
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Wordpress buddypress3
Wordpress buddypress3
CSS Nite in SAPPORO x a-blog cms
CSS Nite in SAPPORO x a-blog cms
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
_HTML5で組んでみた_
_HTML5で組んでみた_
第2回ExtJSユーザー事例紹介
第2回ExtJSユーザー事例紹介
フロント作業の効率化
フロント作業の効率化
Gruntを導入しよう!の話
Gruntを導入しよう!の話
まだやれる Css preprocesser
まだやれる Css preprocesser
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
小川流!わかりやすいテーマの作り方
小川流!わかりやすいテーマの作り方
あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
1.
WordBench kyoto
2013 . 3 . 17 CSSフレームワークを使った 簡単なレスポンシブデザインの作成
2.
「自己紹介」 facebook 秋山 一樹〈
アキヤマ カズキ〉 twitter akiyum ● デザイナー DTPもWebも) ( やってます ● WordPressの経験は2年ぐらい
3.
「目 次」
レスポンシブデザインについて CSSフレームワークとは CSSフレームワークのサービス色々 CSSフレームワークの使用方法 ∼ 概論編 ∼ CSSフレームワークの使用方法 ∼ 制作編 ∼ 参考にさせてもらった レスポンシブwebデザイン作成に役立つサイトと本
4.
「レスポンシブデザインについて」 単一のHTMLでスマートフォン、
タブレットといった 画面サイズが異なるデバイスへ対応できるWebサイトの制作手法 (以降からワンソースマルチデバイスと表記) 基本的にはグリッドシステム、 フルードイメージ、 メディアクエリを 利用してマルチデバイスに対応させます。 アットマーク エイティ ・ 「5分で分かるレスポンシブWebデザイン」 から引用 http://www.atmarkit.co.jp/ait/articles/1301/28/news068.html
5.
「レスポンシブデザインのメリット」 ● ワンソースマルチデバイスにより、
更新 メンテナンスが楽 ・ ● プログラムを用いずにCSSのみで対応しようと思えばできる ● SEOにおける優位性 (Googleはスマートフォンサイトの構築方法として レスポンシブWebデザインを推奨) ただし…
6.
やっぱりデメリットもあります。 それは、
コストが普通のPCサイトをつくるより当然多くなります。 それぞれのデバイスの、 デザインの整合性やコンテンツの優位性を 考えた構築が必要になってきます。 そして単純な制作作業時間。 そういったデメリットを少しでも無くすため タイトルにも書いておりました通り、 制作作業時間を減らせるよう、 CSSフレームワークを使って 簡単なレスポンシブデザインを、作成していきます。
7.
「CSS フレームワークとは」 webサイトを作るときの便利な下地や骨組みのことをいいます。 CSSフレームワークを使うとhtmlタグにクラスを 指定してやるだけで、
ベースとなるレイアウトや良い感じのボタンが サクッと作れちゃいます。たとえば… classに これが button を こんな感じに! いれるだけで <a href= # >ボタン</a> <a class= button href= # >ボタン</a> ボタン ボタン
8.
「CSSフレームワークのサービス色々」 CSSフレームワークで有名どころは 「Twitter Bootstrap」
があります。 (以下Bootstrap) 他にも… 「Less Framework 4」 「Foundation 4」 「SimpleGrid」 「Skeleton」 「Kube」などがあります。
9.
調べてみると結構な数のサービスがあるとは 思いますが、
コードを覗いてみて自分の好みにあった フレームワークを使えば良いでしょう。 ● jsがフレームワーク内に必要か ● Gridの指定単位を pixel にするか % 、em にするか ● あとはデザインの好み (ボタン、 アイコンなど)
10.
「CSS フレームワークの使用方法 ∼
概論編 ∼ 」 今回は、先ほどのサービス色々であげられた 「Kube」 をつかってサイトを組み立てていきたいと思います。 僕が「Kube」を使う理由 ● デザインは基本的に一から自分がしたい (「Bootstrap」 とかは角丸、 グラデーションなどが最初からついてたので 使いたくなかった。 ) ● jsはあとで自分で用意するので最初はいらない (「Foundation」 js がたくさん入っている) は ● Gridの単位は % か em (「Skeleton」「SimpleGrid」 pixel 単位) や は
11.
要約すると、
とにかくコードもディレクトリもシンプルなもので % か em のGridである相対または可変のレイアウトで いこうとしたの 「Kube」 をつかうことにしました。 ※Gridの構成が pixel 単位でよければ 「Skeleton」 を使ってたかも こういったふうにCSSフレームワークにどこまでのことを 求めているかを検証していけば自分にあったものが 見つかると思います。 では実装に入っていこうと思います!
12.
「CSS フレームワークの使用方法 ∼
制作編 ∼ 」 1. CSSフレームワークをダウンロード これがないと始まりません。 今回は 「kube」 のサイトにアクセスして素材をダウンロードします。 ダウンロードすると以下のファイルがあります。 index.html kube.css master.css (kube.min.cssっていうのも あるけど内容は同じ)
13.
最低限の記述で、 あとは好きなようにいれてくださいといった
感じです。もうちょっと何かベースみたいなものが欲しい場合は、 サイト上のDEMOサイトのソースをコピペすればよいでしょう。 ※CSSのコピペも忘れずに! index.html サイトに掲載されているCSSタグが書かれています。 kube.css kube.css のスタイル以外で書き足したい場合は このファイルに記入します。 ※WordPressにいれる場合は style.css と ファイル名を書き換えています。 master.css
14.
2. デザインラフを作成。
それを元にサイトを構築していく 今回はテストサイトの デザインラフを 作ってみましたので、 右図ラフをもとに制作を 進めていきます。
15.
フレームワークといえども組み立てていくのは自分ですので 計画をたててから構築していきましょう! ※ラフをどこまでつくるのかというのはケースバイケースだと 思いますが、今回はPCサイトのラフのみを作成しました。
16.
3. サイトの構築開始 3-1. 骨組みから作成 「kube」
のサイトの Grid にコードの例が記載されているので、 ラフに基づいて、 それらをhtml上にどんどんコピペしていけばOKです! ※サイトをプレビューしてみても、 うまく組まれているのかわからない状態に なっています。そんな時はコンテンツ部分に background-color で 色をつけてあげたら効率よく進められると思います。 最終的には消すと思いますので、 コメントをいれるなどして消す場所が どこにあるか、忘れないように!
17.
とりあえず枠組みだけを
スマホサイト用 レイアウト 作っていったら こういう感じになりました。 PCサイト用レイアウト
18.
tips 枠組みの幅を変えたい! 「kube」
に限らず他のCSSフレームワークでもそうですが、 あくまでパターン化されているので幅の細かい調整をしたいときは 自分で調整しなければなりません。 今回のラフにあたっては、 大枠のコンテンツ幅(ここでいう wrapper ) は100%で メインコンテンツとサイドバーで2カラムになっているので メインコンテンツ+マージン+サイドバー=100% (wrapper) とならなければいけないのでこの考え方をもとに調整をします。
19.
前ページでも述べたように
「Kube」 は%表示が kube.css に 記載されていますので僕の場合は使いたいクラスの元の値は コメントに変えてその上に変更を記述します。 要素+空き+要素=100% (wrapper) の考え方さえ守っていればやり方はpx単位であっても 変わりませんし、 僕が説明したやりかたでなくても構いません。 今、 むしろもっと良いやり方がある人は教えて下さい (汗
20.
kube.css内の
この部分を修正 今回の場合 (小数点切り捨て) [サイドバー] 22% ➡27% 100% [メインコンテンツ] 74% ➡69% [空き] 変更なし サイドバー メインコンテンツを 5%ずつ増減しました サイドバーを広くするかわりに メインコンテンツを狭くする 100%
21.
3-2. 要素をいれていく 細分化された枠組みに要素をいれていきます。 文字の大きさ、空きなどもPCのままでは具合が悪いということであれば、 各対応デバイスのMediaQueries直下に記述しましょう。 4. 完
成! とりあえず静的なhtmlでの作業は以上です。 WordPressに移す作業に関しましてはレスポンシブではない サイトと変わらず、所定の位置に要素を適切に 流し込めば完成すると思われます。 (PHPに変えるとこはするなど)
22.
実際にサイトにアップしたので こちらからもアクセス可能です。 wordpress.akiyum.com
23.
5. ざくっとおさらい
どの ラフを作って 要素をいれていき CSSフレームワークが 枠組みだけ 完成させる 自分にあっているか 作ってみる ● js必要か ● ちゃんと計画をたてて ● フレームワークに対応して ● 固定にするか可変にするか 構築する ないものは自分で実装する ● デザインをどこまで ● ラフをどこまで作るのか ● ユーザビリティーの確認 じぶんがするか …etc ● 枠組みの幅を変えるか …etc (ボタンが押しやすいかなど)…etc WordPressにするときは所定の位置に流しこむ jsやスタイルシートのアップロードも忘れずに!
24.
6.作ってみて個人的に感じたこと ●
やっぱり骨組み作るのはさっとできる ●CSSフレームワークが用意するbaseの流れに沿って 作れば簡単にできる ●逆にいうと流れに逆らおうとすると面倒になる いちいち調査が必要になってくる。 ●Gridはフルにつかったけど、 タイポグラフや色とかは結局自分で 組みこんだ。今回はなかったけどテーブルとかは使うかも) ( ●知り合いの人に聞いたけどyoutube貼っつけたりしたら 不具合がでたりするケースがあるらしい (kubeに関しては) ● LESSやSASSの必要性(CSSで入力するものが増えてきたので)
25.
7.まとめ オリジナルなデザインでサイト制作しようと思うと やはりそれなりのレスポンシブwebデザインの知識は必要! あくまで作業効率化ツールとして考えた方が良い。 理想は自分でオリジナルのレスポンシブテンプレを持ってた方が 良いかも
(時代の流れで作り直しや不要になるリスクはあるが)
26.
「参考にさせてもらったレスポンシブwebデザイン 作成に役立つサイトと本」 今回スライドショーとテストサイトを作る時に参考に させてもらったサイトや本の紹介になります。 「ツール」 記事」
書籍」 その他」 「 、 「 、 「 、 の順番で紹介していきます。
27.
ツール FRONT-END CSS FRAMEWORKS 〈有用なCSSフレームワークのコレクションサイト〉 ブラウザ対応状況、
レスポンシブ対応の可否などが一目でわかります。 http://usablica.github.com/front-end-frameworks/compare.html Responsive CSS Framework Comparison 〈レスポンシブなCSSフレームワークの機能比較表〉 「Bootstrap」「Foundation」「Skeleton」 か か の3つだけだけど 詳しく比較されています。全部英語だけど) ( http://responsive.vermilion.com/compare.php
28.
記 事(レスポンシブwebデザインの作り方) 株式会社LIG 〈必読!5分でわかる流行のレスポンシブWebデザインまとめ〉 この記事以外にも参考になる記事がたくさんあります。 http://liginc.co.jp/designer/archives/7734 WP-D 〈流行りのレスポンシブ
ウェブデザイン! よく使われるデザインパターンを集めてみた!〉 ・ 「スマホになると当然、 表示面積がPCより小さく小さくなると思いますが そういった問題点をクリアするためのデザインパターンが用意されています。 http://wp-d.org/2013/01/18/2028/
29.
記 事(Kubeについて) KOJOKOJOKNIGHT 〈レスポンシブWEBデザイン化してみた〉
知り合いの方のサイト。Kubeで制作されました。 http://www.kojokojo.net/news/1419/ coliss 〈高性能すぎてビックリしました、 レスポンシブデザイン用の 超軽量フレームワーク-Kube Framework〉 http://coliss.com/articles/build-websites/operation/css/ css-framework-kubeframework-for-professional-developers.html
30.
書籍 スマートフォンサイトのためのHTML5+CSS3 要所要所の技術がたくさん掲載されていて実践向きな 書籍だったので自分の肌にあってました。 一から自分でレスポンシブwebサイトを作りたい方にもオススメ! Web Designing 今月号がタイムリーな特集です。 2012/10号もお勧めです。
31.
その他 ドットインストール 〈Twitter Bootstrap入門〉 「Bootstrap」を使おうとお考えの方はこちらを参考にしてみてはどうでしょうか http://dotinstall.com/lessons/basic_twitter_bootstrap_v3 HTML5でサイトをつくろう 〈ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました〉 レスポンシブwebデザインのまとめが書かれています とりあえずレスポンシブwebってどんなもんって考えている方にオススメです。 http://www.html5-memo.com/html5/responsive/
32.
なんか最後の書籍なんかはステマみたいなことになりましたが。笑
。 兎にも角にも、 レスポンシwebデザインは今後ますます増えていくと 思いますので、制作者の方々は、 こういったCSSフレームワークなどの ツールとうまくお付き合いして作業の効率を高めていくことが課題に なりそうですね。
33.
ご清聴ありがとうございました
Baixar agora