Enviar búsqueda
Cargar
Twenty Tenをレスポンシブ化したら勉強になったよ
•
5 recomendaciones
•
3,913 vistas
Kazuma Fukami
Seguir
2012年9月15日に行われたWordCamp Tokyo 2012で登壇した際のスライドです。
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 61
Descargar ahora
Descargar para leer sin conexión
Recomendados
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
Takashi Hosoya
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
ec-campus
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみよう
Seto Takahiro
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
新デフォルトテーマTwentyTen を理解しよう
新デフォルトテーマTwentyTen を理解しよう
Yoshitaka KATO
Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
Odyssey Eightbit
Recomendados
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
Takashi Hosoya
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
ec-campus
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみよう
Seto Takahiro
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
新デフォルトテーマTwentyTen を理解しよう
新デフォルトテーマTwentyTen を理解しよう
Yoshitaka KATO
Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
Odyssey Eightbit
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CEDEC2022 Keiji Kikuchi RemoteMobWork
CEDEC2022 Keiji Kikuchi RemoteMobWork
Keiji Kikuchi
WordPress をスマートフォンに対応させる正しい方法を学ぼう
WordPress をスマートフォンに対応させる正しい方法を学ぼう
DREAMHIVE CO., LTD.
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Chieko Aihara
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
schoowebcampus
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
Más contenido relacionado
Similar a Twenty Tenをレスポンシブ化したら勉強になったよ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CEDEC2022 Keiji Kikuchi RemoteMobWork
CEDEC2022 Keiji Kikuchi RemoteMobWork
Keiji Kikuchi
WordPress をスマートフォンに対応させる正しい方法を学ぼう
WordPress をスマートフォンに対応させる正しい方法を学ぼう
DREAMHIVE CO., LTD.
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Chieko Aihara
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
schoowebcampus
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
Similar a Twenty Tenをレスポンシブ化したら勉強になったよ
(11)
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
WordPressってブログじゃないの?
WordPressってブログじゃないの?
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CEDEC2022 Keiji Kikuchi RemoteMobWork
CEDEC2022 Keiji Kikuchi RemoteMobWork
WordPress をスマートフォンに対応させる正しい方法を学ぼう
WordPress をスマートフォンに対応させる正しい方法を学ぼう
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用) 先生:池田 祐太郎
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Twenty Tenをレスポンシブ化したら勉強になったよ
1.
WordCamp Tokyo 2012
TwentyTenをレスポンシブ化 したら勉強になったよ 深水 一馬 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
2.
自己紹介
深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami 神奈川県大和市の会社に勤務。 WordPressによるWebサイト製作に携わる デザイナー/コーダー TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
3.
自己紹介
深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami 2011年に異業種から未経験で転職 Web業界歴は1年ちょっと TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
4.
自己紹介
深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami 製作の99%はTwenty Tenの子テーマです。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
5.
自己紹介
深水 一馬(ふかみ かずま) Twitter: @foom_in Facebook: kazuma.fukami よろしくお願いします! TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
6.
Twenty Ten テーマについて
WordPressのTwenty Tenって ご存じですか? TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
7.
Twenty Ten テーマについて
Twenty Tenとは TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
8.
Twenty Ten テーマについて
20 10 Twenty Ten TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
9.
Twenty Ten テーマについて
WordPress 3.0から登場した 2010年版の標準テーマです TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
10.
Twenty Ten テーマについて
◆スクショ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
11.
Twenty Ten テーマについて
WordPress 3.2から デフォルトとなった Twenty Eleven テーマ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
12.
Twenty Ten テーマについて 管理画面
→ 外観 → テーマ Twenty Tenを使うには 「利用可能なテーマ」 から 「有効化」 しましょう。 こっち! TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
13.
レスポンシブウェブデザインについて
レスポンシブウェブデザイン? TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
14.
レスポンシブウェブデザインについて CSS3のメディアクエリ(Media Querys)を使って 表示デバイス(画面の幅)に応じてレイアウトが変わる マルチデバイス(スマホ)対応方法の一つ 最大の利点はPC用ページとスマホ用ページを 別々に用意しなくてすむこと。 TwentyTenをレスポンシブ化したら勉強になったよ
/ 深水 一馬
15.
レスポンシブウェブデザインについて PC用とスマホ用で別々のHTMLを作る場合の例 PC用ページ www.example.com/about.html スマホ用ページ www.example.com/sp/about.html レスポンシブを使うと PCもスマホも www.example.com/about.html PC・スマホ用の表示をCSSで切り替えるので、 一つのHTMLを使って同一URLにすることができる。 TwentyTenをレスポンシブ化したら勉強になったよ /
深水 一馬
16.
WordPressのレスポンシブ対応
のレスポンシブ対応 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
17.
WordPressのレスポンシブ対応
のレスポンシブ対応 現在の標準テーマ Twenty Elevenはレスポンシブ対応 この人レスポンシブ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
18.
WordPressのレスポンシブ対応
のレスポンシブ対応 WordPress 3.5 から搭載される 新標準テーマ Twenty Twelve も レスポンシブ対応となっています。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
19.
レスポンシブウェブデザインについて
のレスポンシブ対応 WordPressには レスポンシブ対応のテーマが 多数存在しています! TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
20.
レスポンシブウェブデザインについて
でも… TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
21.
レスポンシブウェブデザインについて Twenty Tenはレスポンシブじゃない
(́・ω・`) TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
22.
レスポンシブウェブデザインについて
Twenty Tenってレスポンシブに 改造できたりしないのかな (́・ω・`) TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
23.
レスポンシブウェブデザインについて
なんて考えまして (`・ω・́) TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
24.
実際にやってみた
仕事の合間に ちょっと試してみました TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
25.
実際にやってみた
そうしたら… TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
26.
実際にやってみた
意外と簡単に それっぽくなった! TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
27.
作業の流れ
作業の流れ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
28.
作業の流れ
1) 子テーマを作成する 2) style.cssを編集 3) header.phpを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
29.
実際にやってみよう
1) 子テーマを作成する TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
30.
実際にやってみよう 1) 子テーマを作成する レスポンシブのスタイルシートなどは Twenty Tenのstyle.cssに直接記述してもOK。 ただし、テーマのバージョンアップ時に レスポンシブの記述が消えてしまうので 子テーマを作る方がオススメ
TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
31.
実際にやってみよう 1) 子テーマを作成する
子テーマのファイルは2つだけでOK header.phpは、オリジナルの Twenty Tenからコピーしてくる TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
32.
実際にやってみよう
2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
33.
実際にやってみよう 2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ
/ 深水 一馬
34.
実際にやってみよう 2) 子テーマのstyle.cssを編集
私はTwenty Tenの 子テーマですよ! 親テーマのCSSを 読み込む TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
35.
実際にやってみよう 2) 子テーマのstyle.cssを編集
@media (max-width:○○){}を定義 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
36.
実際にやってみよう 2) 子テーマのstyle.cssを編集
ターゲットとする端末(画面幅)や デザインを考慮のうえ しっかりと設計を行いましょう。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
37.
実際にやってみよう 2) 子テーマのstyle.cssを編集
とは言え、今回はとりあえず TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
38.
実際にやってみよう 2) 子テーマのstyle.cssを編集
Twenty Elevenのstyle.cssから @media (max-width:○○){} ○○の部分を拝借。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
39.
実際にやってみよう 2) 子テーマのstyle.cssを編集 Twenty
Elevenのstyle.css @media (max-width:○○∼の部分 Twenty Elevenでは800px,650px,450pxの 3点が設定されている TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
40.
実際にやってみよう 2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ
/ 深水 一馬
41.
実際にやってみよう 2) 子テーマのstyle.cssを編集
非レスポンシブ レスポンシブ widthは原則pxで指定 widthは%で指定 されていることが多い TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
42.
実際にやってみよう 2) 子テーマのstyle.cssを編集
Twenty Ten Twenty Eleven 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは%で指定 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
43.
実際にやってみよう 2) 子テーマのstyle.cssを編集
Twenty Ten Twenty Eleven 非レスポンシブ レスポンシブ widthは原則pxで指定 widthは%で指定 幅を可変させたい部分は px→%に置き換える TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
44.
実際にやってみよう 2) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ
/ 深水 一馬
45.
実際にやってみよう 2) 子テーマのstyle.cssを編集
pxを%に置き換える為の ポイントを追加する TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
46.
実際にやってみよう 1) テーマのCSSを解析 TwentyTenをレスポンシブ化したら勉強になったよ
/ 深水 一馬
47.
実際にやってみよう 1) テーマのCSSを解析 TwentyTenをレスポンシブ化したら勉強になったよ
/ 深水 一馬
48.
実際にやってみよう 3) 子テーマのstyle.cssを編集 TwentyTenをレスポンシブ化したら勉強になったよ
/ 深水 一馬
49.
実際にやってみよう 2) 子テーマのstyle.cssを編集 サイドバーを落として2カラム→1カラム
にレイアウトの変更を行うには TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
50.
実際にやってみよう 2) 子テーマのstyle.cssを編集
これだけっ! TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
51.
実際にやってみよう
3) 子テーマのheader.phpを編集 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
52.
実際にやってみよう 3) 子テーマのheader.phpを編集 コピーしてきたheader.phpにmetaタグを追加 <meta name="viewport"
content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no"> TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
53.
ここまで と これから ここまで とりあえずTwenty
Tenのレイアウトが 画面幅に応じて変化するようになった TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
54.
ここまで と これから ここまで
子テーマのstyle.css 200行弱 製作時間 約2時間 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
55.
ここまで と これから ここまで
今日の説明だけでは ??? かもしれません (゚Д゚) TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
56.
ここまで と これから ここまで
とりあえず手を動かしてみると レスポンシブって難しそう ↓ 何となく仕組みはわかった くらいにはなると思います TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
57.
ここまで と これから これから
でも、これでスマホ対応と言うには ちょっと完成度が低いかも。 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
58.
ここまで と これから これから
メニューの折りたたみ 読み込む画像の切替え 3G回線での表示速度も考慮 TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
59.
おまけ
Responsive Twenty Ten 海外のサイトでレスポンシブな Twenty Tenが配布されています http://responsivetwentyten.com/ TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
60.
最後に
今日のスライドは後日公開します TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
61.
おしまい
ご静聴ありがとうございました TwentyTenをレスポンシブ化したら勉強になったよ / 深水 一馬
Descargar ahora