Mei.hao

HTMLとCSSの基本

2016/08/02

HTML基本

HTMLタグを覚える
  • 見出し（h1〜h6要素）
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
  • 段落（p要素）
<p>段落になります</p>
  • インライン要素（span要素）
<span>インライン要素です</span>
  • 順序なしリスト（ul要素、li要素）
<ul>
  <li>要素1</li>
  <li>要素2</li>
  <li>要素3</li>
</ul>

CSS基本

CSSプロパティを覚える

  • positionプロパティの値は次の通りです。

  • positionはボックスの配置方法を指定することができます。

    static（初期位置）

    relative（初期位置を基準とした相対位置）

    absolute（親要素を基準とした絶対位置）

    fixed（絶対位置・固定） 

div {
  position:relative;
  top:20px;
  left:20px;
}
CSS関連サイト
Free Cool CSS Frameworks
  • Bootstrap : The world’s most popular mobile-first and responsive front-end framework
  • Material Design Lite : Material Design Components in HTML/CSS/JS
  • hack.css : hack.css are exactly the way markdown is
  • font-awasome : Web上でよく利用されるアイコンを画像
Bootstrap Theme
For Customer
  • Bootswatch : Themes are built for the latest version of Bootstrap.
  • Material Design for Bootstrap : Bootstrap 3 which lets you use the new Google Material Design
  • Flat UI : Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework
  • bootmetro : Simple and flexible web framework to create elegant and modern web applications
For Admin Page

Rails 用Haml

  • Haml - Haml (HTML abstraction markup language)

Post Directory