• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
プレ講義第2回 css
 

プレ講義第2回 css

on

  • 319 views

サークルプレ講義css

サークルプレ講義css

Statistics

Views

Total Views
319
Views on SlideShare
319
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    プレ講義第2回 css プレ講義第2回 css Presentation Transcript

    • CSS入門 2013/02/08
    • CSSとは?• いわゆるCascading Style Sheet• いわゆるHTMLをデザイン ウェブサイトのほぼ全てがCSSを使ってデザインされている
    • 開発環境は?• HTMLと同じでおk• 拡張子をcssにしよう
    • CSSの基本要素指定{ デザイン指定:設定; デザイン指定:設定; ・ ・ ・}
    • たとえば• bodyタグの背景を灰色にしたいbody{ background-color: #cccccc;}実際に使ってみよう
    • HTMLで使用する• 今回は使用するcssとhtmlを同じフォルダに入れて• htmlのheadタグの中に<link rel="stylesheet" href="./hoge.css" type="text/css"/>hogeはファイル名でhrefの中身にcssのパスを記述する。htmlの中に<style type=“text/css”></style>↑を使って書く方法もあるけど今回使用しない
    • 汎用的使い方• <div id=“hoge”></div>• <div class=“foo”></div>のようにdivタグにidやclassをつけて管理する#hoge{ hogehoge: huga;}.foo{ foobar: foo;}
    • “#”とか”.”って何?• タグを指定するときはそのままでおk• idを指定するときは”#”をつける• classなら”.”をつける
    • たとえば<body> headerを指定 .header{ <div class=“header”> なんちゃら あたま } mainを指定 </div> #main{ <div id=“main”> なんちゃら } ほんぶん footerを指定 </div> .footer{ なんちゃら <div class=“footer”> } おわり </div></body>
    • とりあえず使ってみる• ソースbody{ text-align: center; background-color: #cccccc;}• テキストのセンタリングと 背景色が変われば成功(∩´∀`)∩
    • 解説body{ <body>を指定 text-align: center; text-alignをcenter background-color: #cccccc; background-colorを#ccccccに設定}• text-alignテキストの配置指定left,center,rightなど• background-color背景色の指定#RGB,#RRGGBBなどで指定するのが一般的
    • インライン要素 ブロックレベル要素• HTMLタグはインライン要素とブロックレベル要素とい う2つの要素に分けられる• 要素によってcssでレイアウトを指定できないことが• 文法的ルールも一応ある インライン要素 ブロックレベル要素height 指定不可 指定可width 指定不可 指定可margin 左右 上下左右padding 左右 上下左右 ・・・など
    • インライン要素• <a>,<strong>,<img>など• 自動で改行されない。• インライン要素の中にブロック要素は含めない
    • ブロックレベル要素• <h1>〜<h6>,<div>,<p>,<ul>,<hr>,<table>などなど• 自動で改行
    • てきとーに作ったデモ• http://goo.gl/71RYV
    • 余談• htmlもcssもエラーとか出してくれないの?(´・ω・`)html文法チェッカーなるものがありますhtml http://validator.w3.org/ http://www.htmllint.net/html-lint/htmllint.htmlcss http://jigsaw.w3.org/css-validator/• なんかタグのオプションでcss的なことができるんだけ ど・・・こっちでよくない?(´・ω・`)css使ったほうが修正が楽だよ(´・ω・`)• デザインとかめんどくさい・・・(´・ω・`)cssフレームワークとかでググればいいと思います。TwitterBootstrapとかどうでしょう
    • プログラミングしてなくね?・・・(´^ω^`)