/// BANGBOO BLOG ///

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31


June 2016 List
RWD by HTML5 on Jun 07, 2016 8:28 PM
Big D on Jun 05, 2016 6:45 PM

June 7, 2016

RWD by HTML5

■HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charSet="utf-8"/>
<title>Title</title>
<meta name="description" content=""xxx/>
<link rel="stylesheet" href="xxx.css"/>
<script src="js.php"></script>

/// Resource Hintsによる表示高速化
https://blog.members.co.jp/article/33474
dns-prefetch、preconnect、prefetch、prerenderの4つの要素、やりすぎよくないが
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//example.com">
 <link rel="preconnect" href="//cdn.example.com" crossorigin>
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
 <link rel="prefetch" href="/library.js" as="script">
<link rel="prerender" href="//example.com/next-page.html">

/// 他
 大きめな画像でもRetina端末で見るとぼやけてしまうというのでSVG、大きい画像だと容量も食う
 IMGタグやCSSだとSVG形式ファイルに対してJavaScript等で一切操作ができない、objectならマウスオーバ等データにイベントを含めておける
 <img src="logomark.svg" width="32" height="32">
 <object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object>
 <svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
  <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
 </svg>

■OGP
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
 TOPページであれば上の「website」、TOP以外のページでは下の「article」を使う、fbはFacebook用

<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />

<meta property="fb:app_id" content="App-ID(15文字の半角数字)" />

<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ツイッターユーザー名" />

他にも細かい要素がある
https://ferret-plus.com/610

OGP画像確認
http://ogimage.tsmallfield.com/
ツイッターカード確認
https://cards-dev.twitter.com/validator

■CSS
CSSレイアウト(Grid、Float)
https://www.bangboo.com/cms/blog/page_327.html
https://www.bangboo.com/cms/blog/page_18.html
CSSセレクター
https://www.bangboo.com/cms/blog/page_152.html
ブラウザ間の問題
https://www.bangboo.com/cms/blog/page_184.html
https://www.bangboo.com/cms/blog/page_19.html

/// calc は計算ができるのでレイアウトもできる
.foo {
    width: calc(100% - 50px);
}
他にもいろんな計算が、単位は要調査
.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

/// @supports は機能クエリ、機能があるかないかでCSS適応を変えられる
https://coliss.com/articles/build-websites/operation/css/css-supports-how-to-works.html

/// グラデーション
http://www.htmq.com/css3/linear-gradient.shtml
http://www.css-lecture.com/log/css3/css3-gradient.html
https://qiita.com/yasumodev/items/9ccac31860c31ce24a13
 webkit系:Safari/Chrome, Moz系:Firefox
#gMenu .menu > li > a{
 background-color:#006600;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006600), to(#003300));
 background: -moz-linear-gradient(#006600, #003300);
 background: linear-gradient(#006600, #003300);
}

■RWD
ビューポート <meta name="viewport" content="width=device-width, initial-scale=1">
メディアクエリ CSS側に@media screen and (max-width:767px){
相対サイズ指定
 max-width: 100%; ではみ出るのを押さえる
  → https://www.homepage-tukurikata.com/css/max-width.html
  maxとminの一般的な使い方→ https://saruwakakun.com/html-css/basic/max-min-width

liを使ってナビやパンくずを表現し、サイズでスタイルを変える
Divを使ってパーツを表現し、サイズでスタイルを変える、レイアウトを変える(Floatの流れ、Grid等)

/// srcset と sizes による画像切り替え
https://www.tagindex.com/html5/embed/img_srcset_sizes.html
https://laboradian.com/img-srcset-sizes/
https://terkel.github.io/srcset-sizes/
https://qiita.com/taichi0514/items/7ffc93b8b4d0f349e9b6

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(max-width: 1280px) 100vw, 1280px" alt="a">
ビューポートの幅が1280pxまでは100%の幅で、それ以上の場合は1280pxの幅で画像を表示します

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(max-width: 420px) 100vw,
 (max-width: 800px) 70vw, 50vw" alt="a">
2つのブレイクポイントを設定し、画像の表示幅が3段階で変化するようにしています

<img src="image/small.jpg" srcset="image/small.jpg 1x,
 image/medium.jpg 2x" alt="a">
一般的なディスプレイでは small.jpg、高画素密度のディスプレイでは medium.jpg が使用されます

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(min-width: 600px) calc(100vw - 300px),
 100vw" alt="a">
表示領域の幅が600px以上ある場合はサイドバー用の余白(300px)が入り、それ以外の場合は幅100%で画像が表示されます

ブラウザは上から見ていって最初に合致したものを採用
メディアクエリーで場合分けする場合はwidth属性を指定しない事、指定すると場合分けされない
指定するサイズの単位は、px, em, vw など、但し% は使えない
em は親要素のfont-sizeプロパティの値を1としたときの大きさ、rem はルート/htmlに対する
ピクセル密度記述子は (1x や 2x など)により指定
実際のピクセルでのサイズ単位は w で指定、スマホやRetinaは物理ピクセル数が違い3pxを1pxで扱う等で
vw ビューポートの幅に対する割合
vh ビューポートの高さに対する割合
vmin ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax ビューポートの幅と高さのうち、値が大きい方に対する割合

相対単位「px」「ex」「em」「rem」
絶対単位「ch」「cm」「mm」「q」「in」「pt」「pc」「mozmm」「vw」「vh」「vmin」「vmax」

↓使うならこんな感じ?ブラウザサイズで読み直しがなかったり、preloadが必要だったり、%でいいんじゃ?
<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="100vw"
     alt="A rad wolf" />

<img srcset="img-320w.jpg 320w,
             img-480w.jpg 480w,
             img-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="img-800w.jpg" alt="a">

POLY シンプル
 http://treehouse-code-samples.s3.amazonaws.com/poly/index.html
normalize.css
 ブラウザごとの要素の相違を吸収

レスポンシブウェブデザイン?テンプレートを使えば?(有料でも無料でも商用可でも)
https://ferret-plus.com/3312
http://photoshopvip.net/109116
https://www.site-convert.com/archives/1310
https://free-hp.net/
https://liskul.com/homepage-template-27631
https://popo-design.net/template/ シンプル

Posted by funa : 08:28 PM | Web | Comment (0) | Trackback (0)


June 5, 2016

Big D

http://goo.gl/xeQkcR

ターニングポイントなのは明らかだ。過去の価値観を全て破棄して一から知識を構築する。というように見せかける。で結局フォロワーが得をするのか、あるいはコミュニズムか

想定モデル→実証モデル、事前に想像したマーケから実証をしつつ進めるマーケ
反応した人がターゲットである
SNS反響→マスor他チャネル 実証しながら変更を随時行う
CRMと広告が融合
1to1マーケの実現
 プロモーションを変える(購買履歴、行動履歴、つながり)

対策の検討(問題の原因調査と解決策がKKD:経験、勘、読経から変わる)

今まで分析されていなかったデータを使う
医療、小売、製造、公共で価値を生む(効率化、)
リアルタイム化(リアルタイムで入力、リアルタイムで出力)

---------------------------------------------

問題 > 仮説 > 解決策
 コンピュータが仮説を立てる、文脈も発見する
欲しいデータはサイトかセンサーで取れる
Webでニーズ取りをやって結局何が分かったか?
 →行動履歴を取ってセグメント
 →習慣化(メルマガ、訪問
 →ブレーンウォッシュ(トップダウン、ボトムアップ)
 →楽天エコシステム: 安売と囲い込み
 →リターゲット(ストーカ、つきまとい、ガスライティング
俺がアルゴを開発
業界の保身より、ベーシックインカムにして進化、効率化を選ぶ方が

Posted by funa : 06:45 PM | Web | Comment (0) | Trackback (0)


PhotoGallery


TWITTER
Search

Mobile
QR for cellphone  QR for smart phone
For mobile click here
For smart phone click here
Popular Page
#1Web
#2Hiace 200
#3Gadget
#4Column
#5RSS Radio
#6Ressentiment
#7Being The Ideal Boss
#8Estimation
#9Flavor
#10PC SPEC 2007.7
#11Watch Out
#12Darwinian Theory Of Evolution
#13Doing?
#14Re-install my OSXP
#15Europe
#16Make your front wheel right
#17Cache
#18通話SIM
#19セレブ
#20GoogleMap Moblile
#21Plasticity
#22People never say truth, Just do it, observe them, Anything is impossible
#23The black sheep to the black ship
#24The team that always wins
#25Optimost
#26Who's BAT? (Batch file)
#27Automobile Inspection
#28α7Ⅱ
#29Detected as bad site by virus company
#30Windows env tips
#31/// BANGBOO BLOG /// From 2016-03-01 To 2016-03-31
#32Ora Ora Ora Ora Ora
#33ahe-ahe is goooood for your brain
#34Summer time blues
#35SN
#36Win7 Insco
#37Great games before VR
#38無料ストレージ
#39RAMちゃ~ん
#40Wifi security camera with solar panel & small battery
#41ライブ
#424 Pole Plug
#43I want to ride my bicycle
#44System designing
#45It tests you
#46Hiace oil change
#47/// BANGBOO BLOG /// From 2012-08-01 To 2012-08-31
#48Bike
#49Norton Internet Security
#50F☆ck CSS
#51ZETA Pivot
#52Fail Safe & Fault Tolerance
#53株式取引モバイルサイト - TOKIO Shock Exchange
#54CSS Selectors
#55Shooting star
#56Information privacy & antispam law
#57Contaminated
#58映像制作
#59/// BANGBOO BLOG /// From 2015-08-01 To 2015-08-31
#60Sharpen up
#61角印
#62Google Sitemap
#63Tools - free icon etc
#64Bank transfer fee
#65Positive
#66Oxcelo
#67Victorinox PLI traveller
#68Ant
#69XSS, CSRF, JSOP, SSO
#70Politics
#71Emancipation Proclamation
#72Street fighter 4
#73/// BANGBOO BLOG /// From 2016-07-01 To 2016-07-31
#74Fork OH
#75My mic
#76ウェブサイトサムネイルAPI
#77Big D
#785-year-old shit
#79True April Fool
#80Spy Extraction
#81ApacheBench
#82/// BANGBOO BLOG /// From 2017-12-01 To 2017-12-31
#83Tora Tora Tora
#84Engine OH
#85After Effects
#86The beginning of CSSレイアウト
#87Online softwares
#88Rope
#89PC SPEC 2011.10
#90Cisco Catalyst
#91Photo Boo
#92How to make a bomb - 爆弾の作り方
#93着メロの掲載っていくらかかんの?
#94Assertive Behavior
#95Movable Type
#96Personal Information Privacy Act
#97Link Bait
#98Availability
#99One of the net service TVCM
#100/// BANGBOO BLOG /// From 2014-07-01 To 2014-07-31
Category
Recent Entry
Trackback
Comment
Archive
<     June 2016     >
Sun Mon Tue Wed Thi Fri Sat
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Link