CSS

「CSS」の編集履歴(バックアップ)一覧はこちら

CSS」(2014/09/01 (月) 01:46:55) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

CSSのリファレンス 【表紙の真似をしたときのいろいろ】 ◯セレクタの指定 idの指定 # #header classの指定 . .subspecial 子要素の指定とかはまだ全然わからん。 ◯半角スペース   htmlで半角スペースを打っても反映されないのでこれを使う。 ◯ボックスや画像を寄せたりする float:; rightかleftを入れる。 すげー使う。 必ず width を指定しないといけない。 2カラムにするときは合計で100%になるようにすればおっけい。 ◯背景画像を入れるとか 背景の削除はGIMPで、アルファチャンネルを追加して削除みたいな感じ。 background-image: url("haikei.jpg) background-size: 800px 600px; background-repeat: no-repeat; ◯ボックスモデル よくわかってない。ググればいけそう。 ◯行間とか line-height なんかいじれるけど、よくわかってない。 ◯文字の位置 text-align
CSSのリファレンス 【表紙の真似をしたときのいろいろ】 ◯セレクタの指定 idの指定 # #header classの指定 . .subspecial classの中のp要素 みたいな感じ .class p {} ↓こんなかんじで <ul> 内をスタイルしたいとき <div id="headerNavLin"><ul><li>リストアイテム</li></ul></div> #headerNavLink ul { } ◯半角スペース &nbsp; htmlで半角スペースを打っても反映されないのでこれを使う。 ◯ボックスや画像を寄せたりする float:; rightかleftを入れる。 すげー使う。 必ず width を指定しないといけない。 2カラムにするときは合計で100%になるようにすればおっけい。 ◯背景画像を入れるとか 背景の削除はGIMPで、アルファチャンネルを追加して削除みたいな感じ。 background-image: url("haikei.jpg) background-size: 800px 600px; background-repeat: no-repeat; ◯ボックスモデル よくわかってない。ググればいけそう。 ◯行間とか line-height なんかいじれるけど、よくわかってない。 ◯文字の位置 text-align ----------ドットインストール レスポンシブデザインの------------- <<レスポンシブデザインの仕組み>> ◯サイズ スマホ: 320px - 480px タブレット:; 480 - 768px PC : それ以上 ◯サイズに合わせたスタイルを書く ・共通の設定 ・スマホ用の設定 ・タブレット用の設定 = widthが480pxを超えたら →次のように書く。 @media all and (min-width: 480px) { } ・PCの場合 → @media all and (min-width: 768px) { } ◯サイズによってメニューバーを隠したり、出したりする。 ・スマホのとき ヘッダーのナビを隠す ・タブレットのとき フッターのナビリンクを隠す。 ヘッダーのナビを出す。 フッターンナビを隠す ・PCのとき overflow:hidden → ボックスからはみ出た領域を表示しない mainとsubで2カラム表示 ◯Youtubeをうまく埋め込む ・よくわからん。 ◯いい感じに余白を付けて、中央揃え width: 95%; margin: 0 auto; ◯list-style: none: リストアイテムのマーカーを表示しない 「●」みたいなやつが消える! 便利! ◯headerNavのリストアイテムが3つあるときに、こうするときれいに三分割になる #headerNav li { float: left; width: 33%; text-align: center; } リストの要素(Home About Contact) がそれぞれ33%ずつにきれいになる ◯画像をbodyの幅からはみ出ないようになる? img { max-width: 100%; } ◯レスポンシブデザインの考え方 viewport?? <meta name="viewport" content="width=device-width, initial=1.0” > 決まり文句。 要するにスマホ(=Device)のサイズに合わせますよということ。 ◯ボックスモデルからはみ出た部分を非表示に overflow: hidden: ◯display http://www.htmq.com/style/display.shtml ・要素が表示されず、レイアウトに影響を与えない要素にする。 display: none block ・ブロックボックスをつくる display: block ◯positionはやっぱりよくわからない(調べてない) position: reactive absolute top left とか ◯iframe なんか動画埋め込みとかできる <iframe src="https://www.youtube.com/?rel=0" frameborder="0" allowfullscreen></iframe> ・frameborder="0" 枠が表示されない ・動画URLのラストに ?rel=0 関連動画が表示されない ・allowfullscreen 全画面いける

表示オプション

横に並べて表示:
変化行の前後のみ表示: