9 Bootstrap Font Awesome 52 + gem 'bootstrap', '4.0.0.alpha6' 53 + gem 'tether-rails' Gem bootstrap tether-rails Bootstrap JavaScript Tether Ctrl-C Ra
|
|
|
- まさとし かなり
- 7 years ago
- Views:
Transcription
1 9 Bootstrap Font Awesome Bootstrap Font Awesome Simple- Greeter 9.1 Bootstrap CSS/JavaScript Bootstrap PC Web SimpleGreeter Bootstrap Bootstrap 4 Bootstrap Bootstrap 4 Gemfile Gemfile 49 gem 'spring-watcher-listen', '~> 2.0.0' 50 end
2 9 Bootstrap Font Awesome 52 + gem 'bootstrap', '4.0.0.alpha6' 53 + gem 'tether-rails' Gem bootstrap tether-rails Bootstrap JavaScript Tether Ctrl-C Rails Gem $ bundle app/assets/stylesheets application.css $ rm app/assets/stylesheets/application.css application.scss app/assets/stylesheets/application.scss "bootstrap"; "*"; app/assets/javascripts application.js app/assets/javascripts/application.js 13 //= require jquery 14 //= require jquery_ujs 15 //= require turbolinks 16 + //= require tether 17 + //= require bootstrap-sprockets 18 //= require_tree. app/views/layouts application.html.erb 64
3 9.2 Card app/views/layouts/application.html.erb 1 <!DOCTYPE html> 2 <html> 3 <head> 4 + <meta name="viewport" content="width=device-width, initial-scale=1"> 5 %></title> viewport meta width=device-width initial-scale=1 9.2 Card Web Bootstrap Web Bootstrap component Card app/views/hello show.html.erb app/views/hello/show.html.erb 4 - <p>hello, %>!</p> 4 + <div class="card"> 5 + <div class="card-block"> 6 + <p>hello, %>!</p> 7 + </div> 65
4 9 Bootstrap Font Awesome 8 + </div> 1. p div 2. div class card 3. div class card-block div p class HTML Bootstrap card card-block 1.25rem Rails Card 66
5 9.2 Card Bootstrap HTML card-text 9.1 Hello, world! show.html.erb app/views/hello/show.html.erb 5 <div class="card-block"> 6 - <p>hello, %>!</p> 6 + <p class="card-text">hello, %>!</p> 7 </div> card-text 0 Bootstrap p 1rem 1rem
6 9 Bootstrap Font Awesome 9.2 Card card-text Card show.html.erb app/views/hello/show.html.erb 4 - <div class="card"> 4 + <div class="card m-3"> class div m-3 m-3 spacing 1 m p rem 2 0.5rem 3 1rem 4 1.5rem 5 3rem 68
7 9.3 m-t t r b l x y Card 1rem Card 9.3 show.html.erb 69
8 9 Bootstrap Font Awesome app/views/hello/show.html.erb 4 <div class="card m-3"> 5 - <div class="card-block"> 5 + <div class="card-block card-inverse card-success"> 6 - <p class="card-text">hello, %>!</p> 6 + <p class="card-text text-center lead">hello, %>!</p> 7 </div> 8 </div> card-inverse card-text card-success #5cb85c success card-primary #0275d8 card-success #5cb85c card-info #5bc0de card-warning #f0ad4e card-danger #d9534f Bootstrap blue red primary danger danger text-center lead 1.25rem
9 9.4 Font Awesome 9.4 Card 9.4 Hello, world! Chrome A SimpleGreeter 9.4 Font Awesome Font Awesome HTML 9.5 Web 9.5 Font Awesome http//fontawesome.io/icons/ 71
10 9 Bootstrap Font Awesome Gemfile 1 Gemfile 52 gem 'bootstrap', '~> alpha6' 53 gem 'tetehr-rails' 54 + gem 'font-awesome-sass' Ctrl-C Rails Gem font-awesome-sass $ bundle app/assets/stylesheets application.scss app/assets/stylesheets/application.scss "bootstrap"; 2 "font-awesome-sprockets"; 3 "font-awesome"; "*"; 9.5 Font Awesome Font Awesome app/views/hello show.html.erb app/views/hello/show.html.erb 6 - <p class="card-text text-center lead">hello, %>!</p> 6 + <p class="card-text text-center lead"> 7 + <i class="fa fa-smile-o"></i> 8 + Hello, %>! 9 + </p> 72
11 9.5 Font Awesome class fa i Font Awesome i fa- class smile-o fa-smile-o Rails 9.6 Hello, world! 9.6 Font Awesome 73
2 Rails pico planner camel case camel pico planner _ pico_planner snake case snake - chain case chain pico planner pico-planner CSS id class 2.3 Rails
2 Rails 2.1 DBMS PicoPlanner SimpleGreeter DBMS Ruby on Rails 3 PostgreSQL MySQL SQLite3 SQLite3 2.2 Web PicoPlanner pico planner 11 2 Rails pico planner camel case camel pico planner _ pico_planner snake
16 (2) 23 - <div class="col-12 col-md-4"> </div> 23 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> HTML bg-info #17
16 (2) Elixir/Phoenix 16.1 web/templates/plan_items/show.html.eex 3 - 3 + 7 -
10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #<PlanItem id nil, name nil,...> > item.name = "" => "" > item.valid? => true valid? true false
10 (1) 16 7 PicoPlanner validations 10.1 PicoPlanner Web Web invalid values validations Rails validates validate 107 10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #
_勉強会_丸山さつき_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
vuejs_meetup.key
Rails Vue.js Vue.js Meetup 2015-01-28 @kazupon About Me @kazupon CUUSOO SYSTEM Vue.js Plugin vue-i18n: https://github.com/kazupon/vue-i18n vue-validator: https://github.com/kazupon/vue-validator Vue.js
SVG 6 ( 3) I(SVG) 2017/5/30 HTML (1) 1 2 4 5 6 橡点検記録(集約).PDF
942.8.8.8.7 671 86 11 1 9 9 9 1 1,792 7,23 2,483 1,324 2,198 7,23 82 7,23 6,327 9,22 9,713 8,525 8,554 9,22. 8,554. 1,79 9,713 95 947 8,525.. 944 671 81 7 17 1,29 1,225 1,241 1,25 1,375 9.3 23,264 25,
SmartBrowser_document_build30_update.pptx
SmartBrowser Update for ios / Version 1.3.1 build30 2017 年 8 月 株式会社ブルーテック 更新内容 - 概要 ios Version 1.3.1 build28 の更新内容について 1. 設定をQRから読み込み更新する機能 2.URLをQRから読み込み画面遷移する機能 3.WEBページのローカルファイル保存と外部インテントからの起動 4.JQuery-LoadImageライブラリの組み込み
6 (1) app.html.eex 28 lib/nano_planner_web/templates/layout/app.html.eex 27 <footer> Oiax Inc <%= this_year() %> Oiax Inc. 29 </footer>
6 (1) of_today 6.1 Copyright 2017 lib/nano_planner_web/views layout_view.ex this_year/0 lib/nano_planner_web/views/layout_view.ex 1 defmodule NanoPlannerWeb.LayoutView do 2 use NanoPlannerWeb, view 3 +
サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT
1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値
P-12 P-13 3 4 28 16 00 17 30 P-14 P-15 P-16 4 14 29 17 00 18 30 P-17 P-18 P-19 P-20 P-21 P-22
1 14 28 16 00 17 30 P-1 P-2 P-3 P-4 P-5 2 24 29 17 00 18 30 P-6 P-7 P-8 P-9 P-10 P-11 P-12 P-13 3 4 28 16 00 17 30 P-14 P-15 P-16 4 14 29 17 00 18 30 P-17 P-18 P-19 P-20 P-21 P-22 5 24 28 16 00 17 30 P-23
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 http://www.moj.go.jp/press/090130-1.html 55 56 57
p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge
ホームページ制作 基礎編 (HTML5 CSS3 コーディング )
ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8
progate-team-20160511
2016.05 Progate Progate Team 2 Index 1. Progate 2. Progate Team 3. Progate 3 Index 1. Progate 2. Progate Team 3. Progate Progate 4 VISION Progate 5 Progate Progate 1 6 STEP 1 2 7 STEP 2 1 8 HTML&CSS WEB
PowerPoint Presentation
HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam
経営論集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
1
...1...37 1 HTML4.01 Transitional Frameset DOCTYPE 5.1.a 2 Windows Shift_JIS Linux Unix EUC jp meta 5.1.a 3 5.1.a JIS cm cc kg alt 4 5.4.a 5.4.a 5 alt alt alt alt alt alt="" alt 6 5.4.b 5.4.b 7 8 5.3.a
~/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/
FileList Convert a pdf file!
Tamadaigakufuzokuhijirigaokac yugakukoutougakkoupasocom butamadaigakufuzokuhijirigaok acyugakukoutougakkoupasoco mbutamadaigakufuzokuhijiriga 2009 09 20 21 okacyugakukoutougakkoupaso combutamadaigakufuzokuhijiri
ohp.mgp
2019/06/11 A/B -- HTML/WWW(World Wide Web -- (TA:, [ 1 ] !!? Web Page http://edu-gw2.math.cst.nihon-u.ac.jp/~kurino VNC Server Address : 10.9.209.159 Password : vnc-2019 (2019/06/04 : : * * / / : (cf.
9 rbenv rbenv ruby 9.1 rbenv rbenv rbenv ruby ruby-build ruby 9.2 rbenv macos.bash_profile ~/.bash_profile ~/.bash_profile.bak $ touch ~/.bash_profile
9 rbenv rbenv ruby 9.1 rbenv rbenv rbenv ruby ruby-build ruby 9.2 rbenv macos.bash_profile ~/.bash_profile ~/.bash_profile.bak $ touch ~/.bash_profile $ cp -f ~/.bash_profile ~/.bash_profile.bak ~/.bash_profile
SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web
【お試し版】Web制作者のためのCSS設計の教科書（非売品）
UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.com/hiloki : http://inkdesign.jp GitHub : https://github.com/hiloki/ URL http://www.impressjapan.jp/books/1113101128 Web 10 IT UI
( )
Web Web 1 3 1 21 11 22 23 24 3 2 3 4 5 1 1 11 22 9 2 3 15 11 22 2 11 21 4 5 ( ) 102 ( ) 1 ( 1 2001 Web 1 5 4 1 1 - 7 - [] - 7 10 11 12 12 1 10 1 12 - [] 1 1 2 Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 3 1 47
夏目小兵衛直克
39(1906)1222 14(1817) 3(1832)1514(1843) 2628 6 (1853) (1854)3727 3(1856) 1 / 13 5(1858)6(1859) 5(1853) () () () () () () 3(1867)29 504111( 2 / 13 )98 23 18 2(1869)310283 100 50() 58 226 3313200982 5033
<4D6963726F736F667420576F7264202D2081A193B98BE257656290EA97708CFB8DC08B4B92E88179918D8D878CFB8DC0817A816990568B4B816A81798A6D92E894C5817A2E646F63>
transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動
1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは
2014-11.key
2014-11 1 2 3 4 5 7 8 9 10 11 12 PC 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 45 46 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
「東京こどもネット・ケータイヘルプデスク（こたエール）」平成22年度相談実績の概要
734, 35% 62, 11% 84, 16% 530, 26% 235, 11% PC) 396, 73% 579, 28% ) (21 ) 2 3 4 5 6 7 8 9 10 11 12 13 200 150 100 22 182 200 150 100 22 50 54 PC 49 52 PC 50 41 14 17 1 1 4 16 3 6 14 180 250 200 150 235
6 30 2005 10 1 65 2,682 00 21.9 481 1 2,776 21.0 15 1,740 00 5.8 107 13.6 40 2025 24.2-0 - -1 - -2 - -3 - -4 - -5 - -6 - -7 - -8- -9 - - 10 - -11 - - 12 - - 13-10 11 59 4 59 3 10 17 - 14 - - 15 - - 16
</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 要素を記述し