SlideShare a Scribd company logo
1 of 59
Download to read offline
HTML/CSSを効率的にする
メタ言語とツールのアレコレ
クリ☆ステ vol.14
自己紹介
久保知己
1985年生まれ。 HTML/CSSからCMSの
構築まで、様々なサイトの制作に携わり、
2014年にまぼろしに入社。
「Web Design KOJIKA17」を運営中
めんどうくさい
効率化のキーワード
「めんどうくさい」と思うこと
● 画像100枚をリサイズする
● コーディングの確認時に、更新ボタンを押す
● 同じようなコードを、ひたすらコピペ
「めんどうくさい」と思うことは、
反復や繰り返し作業が多い。
HTMLの「めんどうくさい」
閉じタグ
<div class="a">
<h1>Title</h1>
<div class="b">
<h2>Subtitle</h2>
<div class="body"><p></p></div>
<div class="body"><p></p></div>
</div>
</div>
閉じタグのコメント
<div class="a">
<h1>Title</h1>
<div class="b">
<h2>Subtitle</h2>
<div class="body"><p></p></div><!-- /.body -->
<div class="body"><p></p></div><!-- /.body -->
</div><!-- /.b -->
</div><!-- /.a -->
リストの作成
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
CSSの「めんどうくさい」
セレクタ
.header {}
.header .logo {}
.main h2 {}
.main .body {}
.main .body a {}
.footer .nav {}
.footer .copyright {}
プロパティや値が長い
display: inline-block;
display: table-cell;
background-color: #fff;
text-decoration: underline;
letter-spacing: 0.1em;
line-height: 1.4;
ベンダープリフィックス
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
グラデーションの構文 や Flexible Box
background: gradient(linear, left top, left bottom,
color-stop(0%, #000), color-stop(100%, #fff));
background: linear-gradient(top, #000, #fff);
background: linear-gradient(to bottom, #000, #fff);
display: box;
display: flexbox;
display: flex;
Emmet
Emmet
● Zen-codingの後継
● HTML/CSSを強力にサポート
● エディタの拡張機能
Emmetの対応エディタ
● Sublime Text
● Atom
● Coda
● Komodo Edit
● Notepad++
● Brackets
● Adobe Dreamweaver
● Vim
● WebStorm
● PhpStorm
● Emacs
Emmet デモ
● 略語の展開(Expand Abbreviation)
● フィルター(|c)
● 略語の包括処理(Wrap with Abbreviation)
● 四則演算(Evaluate Math Expression)
● 要素の削除(Remove Tag)
● 属性などの選択(Select Item)
Emmetのその他の機能
● 画像サイズの取得 (エディタによる)
● 文字列の結合
● 空の要素や属性に、カーソル移動
● 選択範囲の拡張
● HTML/CSSの主要なメタ言語に対応
HTML/CSSメタ言語
HTML/CSS Pre-processors
メタ言語の種類
● HTML
○ Haml
○ Jade
○ Slim
● CSS
○ Sass
○ Less
○ Stylus
メタ言語とは
メタ言語(メタげんご、英 Metalanguage)とはある言語について何らかの記述を
するための言語である。それだけでは具体的な利用に関する目的をもっておら
ず、特定のルールを加えることで具体的な応用として利用可能となる。
メタ言語 - Wikipedia
CUI(Character User Interface)
Task Runner - CUI
Grunt gulp
GUI(Graphical User Interface)
CodeKit(Macのみ) Prepros App
コンパイル
メタ言語
Pre-processors
HTML
CSS
GUI
Codekit
Prepros
CUI
Grunt
gulp
コンパイル
メタ言語
Pre-processors
HTML
CSS
GUI
Codekit
Prepros
Codekit
Prepros
Grunt
gulp
CUI
コンパイル
メタ言語
Pre-processors
HTML
CSS
GUI
Codekit
Prepros
CUI
Grunt
gulp
画像と似てる
AI
PSD
PNG
JPEG
PNG
GIF
SVGCodekit
Prepros
illustrator
Photoshop
Fireworks
HTMLメタ言語
HTML Pre-processors
基本的なHTMLメタ言語の特徴
● インデントによる階層表現
● HTMLパーツや外部データの読み込み
● 変数やif文などの利用
Syntax - Jade
#wrap
.main
h1 タイトル
p
| Lorem ipsum dolor sit amet.
br
| Deleniti veniam cupiditate numquam pariatur.
.side
ul.nav
li
a(href="/") home
CSSメタ言語
CSS Pre-processors
主要なCSSメタ言語
● Sass (2007年)
● Less (2009年)
● Stylus (2011年)
Sassの記述
● Sass記法 ● SCSS記法 (2010年)
.foo {
color: #f00;
.demo {
color: #fff;
}
}
.foo
color: #f00
.demo
color: #fff
Sassの特徴
● 変数
● 入れ子
● Mixins / Include
● Extend
● 制御構文(if, for, while)
● Function
変数 - Sassの特徴
$color: #f00;
$bg: #fff;
.foo {
color: $color;
background: $bg;
}
.foo {
color: #f00;
background: #fff;
}
CSS
入れ子 - Sassの特徴
.foo {
color: #000;
.demo {
color: #f00;
}
}
.foo {
color: #000;
}
.foo .demo {
color: #f00;
}
CSS
Mixins / Include - Sassの特徴
@mixin box($params) {
-moz-box-sizing: $params;
box-sizing: $params;
}
.foo {
@include box(border-box);
color: #000;
}
.foo {
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #000;
}
CSS
Extend - Sassの特徴
%btn {
border-radius: 4px;
color: #fff;
}
.btn-a {
@extend %btn;
background: #f00;
}
.btn-b {
@extend %btn;
background: #ff0;
}
.btn-a, .btn-b {
border-radius: 4px;
color: #fff;
}
.btn-a { background: #f00; }
.btn-b { background: #ff0; }
CSS
制御構文(if, for, while) - Sassの特徴
$class-margin: true;
@if($class-margin) {
@for $i from 1 through 5 {
$n: $i * 8px;
.m-#{$n} {
margin: $n;
}
}
}
.m-8 { margin: 8px; }
.m-16 { margin: 16px; }
.m-24 { margin: 24px; }
.m-32 { margin: 32px; }
.m-40 { margin: 40px; }
CSS
Function - Sassの特徴
.foo {
color: rgba(#f00, 0.4);
color: lighten(#f00, 0.4);
color: lighten(#f00, 10);
color: darken(#f00, 10);
}
.foo {
color: rgba(255, 0, 0, 0.4);
color: #ff0202;
color: #ff3333;
color: #cc0000;
}
CSS
CSSメタ言語を使って効率化するなら
まずは「変数」を覚えよう
変数 - Sass
$color: #f00;
.foo {
 color: $color;
}
値変数
変数を使った応用
● 一括で色の変更
● 色彩を操作する関数
● Mixins
変数やMixinsの使い方を覚えたら、
ライブラリを使ってみよう
Sass Framework & Mixin Library
Compass Refills(Bourbon)
Compassの機能
● リセットCSS
@include global-reset();
● ブラウザのサポート
$graceful-usage-threshold: 0.1;
● CSSスプライトの生成...など
Compassの利用方法
@import 'compass';
.foo {
@include border-radius(4px);
}
@include を付けるのが
ちょっとめんどうくさい
普通のCSS3を書くだけで、
ベンダープリフィックスを
付けれたらいいのに。
autoprefixer
autoprefixer
Pre-processors
Sass
(Compass)
Less
Stylus
CSS Post-processors
cssmin
autoprefixer
csso
bless
Pleeease
autoprefixer デモ
おさらい
今回紹介したツール
● Emmet
● コンパイラ(CodeKit, Prepros...)
● HTMLメタ言語(Haml, Jade, Slim)
● CSSメタ言語(Sass, Less, Stylus)
● autoprefixer
Pre-processors
Haml, Jade
Slim
Sass, Less
Stylus
HTML
CSS
Post-processors
autoprefixer
Pleeease
Emmet
Task Runner
Grunt
gulp
GUI
CodeKit
Prepros
Pleeease デモ
ありがとうございました

More Related Content

What's hot

CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
 

What's hot (20)

Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
 
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
 
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
 
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作るBootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
 
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
 
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 
WordBench 東京 とは
WordBench 東京 とはWordBench 東京 とは
WordBench 東京 とは
 

Viewers also liked

Viewers also liked (10)

Emmet入門
Emmet入門Emmet入門
Emmet入門
 
Emmetの使い方
Emmetの使い方Emmetの使い方
Emmetの使い方
 
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
 
Sass超入門
Sass超入門Sass超入門
Sass超入門
 
金融業界でよく使う統計学
金融業界でよく使う統計学金融業界でよく使う統計学
金融業界でよく使う統計学
 
Node.js入門
Node.js入門Node.js入門
Node.js入門
 
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときNode.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
 
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするGulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
 

Similar to HTML/CSSを効率的にする メタ言語とツールのアレコレ

CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
Taku AMANO
 
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Koji Ishimoto
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
 

Similar to HTML/CSSを効率的にする メタ言語とツールのアレコレ (20)

Css preprocessorの始めかた
Css preprocessorの始めかたCss preprocessorの始めかた
Css preprocessorの始めかた
 
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
 
Sass/Compass講習会
Sass/Compass講習会Sass/Compass講習会
Sass/Compass講習会
 
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
 
Sassをはじめよう!
Sassをはじめよう!Sassをはじめよう!
Sassをはじめよう!
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
First sass
First sassFirst sass
First sass
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
 
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
 
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
 
CSS Preprocessor Hands-on
CSS Preprocessor Hands-onCSS Preprocessor Hands-on
CSS Preprocessor Hands-on
 
Less - first step
Less - first stepLess - first step
Less - first step
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
 

More from 知己 久保

今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
知己 久保
 

More from 知己 久保 (7)

L
LL
L
 
ラクするCSSツール
ラクするCSSツールラクするCSSツール
ラクするCSSツール
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
 
自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ
自動化のことはじめ - 第12回HTML5ビギナーズ

自動化のことはじめ - 第12回HTML5ビギナーズ

 
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
 

Recently uploaded

研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
 

Recently uploaded (14)

部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 

HTML/CSSを効率的にする メタ言語とツールのアレコレ