[CSS][モバイル]Retina対応

CSS モバイル

Retinaディスプレイ対応デバイスピクセルとCSSピクセルデバイスピクセルとは…デバイス（端末）ごとのピクセル数 CSSピクセルとは…3.5インチの画面上で表現されるサイズＣＳＳを記述する際は、基本的にＣＳＳピクセルの数を基準に設計する「デバイスピク…

2015-08-05

[html][css] 動画を表示する

html css

videoタグで背景いっぱいに動画を表示

2015-08-04

[HTML][CSS]スマホ対応

HTML CSS

head部の記述 meta name = viewportの記述 <meta name = "viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> content="width=device-width"→デバイスの横幅で描画するように指定 initial-scale→横向き (Landscape mode) にしたとき、iphoneの自動拡大機能を停止 user-scalable…ピンチで拡大するかの有無 meta name = format</meta>…

2015-07-14

[HTML][CSS]実践的コーディングにおける注意点

HTML CSS

全般 HTML HTML内で、imgのwidth,heightは念のためつけておくこと。サイズを指定する際は奇数にならないよう注意すること。インデントのルールを統一すること。（タグで統一、半角スペ2つで統一など…）機種依存文字(半角かな、囲み数字、＜＞など)は数値…

2015-07-07

[CSS]7/7授業スマホ対応、アニメ効果

CSS

スマホ対応固定カラムレイアウトをフルードグリッドにする - WEBサイト制作の勉強yachin29.hatenablog.com CSS3を利用したアニメ効果背景をグラデーションで色変化。これに文字部分だけ透過させたpngを置くと、文字部分を色変化させたりできる。 backgrou…

2015-07-01

[基礎知識][CSS][モバイル]レスポンシブデザインの基本

基礎知識 CSS モバイル

レスポンシブデザインとは Responsive Web Design PCからスマホまで、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現する手法スクリーンサイズを基本にCSSでレイアウト調整する例：キリンKIRIN｜キリン OSやデバイスをUAで判別して個別サイトに…

2015-06-15

[Photoshop][CSS]グリッドレイアウトのデザイン(Photoshopでスライスの利用)

Photoshop CSS

確実なスライス方法ガイドを引くガイドに沿ってスライスは余計なスライスが生成されるため使用しない。スライスツールで、グリッドにスナップを有効化し、それぞれをスライス、命名する。 Web用に保存画面上でスライスを選択すると、それぞれに保存画質…

2015-05-08

[HTML][CSS][自由課題]企業系サイトを制作②

HTML CSS 制作物

説明自主課題として制作した企業サイトコピー、ロゴ等設計写真は今回パブリックドメインのものを使用テーマカラー青、アソートカラーピンク・黄バリデーション済

2015-05-07

[HTML][CSS][自由課題]企業系サイトを制作①

HTML CSS 制作物

サイト説明授業課題で制作した企業サイト写真を自由に選び、それを元にカラー設計写真は今回パブリックドメインのものを使用テーマカラー青、アソートカラーオレンジバリデーション済

2015-04-20

[Web][HTML][CSS][デザイン]Webサイト構築(4/8)

Web HTML CSS デザイン

はじめに今日は一つのスタイルシートでデザインを制御する複数のWebページを作り、階層構造を作ってそれらをリンクしました。製作手順ページの固有性を作る(CSSシグネチャ) その他CSS知識：CSSで画像の角を丸くするその他デザイン知識：modernとは何か …

2015-04-18

[CSS] [CSS]背景画像の使い方、float/clear/overflowの関係(4/6)

CSS

はじめに floatとインライン要素・ブロック要素の使い分けにより、１ページの制作はかなり自由度を増しました。引き続き演習を重ねながら、学習を進めています。 background画像の使い方 float/clear/overflowの関係アキュートアクセントの入力今日のポイ…

2015-04-17

[Web][CSS]画像置換の方法論(4/3)

Web CSS

はじめにタイトルテキストなどの画像置換はよく使用しますが、SEO対策を念頭に置くと一筋縄ではいかない問題になってきます。 CSS - 画像置換の種類とその方法 - Go-Nextブログ強引に非表示すると、スパムとみなされ検索エンジンから蹴られるおそれがある…

2015-04-16

[CSS]リストの親子関係を利用したナビゲーションの制作(4/2)

CSS

ナビゲーションブロックとはナビゲーションは、各ページへのリンクをまとめたものでありリンク集のひとつで、項目を列挙したものといえます。リンクの価値は同質なので、番号のない箇条書きとして扱います。リストをナビゲーション - Webデザインの勉強 | …

2015-04-15

[CSS] [CSS]floatを使った２カラムレイアウトの演習

CSS

はじめにこういうレイアウトを作ってみたい。 <body> <div id="header"> <p>Header</p> </div> <div id="nav"> <p>Nav</p> </div> <div id="wrapper"> <div id="content"> <p>Content</p> </div> <div id="sidebar"> <p>Sidebar</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </body> </html> /* content */ body{ text-align: cen…