Movatterモバイル変換


[0]ホーム

URL:


Hiroyuki Ogawa, profile picture
Uploaded byHiroyuki Ogawa
PDF, PPTX3,064 views

デザイナーも知っておきたい HTML+CSSコーディングの最新常識

スタートアップの現場で求められるデザイナーのスキルとは? - Co-Edo Designers Talk #1のスライド。

Related topics:

Embed presentation

Download as PDF, PPTX
2012 年 4 月よりフリーランスとして独立。Webデザイン・コーディングの受託を中心に、雑誌への寄稿、最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。横浜在住。小川 裕之barchin  hiro.ogw「レスポンシブWebデザイン入門」「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4」執筆
https://peraichi.com/
http://sket.in/
Jade
https://peraichi.com/


Photo by Jeremy Keith
コーディング
<!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 designBrad 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.w<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/20y="0px" viewBox="0 0 400 400" enable-background="new<g><g><g><path fill="#E2E4E5" d="M379.2,19.5c-81-17.2c-2.2,4.2-4.5,8.4-6.7,12.7c-3.8,7.2-7.6,14v52.9c33.4,0,117.6-59.9,117.6-156.4C35</g></g><g><g><path fill="#F0F1F1" d="M148.2,329.1c-7.3,3.7C145.6,105.2,248.5-8.3,379.2,19.5C406.</g></g><g><path fill="#FFFFFF" d="M168.1,104.8c-33.8,37-64.3l33,33L378.7,19.4C295.2,1.9,224.9,42.6,168.1,</g><g><g><circle fill="#40C9E7" cx="308.5" cy="90.2" r=</g></g><g><g><path fill="#3E3E3F" d="M148.2,329.1c-7.3,3.7</g>
Webfontsの利用
Font Awesome PS
http://design-spice.com/2014/04/16/reducing-image-size/
component



デザイナーも知っておきたい HTML+CSSコーディングの最新常識

Recommended

PDF
2012: A Web Odyssey
KEY
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
PDF
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
PDF
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
KEY
HTML5での制作、いつから始める?
PDF
Wix study
PPTX
メディア工房サマーワークショップ「Webアプリ制作」1日目
PDF
知っておきたい「Web制作イマドキの注目ポイント」
PDF
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
レスポンシブWebデザインの基礎
PDF
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
PDF
HTML5とCSS3でWebが変わる!でも導入は簡単!
PDF
レスポンシブ+α 第12回WordBench大阪
PPTX
HTML5 on ASP.NET
PPTX
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
PDF
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
PDF
マークアップ講座 02 CSS
PDF
インラインSVGをつかって地図っぽいものをつくってみる
PDF
jQuery Performance Tips – jQueryにおける高速化 -
PDF
マルチデバイス対応のコーディング・マークアップのポイント
PDF
SVG MANIAX Ver.2 - Mars vanilla
PDF
レスポンシブWebデザイン【基礎編】
KEY
コーディングが上達するコツ
PDF
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
PDF
「html5 boilerplate」から考える、これからのマークアップ
PDF
レスポンシブWebデザイン【発展編】
PPTX
HTML + CSSで名刺作る!!!(アイマスハッカソン2024 ライトニングトーク用資料)

More Related Content

PDF
2012: A Web Odyssey
KEY
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
PDF
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
PDF
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
KEY
HTML5での制作、いつから始める?
PDF
Wix study
PPTX
メディア工房サマーワークショップ「Webアプリ制作」1日目
PDF
知っておきたい「Web制作イマドキの注目ポイント」
2012: A Web Odyssey
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
HTML5での制作、いつから始める?
Wix study
メディア工房サマーワークショップ「Webアプリ制作」1日目
知っておきたい「Web制作イマドキの注目ポイント」

Similar to デザイナーも知っておきたい HTML+CSSコーディングの最新常識

PDF
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
レスポンシブWebデザインの基礎
PDF
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
PDF
HTML5とCSS3でWebが変わる!でも導入は簡単!
PDF
レスポンシブ+α 第12回WordBench大阪
PPTX
HTML5 on ASP.NET
PPTX
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
PDF
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
PDF
マークアップ講座 02 CSS
PDF
インラインSVGをつかって地図っぽいものをつくってみる
PDF
jQuery Performance Tips – jQueryにおける高速化 -
PDF
マルチデバイス対応のコーディング・マークアップのポイント
PDF
SVG MANIAX Ver.2 - Mars vanilla
PDF
レスポンシブWebデザイン【基礎編】
KEY
コーディングが上達するコツ
PDF
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
PDF
「html5 boilerplate」から考える、これからのマークアップ
PDF
レスポンシブWebデザイン【発展編】
PPTX
HTML + CSSで名刺作る!!!(アイマスハッカソン2024 ライトニングトーク用資料)
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
レスポンシブWebデザインの基礎
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
HTML5とCSS3でWebが変わる!でも導入は簡単!
レスポンシブ+α 第12回WordBench大阪
HTML5 on ASP.NET
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
マークアップ講座 02 CSS
インラインSVGをつかって地図っぽいものをつくってみる
jQuery Performance Tips – jQueryにおける高速化 -
マルチデバイス対応のコーディング・マークアップのポイント
SVG MANIAX Ver.2 - Mars vanilla
レスポンシブWebデザイン【基礎編】
コーディングが上達するコツ
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
「html5 boilerplate」から考える、これからのマークアップ
レスポンシブWebデザイン【発展編】
HTML + CSSで名刺作る!!!(アイマスハッカソン2024 ライトニングトーク用資料)

デザイナーも知っておきたい HTML+CSSコーディングの最新常識

  • 2.
    2012 年 4月よりフリーランスとして独立。Webデザイン・コーディングの受託を中心に、雑誌への寄稿、最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。横浜在住。小川 裕之barchin  hiro.ogw「レスポンシブWebデザイン入門」「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4」執筆
  • 3.
  • 4.
  • 9.
  • 10.
  • 11.
  • 13.
  • 15.
  • 16.
    <!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="「現場のプロが教える
  • 17.
    <!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="「現場のプロが教える
  • 18.
  • 20.
  • 29.
  • 30.
    Good performance isgood designBrad Frost
  • 32.
  • 33.
  • 34.
  • 40.
  • 43.
    <?xml version="1.0" encoding="utf-8"?><!DOCTYPEsvg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/20y="0px" viewBox="0 0 400 400" enable-background="new<g><g><g><path fill="#E2E4E5" d="M379.2,19.5c-81-17.2c-2.2,4.2-4.5,8.4-6.7,12.7c-3.8,7.2-7.6,14v52.9c33.4,0,117.6-59.9,117.6-156.4C35</g></g><g><g><path fill="#F0F1F1" d="M148.2,329.1c-7.3,3.7C145.6,105.2,248.5-8.3,379.2,19.5C406.</g></g><g><path fill="#FFFFFF" d="M168.1,104.8c-33.8,37-64.3l33,33L378.7,19.4C295.2,1.9,224.9,42.6,168.1,</g><g><g><circle fill="#40C9E7" cx="308.5" cy="90.2" r=</g></g><g><g><path fill="#3E3E3F" d="M148.2,329.1c-7.3,3.7</g>
  • 45.
  • 48.
  • 51.
  • 53.
  • 57.

[8]ページ先頭

©2009-2025 Movatter.jp