俺的フロントエンド開発
7. CSSプリプロセッサ • SASS • インデントベース • 記法が厳格 • {};が不要 • SCSS • インデント無視 • CSSを入れ子と変数に対応させ た感じ • CSSをそのままSCSSプリプロ セッサに わせてもエラーでな い • LESS • SCSSの記法違い、みたいな 感じ • 使ったこと無いので分から ない • Stylus • なんかもう自由にかけるや つっぽい • 使ったこと無いので分から ない 8. SASS @import “compass” body margin: 0 padding: 0 #main border: 1px solid #000 +border-radius( 4px ) ul &.list li display: inline-block body{ margin: 0px; padding: 0px; } #main{ bord
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
第一回Apache Cordova勉強会( https://atnd.org/events/57562 )での発表資料
[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！ デモページ：2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
![[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS](https://cdn-ak-scissors.b.st-hatena.com/image/square/811172ca6306ab35b8c730bf9af1a2f005e4fab0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092203.gif)
Markdownでプレゼン用スライドをつくる方法いろいろ - Qiita
勉強会での発表資料を作成するにあたり、まずMarkdownで話そうと思うことを適当にメモしてるうちに、なんか発表資料このままで良くない？と思えてきました。別に レイアウトや配色のセンスに自信があるわけでもない し。。 で、最初 "markdown pagination" でググってみるとあまりパッとしたのがなかったのですが、"markdown presentation" にしてみると出るわ出るわ。しかもどれも結構よさげ。 というわけで出てきたものをメモがてら書き留めておきます。結論からいうとググって一番上に出てきた "Remark" が今回の要件に（ほぼ）マッチしていたので、他はまだ使ってません。 Remark 長所 GitHubでソース公開されてる 無料 ログイン不要 不満があれば自分で修正してpull request送れる Swipe 長所 テンプレートやフォントが複数用意されてる（っ
Private Presentation
Private content!This content has been marked as private by the uploader.
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
Private Presentation
Private content!This content has been marked as private by the uploader.
Markdownでスライドを作る決定版！「Deckset」が非常に良かった話 - 5.1さらうどん
スライドを作りたい photo by James Jordan 勉強会に出席するような意識の高い読者諸賢であれば、各々様々な方法でスライドを作っているかと思います。 僕は、markdownを使って楽にカッコイイスライドを作ろうと、今までいろいろ試行錯誤してきたのですが、どれも僕の要求を満たすような感じではなくて、結局Keynoteを使ってせっせとスライドを作っていました。 Decksetが凄く良い Markdownからスライドショーを生成してくれる「Deckset」というMac用のアプリを2000円も出して買ってみたのですが、凄く良かったのでご紹介します。 https://itunes.apple.com/jp/app/deckset-turn-your-notes-into/id847496013?mt=12&uo=4&at=10l8JW&ct=hatenablog Deckset fo
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの？
27. CSSの中身を覗いてみる .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; }
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
HTML5&API総まくり
6. • 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化 • time要素、hgroup要素、data要素 （WHATWG HTMLのみ）などが争 点。 HTML5マークアップ 7. • リッチな入力フォーム、新たなフォーム要素、宣 言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel color HTML5 Forms 8. • HTMLにマシンリーダブルなデータを埋 め込むための仕様 <div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> HT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告