web013　RWD(Responsive Web Design)の考慮ポイント

Responsive

RWDの考慮ポイントグリッド、リキッド、複合など、状況により判断する。■考慮ポイント・viewportの設定(html:head) ・Fruid Imageの設定(css:reset) ・Media Queriesの設定(css) ※１ーfloatの解除ーfont-sizeの調整ーbackground-imageのサイズ調整ーナ…

2017-04-29

JavaScript001　Mathオブジェクト

JavaScript Object

Mathオブジェクトの使用例 Mathオブジェクトは、数学的な操作を行うメソッドや、円周率などの定数などのプロパティをもっている。Math.random(); [0,1) 、……つまり、0 以上 1 未満の範囲で疑似乱数を返します。 var r = Math.random(); console.log(r); // …

2017-04-28

web014　HTML・CSSのテンプレート（スニペット）

html css

HTML・CSSのテンプレート（スニペット）新規サイトを作成する場合のテンプレートに使用しているものです。■コード <html lang="ja"> <head> <meta charset="utf-8"> <title>TEMPLATE</title> <meta name="Description" content="title,h1,pなどのキーワードを含めての紹介文"> <meta name="viewport" content="width=device-width"> </meta></meta></meta></head></html>

2017-04-28

website001　いい感じのウェブサイト〜Responsive〜

website Responsive

いい感じのウェブサイト〜Responsive〜レスポンシブの観点で印象に残ったものを記載していきます。■Responsive relation.main.jp・fluidImageのポジショニングが絶妙だと感じました。 1050pxのブレークポイントで、メインキャラの顔のアップから入り、だん…

2017-04-28

web012　Web表示速度の理想値

Performance

Web表示速度の理想値 Performanceタグでは改善の手助けとなる観点や技術を記載していきます。■理想値目標：2秒以内とする。理由：根拠となるデータ（要約）・3秒以上かかるページからは40％が離脱する・1秒の遅れが16％の顧客満足度を低下させる・52%ペ…

2017-04-28

Illustrator001　文字を加工・変形する方法

Illustrator

1.テキストツールで文字を入力 2.右クリック（コンテキストメニュー）から「アウトラインを作成」する。※文字を図形化 3.変形した文字を選択し、右クリック（コンテキストメニュー）から「グループ解除」以上 ※以降はアウトラインモード(cmd+Y)、ダイレクト…

2017-04-22

webめも011　ナビゲーションの中央寄せ(2パターン)

css

サンプル1.ボタン間に余白をつくる場合 liをインライン要素化してtext-align:center;で中央寄せ。※ブロック要素の中央寄せは「margin: Xpx auto;」 ※この方法で余白をなくすテク・htmlのliの改行を無くし１行で記述すると余白を詰めることは可。可読性下が…

2017-04-22

web005 各種参考サイト

Reference

■チェッカー HTML 5 Outliner The W3C Markup Validation Service The W3C CSS Validation Service ■色カラーリング Sphere: Color Theory Visualizerグラデーション Ultimate CSS Gradient Generator - ColorZilla.com shade 日本の伝統食 NIPPON COLORS -…

2017-04-20

webめも009 text-shadow,box-shadowによる装飾

css

■結果(text-shadow) ■コード html <section class="textShadow"> <h3>text-shadow: x軸 y軸ぼかし幅色 ;</h3> <ul class="sample font"> <li>Drop Shadow</li> <li>Grow</li> <li>Bevel</li> <li>Embos</li> <li>Stroke</li> <li>Neon</li> </ul> </section> css h3 { padding: 20px; } .sample>li { margin: 5px; padding: 5px; bord…

2017-04-18

web002 CSS Sprite

html css Performance

CSSスプライトの１事例■手番 ※Illustratorで作成したスプライト用の画像サイズ980x110 ※1ボタンは140x50 ・ナビゲーションとしてリスト作成(html) ・background-imageで画像を指定(css) ・bakcground-positionで画像の位置指定(css)■コード html <div class="header"> <h1><img src="img/h1-logo.png" alt="hatena"></h1> <ul class="nav"> <li id="top"><a href="#">トップペ</a></li></ul></div>…

2017-04-17

web001 動画の埋め込み

html

■手番 ***サービスの貼り付け・Youtube,GoogleMapから貼りたい動画までいく。・共有＞埋め込みコード＞コードをコピペ。 <iframe width="560" height="315"src="対象のURL" frameborder="0" allowfullscreen></iframe> ※height,widthは変更可・htmlに貼り付ける。 ***動画ファイルの貼り付け <video autoplay controls width="320" height="240"> <source src="pastaSauce.mp4"></source></video>