音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】
スマートフォンからウェブサイトを閲覧するひとが増えたことで、あらゆる端末に対応するレスポンシブなWebサイトが主流となっています。 しかし、「HTML5でWebサイトをゼロから作成するのはちょっと、。」というときは、HTML5でできたテンプレートを活用してみましょう。 この記事では、無料ダウンロードできるオススメのHTML5テンプレートをまとめてご紹介します。 2020年に公開されたものを中心に最新テンプレートを揃えています。Bootstrapフレームワークを利用しているものも多く、手軽にカスタマイズできる点もポイント。あらゆる業種にマッチする、お好みの無料HTMLテンプレートを探してみましょう。 商用利用もできる無料HTMLテンプレートまとめ Switch あらゆるデバイスでの表示に対応するランディングページ向けテンプレート。ダークモード切り替えも可能で、イラストを背景として効果的に活用
Initiating the Hack (Pure CSS Sombra)
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Web制作にすごい役立つ！無料で使える便利なオンラインツールのまとめ -Tiny Helpers
CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常に便利です。
Accessible Rich Internet Applications (WAI-ARIA) 1.0 (W3C Recommendation 20 March 2014)
Accessible Rich Internet Applications (WAI-ARIA) 1.1 W3C Recommendation 14 December 2017 This version: https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/ Latest published version: https://www.w3.org/TR/wai-aria-1.1/ Latest editor's draft: https://w3c.github.io/aria/ Implementation report: https://w3c.github.io/test-results/wai-aria/ Previous version: https://www.w3.org/TR/2017/PR-wai-aria-1.1-2
コーディング作業が爆速に！ すぐ使える便利なHTML5スニペット15個まとめ
HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。 HTML5基本テンプレート 新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無名のドキュメント</title> <meta name="description" content="メタディスクリプションを記述します。"> <link rel="stylesheet" type="text/css" href="theme.css
cssだけでズームしながらふわっと表示が切り替わるスライドショーを作る｜株式会社しずおかオンライン
最近は動くヒーローイメージが当たり前になってきましたね。 今回はjQuery、JavaScriptを使わずに、 cssだけでズームしながらふわっと表示が切り替わるスライドショーを作ってみたいと思います。 まずはデモをご覧ください background-imageで表示するパターンと imgタグで表示するパターンとを用意してみました。フェードイン・フェードアウトの動きは共通です。 スライドアニメーションに関してはどちらもcssのanimationで実装しています。 html <div class="main_imgBox"> <div class="main_img" style="background-image: url(###)"></div> <div class="main_img" style="background-image: url(###)"></div> <div cl
【初心者向け】HTML+CSS練習用のサンプルコード | KROWL MAGAZINE - Web業界への転職に役立つメディア
誰が書いたコード？ 実はこのコード、弊社フロントエンドエンジニア（未経験で入社）が、入社前の自主制作で作成していたサイトの一部を抜粋させてもらったものです。 サンプル用に調整・修正している箇所もありますが、なるべく原型を残してあります。うまくいっている箇所も、そうでないところ・苦戦した痕跡も、残しました。 未経験だった彼が感じていた新鮮さ、面白さ、そして難しさも、このコードから読み取っていただけると嬉しいな、と思います。 また、こちらのサンプルサイトを1から作り直し、解説した記事も公開されていますので コーディングの途中で手が止まってしまった…進め方がわからない…という方、ぜひこちらもご覧ください。 想定しているディレクトリ構造 ディレクトリって何？ フォルダのことです！ここではどのフォルダにどんなファイルが入っているのかを表わしています。 このプロジェクトフォルダをSublime Tex
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
🤯 HEAD - A simple guide to HTML <head> elements
🤯 HEAD A simple guide to HTML <head> elements Table of Contents Recommended Minimum Elements Meta Link Icons Social Facebook Open Graph Twitter Card Twitter Privacy Schema.org Pinterest Facebook Instant Articles OEmbed QQ/Wechat Browsers / Platforms Apple iOS Google Android Google Chrome Microsoft Internet Explorer Browsers (Chinese) 360 Browser QQ Mobile Browser UC Mobile Browser App Links Other
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
