WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress
2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium W C HTML CSS Level XHTML Extensible Hyper Text Markup LanguageHTML HTML HTML HTML WordPress 2-1.HTMLの基礎 < > /
WordPress 属性名 = = (1)p 要素 <p></p> (2)br 要素 XHTML WordPress <br /> <br> WordPressbr 要素 (3)img 要素 src 属性 alt 属性 <img src= haru.jpg alt= /> WordPress (4)strong 要素 <strong> </strong> (5)span 要素 <span> </span> (6)div 要素 P 要素 p 要素 (7)a 要素 href 属性 <a href= http://www.shitennoji.ac.jp ></a> PC PC -
2-2.CSSの基礎 CSS Cascading Style Sheets HTML CSS HTML head 要素 style 要素 style 属性 WordPressCSS style 属性 CSS HTML CSS - 長さ em px px em 色 # green # red blue rgb n,n,n
WordPress (1) 字体 - font-weight bold font-size font-weight color n% bold #nnnnnn red font-family (2) ボックスモデル CSSpadding border margin - -top-bottom -left -right width height -
background-color px em <p style= width:px; margin-top: em; padding-top: em; bordertop:dotted thick #bbbbbb; > dotted dashed solid double thin medium thick px (3) 文字の配置 text-align left center right (4) 段組み p 要素 float width float float clear left right left right both 3. レスポンシブ ウェブデザインの例 px iphone px WordPress
WordPress PC WordPress 下書きとして保存 ボタンをこまめに押して 結果を確認した方がよい 3-1. 段組み無しの場合
p 要素 - - - - p 要素 p 要素 fontweight:bold font-size: p 要素 strong 要素 font-size:
WordPress span 要素 color:blue font-size: - - span 要素 strong 要素 WordPress <br /> p 要素 img 要素 <img src=" "> WordPress <br /> <img src=" "> <img src=" "> <img src=" "> PC px
3-2. 2 段組みの場合 p 要素 width p 要素 float PC - - - - - - HTML
WordPress p 要素 p 要素 pxwidth:px margin-left: pxp 要素 float:left PC px p 要素 px p 要素 p 要素 margin-left: pxp 要素 textalign:center <div style="clear:both"></div>p 3-3. 3 段組みの場合 - - - - PC px px p 要素
- - - - HTML p 要素 p 要素 pxwidth:px margin-left: px に p 要素 float:left PC px
WordPress p 要素 px p 要素 p 要素 margin-left: pxp 要素 px p 要素の px text-align:center p 要素上部に border-top:#bbbbbb dotted thick #BBBBBB thick dotted padding-top: em div 要素 p 要素 clear:both p 要素と同様に border-top:#bbbbbb dotted thick
4. まとめ PC 脚注 HTML CSS WordPress HTML&CSSHTML &CSS
WordPress HTML+CSS https://www.w.org/ CSSaqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow https://www.w.org/tr/ /REC-css -color- / max-width width: p 要素