Googleの日本語フォント notosans

design css

Notofontのページ notofontをWebフォントで呼び出す <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css"> もしくは@import @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 呼び出すものを覗いてみると・・・スタイルシートに指定 body{ font-family: 'Noto Sans Japanese', ser</link>…

2015-07-13

繰り返しを感じさせない背景画像のポイント

photoshop css

これで背景画像一枚の大きさ (w640 h940) サイト全体の広い部分の背景を "建物の壁のように" 画像サイズは大きくする。 PNGならTinyPNGなどで軽量化(背景なので画質は問題にならない) Jpegも圧縮をかけるウィンドウ幅・コンテンツの幅を、画像の幅で割り切…

2015-02-18

スタイルシートで上下左右真ん中に配置

css

topがauto以外 marginがautoであること要素 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 300px; height: 300px; } 左右のみの場合は、topとleftにautoを指定今時の上下左右中央の指定とその根拠について

2015-02-09

border-imageと同時にborder-colorを指定するべき

css

CSS3 border-imageのおとしあな画像はp.borderに対し、10pxの幅でborder-imageを指定している。 border-imageに未対応のブラウザで画像が表示されないので、border-colorも同時に指定しておく。ちなみに、border画像表示されないの、IEのモダンブラウザだ…

2015-02-06

背景色　RGBとRGBa

css program

rgba CSS3で登場した色指定は、 RGB(レッドグリーンブルー)とa(アルファ・透明度) 1~255,1~255,1~255,0~1 p.sample1 {background-color: rgb(0,0,255);} p.sample2 {background-color: rgba(0,0,255,1);} p.sample3 {background-color: rgba(0,0,255,0.5);} …

2014-05-03

Photoshopの行送り・行間からline-heightへの変換

photoshop css

Photoshopの行送りとCSSのline-heightの変換行送りとは文字の大きさ+次の段までの間隔を足した値段の始まりから、次の段までの長さこの例では、行送り30px 文字サイズ18px 行間隔12px line-heightへ変換する行送り÷文字サイズ = line-heightになる P{ …

2014-04-21

文字の間隔 letter-spacing

program css

letter-spacing 1文字の後の、次の文字までの間隔。値 normal または数値+単位(emやpx) .normal{ letter-spacing: normal; } .hiroi{ letter-spacing: 2em; } //*マイナスも有効*// .semainasu1{ letter-spacing: -0.2em; } .semainasu2{ letter-spacing: -…

2012-08-04

css 枠線

css

リンクを指定した画像に線が残る場合。点線のときはoutlineを疑う。線を指定するプロパティ border 上下左右の指定 outline 上下左右の区別なし対称が丸ければ、丸い線がつく borderとoutlineはそれぞれ別物。動作時を指定するセレクタ :focus フォームの…

2012-07-03

はてなブログのスタイル変更

css

元の画像 h1はbodyの直下。そろえたいサイズは、はてなヘッダーと、本文のブロック。文字サイズが基準でemが使われている余白はマージンとパディング幅は%指定されている ※基準になっている、文字サイズはブラウザではなくPC依存。変更したい箇所のセレ…

2012-06-11

header復習 1

css

同じ表示結果を、positionとfloatで配置。floatの場合ブラウザ表示 positionの場合ブラウザ表示 html <html lang="ja"> <head> <meta charset="UTF-8" /> <title>header1_float</title> <link rel="stylesheet" href="style_head01_f.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <h1 lang="en">Info…</h1></div></div></body></html>

2012-06-11

header復習2

css

同じ表示結果をfloatとpositionで配置。その２。ブラウザ表示ブラウザ表示 floatの場合 html <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style_head02_f.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <ul> <li id="li_a"></li></ul></div></div></body></html>

2012-06-11

マイナスのmargin自主学習

css

マイナスのマージン指定課題ファイルのアップロードに利用させてもらっているfreewebの一コンテンツ。見出しをグループ化しているdivの範囲をはみ出ている。見出しにマイナスのマージンを指定する。前にもあったけど、よくわからなかったので、真似してみ…

2012-06-08

確認テスト

css

フロートを使ったレイアウト確認テスト5/14 ソースコードブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-06-06

ナビゲーションまとめ

css program

CSSでリストをナビゲーションにするソースコードブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-06-06

ナビゲーションまとめ

css

CSSでリストをナビゲーションにするソースコードブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-06-05

サイトの構築ウォンツケーキ

css design html

サイトの構築ページ構成を図にする各ページの、共通部分を作る。(見出し、ナビゲーション、サイドメニュー）各ページ毎の、内容部分を作る。(コンテンツ）自分めも。次は・・・構成をつかむ。図にするとき。サイトが大きくなるほど、全体と個別になる部…

2012-06-05

サイトの構築ウォンツケーキ

css html

サイトの構築ページ構成を図にする各ページの、共通部分を作る。(見出し、ナビゲーション、サイドメニュー）各ページ毎の、内容部分を作る。(コンテンツ）自分めも。次は・・・構成をつかむ。図にするとき。サイトが大きくなるほど、全体と個別になる部…

2012-06-01

フォームに背景画像

css program html

検索フォームブラウザ表示 <htm lang="ja"> <head> <meta charset="UTF-8"> <title>検索フォーム</title> <style type="text/css" media="screen,print"> body{ font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳＰゴシック", sans-serif; font-size: 16px; } #serch{ marg…</meta></head></htm>

2012-06-01

フォームに背景画像

css html

検索フォームブラウザ表示 <htm lang="ja"> <head> <meta charset="UTF-8"> <title>検索フォーム</title> <style type="text/css" media="screen,print"> body{ font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳＰゴシック", sans-serif; font-size: 16px; } #serch{ marg…</meta></head></htm>

2012-05-28

position

css

基準にするのは何かを指定する(position) 値基準条件影響 static 本来の位置デフォルトなし relative 本来の位置から元位置に本来のスペース残る absolute 親要素から親要素static以外を指定本来のスペースはなくなる absolute ウィンドウから親要…

2012-05-27

CSS21 横ナビ

課題 css

見本ソースコードブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-27

CSS20 横ナビ

課題 css

見本ソースコードブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-27

CSS19 横ナビ

課題 css

見本ソースコードブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-27

CSS18 横ナビ

css 課題

見本ソースコードブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-26

CSS17縦ナビ

css 課題

見本例ブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-26

CSS16縦ナビ

css 課題

見本例ブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-26

CSS15縦ナビ

css 課題

見本例ブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-26

CSS14縦ナビ

css 課題

見本 :w200] 例ブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-26

CSS13縦ナビ

css 課題

見本例ブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

2012-05-26

CSS012縦ナビ

css 課題

見本例ブラウザ表示 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>