デザイナーも知っておきたい html+cssコーディングの最新常識
TRANSCRIPT
2012 年 4 月よりフリーランスとして独立。
Webデザイン・コーディングの受託を中心に、雑誌への寄稿、
最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。
横浜在住。
小川 裕之barchin hiro.ogw
「レスポンシブWebデザイン入門」
「現場のプロが教えるHTML+CSSコーディングの最新常識
知らないと困るWebデザインの新ルール4」執筆
Jade
コーディング
<!DOCTYPE html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="ja"> <head> <meta charset="utf-8"> <meta property="og:image" content="http://design-spice.com/wp/wp-content/uploads/2015/04/tn_jyoshiki.jpg"> <meta property="og:title" content="「現場のプロが教える
<!DOCTYPE html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="ja"> <head> <meta charset="utf-8"> <meta property="og:image" content="http://design-spice.com/wp/wp-content/uploads/2015/04/tn_jyoshiki.jpg"> <meta property="og:title" content="「現場のプロが教える
• •
Animation
perfomance
Good performance is good design
Brad Frost
Director InfraDesigner FrontEnd
Director InfraDesigner FrontEnd
CSSの利用
SVGの利用
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"> <g> <g> <g> <path fill="#E2E4E5" d="M379.2,19.5c-81-17.2-151.4,19.9-211.1,85.3c-94.8,0-156.2,83.4-156.2,117.6h52.9l12,16 c-2.2,4.2-4.5,8.4-6.7,12.7c-3.8,7.2-7.6,14.6-11.2,22.1l66.9,66.9c7.5-3.6,15-7.2,22.3-11c3.8-1.9,7.6-3.9,11.3-5.9l16.6,12.4 v52.9c33.4,0,117.6-59.9,117.6-156.4C359.6,172.1,396.5,100.9,379.2,19.5z"/> </g> </g> <g> <g> <path fill="#F0F1F1" d="M148.2,329.1c-7.3,3.7-14.8,7.4-22.3,11L59,273.2c3.6-7.4,7.4-14.8,11.2-22.1 C145.6,105.2,248.5-8.3,379.2,19.5C406.9,150.2,295.2,254.3,148.2,329.1z"/> </g> </g> <g> <path fill="#FFFFFF" d="M168.1,104.8c-33.8,37-64.3,83.1-91.3,133.6l0,0c-0.2,0.4-5.5,10.5-6.7,12.7c-3.8,7.2-7.6,14.6-11.2,22.1 l33,33L378.7,19.4C295.2,1.9,224.9,42.6,168.1,104.8z"/> </g> <g> <g> <circle fill="#40C9E7" cx="308.5" cy="90.2" r="47.1"/> </g> </g> <g> <g> <path fill="#3E3E3F" d="M148.2,329.1c-7.3,3.7-14.8,7.4-22.3,11L59,273.2c3.6-7.4,7.4-14.8,11.2-22.1L148.2,329.1z"/> </g>
Webfontsの利用
http://design-spice.com/2014/04/16/reducing-image-size/
component
