【お試し版】Web制作者のためのCSS設計の教科書（非売品）
|
|
|
- さなえ わしあし
- 7 years ago
- Views:
Transcription
1
2 UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : : GitHub : URL
3 Web 10 IT UI WebWeb HTML/CSS CSS 100% CSS 10 CSS CSS OOCSS SMACSS BEM CSS
4 CONTENTS CSS CSS 8 CSS 8 9 CSS CSS 13 HTML CSS CSS CSS
5 CSS OOCSS 45 OOCSS SMACSS BEM 69 MindBEMding MCSS 77 CSS 77 MCSS FLOCSS FLOCSS Foundation 88 Layout 88 Object Rule of three 97 SOLID CSS
6 5 CSS Sass Sass CSS CSS Web Components HTML/CSS 188 HTML/CSS 188 Web Components 188 Web Components my-alert Templates Shadow DOM
7 CSS Web CSS WebWeb CSS Chapter 1
8 CHAPTER CSS Web CSS CSS CSS CSS Photoshop
9 HTML5WebWeb Web CSSCSS JavaScript Web CSS Web CSS 1-1 CSS 1 B a c k b o n e. j s Knockout.js MVC Model View Controller MVVM Model View ViewModel UI MV 1 JavaScript CSS CSS 9
10 CHAPTER 1 CSS WebPhotoshop Web 1 CSS CSS philwalton4 1 10
11 図1 CSS Architecture CSS Architecture 日本語訳 これらのゴールは引用元の記事にもあるように CSS に限らずソフトウエア 開発 プログラミング言語全般においていえることであり 逆にいえば 多くの プログラミング言語の持つプラクティスのエッセンスは CSS においても生かす ことができます CSS において これらが具体的にどういう意味を持つかを説明しておきます 予測しやすい というのは期待通りに振る舞うかどうか ということです 他 のルールが影響して 記述したルール通りの振る舞いや見栄えにならない また は追加したルールが他のルールに影響を与えることがないようにするということ です 1-1 CSS 設計の重要性 予測しやすい 再利用しやすい スタイルがコピー & ペーストされて膨らみ続ける CSS にならないためにも 再利用しやすいルールを持つことは重要です 再利用しやすいルールというのは 抽象的で 機能ごとに分離されている必要があります 遭遇した UI デザインの マークアップ CSS を一度作れば 再度同じような UI に遭遇したときに わざ わざ書き直す必要がないようにするのが理想的です 11
12 CHAPTER 1 CSSCSS CSS 4 CSSCSS CSS CSS CSS 12
13 1 2 CSS CSS CSS CSS.text { color: red; redcolorred HTML CSS.selector { property: value CSS 1-2 CSS HTML HTMLHTMLJavaScript CSS HTMLCSS 13
14 CHAPTER HTML <article> <h1></h1> <div> <p></p> </div> </article> CSS CSS article h1 { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold; CSS HTML <div> <h2></h2> <div> <p></p> </div> </div> 14
15 CSS div h2 { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold; class HTML <article class="entry"> <h1 class="entry-title"></h1> <div class="entry-body"> <p></p> </div> </article> CSS CSS.entry-title { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold; class CSS 1-2 CSS HTML <div class="entry"> <h2 class="entry-title"></h2> <div class="entry-body"> <p></p> </div> </div> HTML 15
16 CHAPTER 1 CSS #sidebar ul li a {... #sidebar ul li ul li a {... body#home.column1 #main {... article header p:first-child {... class CSS :first-child CSS 0 CSS none CSS.title { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10em; font-size: 24px; font-weight: bold; 16
17 CSS.title { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold;.no-border { padding-bottom: 0; border-bottom: none; HTML <h2 class="title no-border"> </h2> CSS.title { margin-bottom: 0.5em; font-size:2em;.headline { padding-bottom: 10px; border-bottom: 2px solid #000; HTML <h2 class="title headline"> </h2> border:none padding: CSS 17
18 CHAPTER 1 Photoshop CSS Photoshop 16px 24px 3 3 CSS CSS HTML <div class="intoduction"> <p class="lead">css </p> <p>css </p> </div> 18
19 CSS.intoduction { line-height: 27px; font-size: 18px;.lead { margin-bottom: 0.5em; text-align: center; line-height: 54px; font-size: 36px; font-weight: bold; line-height 1.5 CSS.intoduction { line-height: 1.5; font-size: 18px;.lead { margin-bottom: 0.5em; text-align: center; /* line-height: 1.5; `.introduction` `line-height` */ font-size: 36px; font-weight: bold; 3 line-height line-heightline-height line-height 1-2 CSS line-height 2 CSS 19
20 CHAPTER 1 color,font-size,line-height body{... color:red color 3line-height em % 4 4 line-height em CSS CSS.intoduction { line-height: 1.5em; /* line-height: 27px; */ font-size: 18px;.lead { margin-bottom: 12px; /* line-height: 27px; */ text-align: center; font-size: 36px; font-weight: bold; CSS CSS CSS 20
21 CSS CSS 修正しやすいCSSを書く CSS WebWeb 1-2 CSS Web 21
22 CHAPTER 1 CSS 2 Web UI 1HTML PNG JPEG HTML 2 UI CSS AX B Y 22
23 [ ] TEL ISBN FAX TEL FAX [email protected] Copyright 2014 Hiroki Tani. All rights reserved. ISBN C3055 Printed in Japan
_勉強会_丸山さつき_v3
CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS
1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............
1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................
1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.
1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................
Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23
Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 1/23 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111019 演習
JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.
http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c
07_経営論集2010 小松先生.indd
19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT
第6回 CSS入門（つづき）
Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 ([email protected]) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )
ハピタス のコピー.pages
Copyright (C) All Rights Reserved. 10 12,500 () ( ) ()() 1 : 2 : 3 : 2 4 : 5 : Copyright (C) All Rights Reserved. Copyright (C) All Rights Reserved. Copyright (C) All Rights Reserved. Copyright (C) All
Copyright 2008 All Rights Reserved 2
Copyright 2008 All Rights Reserved 1 Copyright 2008 All Rights Reserved 2 Copyright 2008 All Rights Reserved 3 Copyright 2008 All Rights Reserved 4 Copyright 2008 All Rights Reserved 5 Copyright 2008 All
1 1 1.................... 1 2...................... 2 3................... 3 2 5 1.............................. 5 2........................ 6 3.................... 9 3 11 1...........................
経営論集2011_07_小松先生.indd
20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML
how-to-decide-a-title
Contents 3 4 5 6 8 13 13 14 14 15 15 18 19 Copyright 2014 All Rights Reserved. 2 / 21 URL AdobeReader ( ) http://www.adobe.co.jp/products/acrobat/readstep2.html Copyright 2014 All Rights Reserved. 3 /
p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge
m_sotsuron
iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone
スタイルシートでデザインを整えよう
スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます
サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out
1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation
初心者にもできるアメブロカスタマイズ新2016.pages
Copyright All Rights Reserved. 41 Copyright All Rights Reserved. 60 68 70 6 78 80 Copyright All Rights Reserved. FC2 97 Copyright All Rights Reserved. Copyright All Rights Reserved. Copyright All Rights
Web 設計入門
情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi
- 2 Copyright (C) 2006. All Rights Reserved.
- 2 Copyright (C) 2006. All Rights Reserved. 2-3 Copyright (C) 2006. All Rights Reserved. 70-4 Copyright (C) 2006. All Rights Reserved. ...1...3...7...8 1...9...14...16 2...18...20...21 3...22...23...23...24
ホームページ制作 基礎編 (HTML5 CSS3 コーディング )
ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8
サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT
1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値
[ ][ ] HTML [ ] HTML HTML
![[ ][ ] HTML [ ] HTML HTML](/thumbs/41/22782033.jpg "[ ][ ] HTML [ ] HTML HTML")
COPYRIGHT 2009 MAGREX, ALL RIGHTS RESERVED. [ ][ ] HTML [ ] HTML HTML [ ][ ] / / / [ ][ ] HTML HTML URL URL [ ][ ] Cellpadding Cellspacing ID ID URL [ ][ ] ID ID URL [ ][ ] ID ID URL [ ][ ] [ ][ ] [ ]
Microsoft PowerPoint - css-3days.ppt [互換モード]
![Microsoft PowerPoint - css-3days.ppt [互換モード]](/thumbs/91/105346015.jpg "Microsoft PowerPoint - css-3days.ppt [互換モード]")
情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,
インターネットマガジン2004年3月号―INTERNET magazine No.110
C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;
~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID
10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/
Copyright All Rights Reserved. -2 -!
http://ameblo.jp/admarketing/ Copyright All Rights Reserved. -2 -! Copyright All Rights Reserved. -3- Copyright All Rights Reserved. -4- Copyright All Rights Reserved. -5 - Copyright All Rights Reserved.
untitled
http://www.riskdatabank.co.jp The of Japan, Ltd. All rights reserved. 2 The of Japan, Ltd. All rights reserved. 3 The of Japan, Ltd. All rights reserved. 4 The of Japan, Ltd. All rights reserved. 5 The
</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig
1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し
Microsoft Word - 最終版 バックせどりismマニュアル .docx
ism ISM ISM ISM ISM ISM ISM Copyright (c) 2010 All Rights Reserved. Copyright (c) 2010 All Rights Reserved. Copyright (c) 2010 All Rights Reserved. ISM Copyright (c) 2010 All Rights Reserved. Copyright
untitled
2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp
ch31.dvi
1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5
SVG 6 ( 3) I(SVG) 2017/5/30 HTML (1) 1 2 4 5 6 6 2 1
6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)
Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]
![Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]](/thumbs/39/20117447.jpg "Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]")
COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css
( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ
1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation
about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理
CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/
背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit
1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(
388-356697252-2.pdf
専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]
untitled
mitsuya Copyright (C) 2007. All Rights Reserved. 1/1 mitsuya Copyright (C) 2007. All Rights Reserved. 2/2 mitsuya Copyright (C) 2007. All Rights Reserved. 3/3 mitsuya Copyright (C) 2007. All Rights Reserved.
- 2 Copyright (C) 2009. All Rights Reserved.
- 2 Copyright (C) 2009. All Rights Reserved. - 3 Copyright (C) 2009. All Rights Reserved. - 4 Copyright (C) 2009. All Rights Reserved. - 5 Copyright (C) 2009. All Rights Reserved. - 6 Copyright (C) 2009.
