Webのフロントエンド技術を学び始めるのに最適な1冊『HTML5＆CSS3しっかり入門教室』発売
翔泳社から、HTML5とCSS3、そしてライブラリのjQueryの基礎を学べる『HTML5＆CSS3しっかり入門教室』を7月20日に発売しました。Webのフロントエンド技術はなんとなく理解してコピペで使えているという方もいるかもしれませんが、きちんとした知識を身につけるきっかけにいかがでしょうか。 『HTML5＆CSS3しっかり入門教室 ゼロからよくわかる、使える力が身につく。』は、Webのフロントエンド技術に馴染みがない方がまったく初めてから学ぶための入門書です。また、きちんと基礎を学び直したい方にもお勧めです。 フロントエンドの開発に携わる場合、いまではHTML5とCSS3だけでなく、より動的なページを作成するためのJavaScriptやそのライブラリであるjQuery、さらにPHPの知識なども必要です。ユーザーにとってわかりやすく使いやすいUIにするためのデザイン力も強い味方となりま
HTML5のvideoタグを使って動画を貼り付ける時の注意点と問題点
Image by:theQ camera HTML5ではvideoタグを使って動画を貼り付けることができます。 これまでWebサイトで動画を貼り付ける場合には、FlashやQuickTimeなどを使うのが一般的でした。 「theQ camera」は、videoタグを使っています。 videoタグを使えれば、よりリッチなWebサイト作りが出来て、面白そうだなぁ～っと思って、いろいろ調べてみました。 なかなか苦戦したので、概要をメモしておきます。 メイン動画の容量は重要！ 最初にメインとなる動画を準備します。 当たり前のことですが、これがないと始まりませんね。 動画の容量調整は難しいところです。 容量が大きいと、表示が重たくなって表示される前に離脱されてしまう可能性が高くなりますし、かといって、容量を小さくし過ぎると画質が粗くなって、見栄えが悪くなったりしてしまいます。 そうならないためにも、
ウェブアニメーションを簡単に制作できるソフトが1万円台
LODESTAR JAPANは2月13日、独soft-evolution、伊INCOMEDIAが開発するHTML5 ウェブアニメーション制作ソフト「WebAnimator Plus 2（ウェブアニメータープラス 2017）」の日本語版を発売した。通常版の価格は1万4040円、優待版は1万1880円、アカデミック版は2月下旬発売予定で、予定価格は1万584円。 WebAnimator Plus 2は、コーディングの知識がなくてもマウスベースの操作でアニメーションを制作できるという。また、制作したアニメーションは、インターネット上で公開可能。 Adobe Flash Playerに対応していないiPhoneやiPadのブラウザーでも、特別なアプリを使わず再生でき、動きのあるボタンも簡単に作ることができるという。 また、動きのあるバナーやボタン作成もドラッグ＆ドロップで追加し、作ることが可能。
【HTML5/jQuery】マウスオンで音がなるボタンを追加する方法 | k n note
どうも、中村です。 ふと、「もっと面白いブログにしたい」という感覚が湧いてきまして、navigationに音をつけました。そのログです。自分の備忘録がメインなので端折っている点などがあるかもしれません。 jQueryHTML5を使って音のなるボタンを追加する 追加したファイル / 編集したファイル ・header.php ・audioファイル（音声ファイルです。mp3とoggを用意しました） ・teema_func.js （動きを付けるjsは別ファイル化したかったため追加 header.phpに直書きでもいけます） 素材を頂いたサイト様：無料効果音で遊ぼう！ 用意した音声ファイルをメディアに上げる WordPress上のメディアにアップロードしてください。（勝手に画像しか保存できないと思っていたのですが、案外何でも保存できるんですね。） Jsファイルの作成と記述 Jsファイルの記述です。
【HTML5】ボタンにマウスオーバーした時に効果音を鳴らす | 複数ネットショップの商品管理専門 簡単出品王子
お知らせ:弊社では全社員リモートワークを実施しております、通常通りお問い合わせはフォームから随時お受けしております。 マウスがボタンに重なったら音を出す 今までWEBページで音を出すのはマナー的にご法度でしたが、 申し込みボタンに音を付加することでクリック率が高くなるというデータもあり WEBの技術屋の常識とお客様の認識は異なってきているのかもしれません 最近はHTML5で手軽に実装できるようにもなったので使ってみるのも手かもしれません。 但し、今までどおり音が鳴る旨の注意文はあったほうがいいのかなとも思います。。 今回作るボタンはこんなぼたん（※音がなりますので注意） マウスオーバーすると音が鳴るボタン まず効果音を用意する マウスオーバーしたら「チャリ～ン」となるようにするため効果音を用意します 今回私が使わせてもらったのはTAM music Factoryさん http://www.
グーグルがFlash広告を廃止、HTML5に完全移行へ
sponsored 生成AI「Box AI」を組み込んだBoxの将来像も披露、「BoxWorks Roadshow Osaka 2024」レポート 大阪ガス、豊中市も登壇 西日本に注力するBoxが大阪で大型イベント開催 sponsored MSIのNUC「Cubi NUC 1M」を徹底レビュー NUCはどれも同じではない！ちょっとした違いなのに大きく影響するポイントを見逃さずに選ぼう sponsored 浄土真宗親鸞会がネットギア「M4250」を導入、能登半島地震では「機動力の高さ」が生きる 大規模イベントの“ワンオペ映像業務”、実現したのはNDIとネットギアPro AVスイッチ sponsored JN-IPS238FHDR-C65W-HSPなら直販価格2万2980円 昇降式スタンドとUSB Type-C給電は後悔しないディスプレー選びの新要件！ 2万円台前半でも探せばある sponso
アドビ自らFlashに白旗宣言…。HTML5への移行を推奨
アドビ自らFlashに白旗宣言…。HTML5への移行を推奨2015.12.04 15:006,742 湯木進悟 時代の変遷を痛感させられます……。 ウェブ上で、ダイナミックなリッチコンテンツを実現してきたFlash。モバイル分野でも主役を果たしたかったはずですが、アップルやグーグルは手を貸してくれませんでした。それどころか、最近は深刻な脆弱性が次々と見つかって、ChromeやFirefoxブラウザーからも締め出される始末。本丸のウェブとデスクトップでもFlash離れの動きが加速していましたよね。 Adobeは、業界標準のパイオニアとなり、普及を担い続けてきた。標準を受け入れるのみならず、新たな標準の創造にさえ努めてきたのだ。 Flashは、ウェブに新たな可能性をもたらす主導的な役割を果たしてきた。オーディオからアニメーション、インタラクティブな機能から動画にいたるまで、ウェブの発展にFla
Adobeが「Flashを使うのをやめよう」ということで名前をFlash Professionalから「Adobe Animate CC」に
Adobe Flashはウェブサイト上で音楽再生やアニメーション機能、ビデオ再生などを可能にするということで重宝されてきましたが、PCを乗っ取られるほど凶悪な脆弱性の存在が判明していました。また、HTML5のようなオープン標準の技術がFlashに取って代わりつつあることを受けて、AdobeはFlashコンテンツ制作ツールのFlash Professional CCを「Animate CC」と名称変更することを発表しました。 Flash, HTML5 and Open Web Standards http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html Welcome Adobe Animate CC, a new era for Flash Professional | Adob
サンプルコードで学ぶ SVGの読み方、書き方 (1/2)
SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説する本連載。前回はSVGができることをおおまかに解説しました。今回は、SVGの仕様をもとに、SVGの書き方、読み方の基礎を学びます。 SVGを描く、そして書く SVGは画像であり、コードを書かずとも、ツールで描けます。例えば、Adobe IllustratorやInkscape、Sketchなどのドローソフトを使えば、画面の操作のみでSVGファイルを作成できます。 ドローソフトを使って用意したSVGファイルは、HTMLでimg要素、あるいはCSSの背景画像などとして読み込むことで、手軽にWebページの一部として表示できます。 <img src="example.svg" alt="" width="600" height="400"> .example{ background: url( example.svg );
HTML5で注目！インラインSVGの使い方 (1/5)
HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できるようになるのです。 今回のJavaScriptラボは、Firefox 4、Google Chrome 7、Internet Explorer 9を対象に、インラインSVGの使い方とJavaScriptによる制御方法について解説します。全部で3回に分けて、最終的には簡単なシューティングゲームを作成します。 SVGとは？ SVG（Scalable Vector Graphics）は、名前のとおりベクター形式の画像フォーマットです。ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばIllustratorがベクター形式を採用しています（Photosh
今日から使える！HTML5,CSS3のコーディングメモ7個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 ちょっと前からHTML5.1やCSS4が話題になっていますね。 とはいえ、まだHTML5やCSS3の内容さえ把握できてないよ！という方も多いのではないでしょうか。(´ω｀) そこで今回は、あえてHTML5,CSS3の小ネタを紹介してみたいと思います。 すぐに実務で使えるものばかりなので、ぜひお試しあれ！ HTML5、CSS3のコーディングメモ7個 1. どんなサイズの画像でも固定サイズの枠にいい感じに表示させる方法 imgタグではなく、divなどのタグにインラインでbackground-imageに画像のパスを指定し、background-size: coverを用いることでいい感じの見栄えにすることができます。 メディアサイトやブログサイト、複数人で運用していてルールを統一しづらいプロジェクトなどで有
HTML5＋WebGLでBMW i8の3Dモデルをブラウザでグリグリと動かしまくり＆カラー変更＆中も見えるPlayCanvasのデモがすごい
BMWがラインナップする次世代スポーツカー「i8」は、エンジンとモーターの力でパワフルな走りと低燃費性能を実現するという文字どおり次の世代を示すスポーツカー。そんな先進的なスポーツカーをHTML5とWebGLを使ってブラウザ上に再現しているのがゲームエンジン「PlayCanvas」のデモサイトです。サイトではi8がフル3DCGで表示され、車体色や内装色を変更できるほか、特徴的な跳ね上げ式のドアをあけて車内に滑り込めるなどとにかく驚愕のデモを体験することができます。 BMW i8 - PLAYCANVAS http://playcanv.as/p/RqJJ9oU9 サイトを訪れ、ページのロードが完了すると3Dで表現されたi8が表示されました。実際に車輪が回転し、緩やかに前進している様子が再現されています。 車体はマウスを使って360度全ての角度に回転させることが可能。リヤのルーフからテールラ
YouTubeがFlashからHTML 5に移行した今こそ振り返るスティーブ・ジョブズの5年前のレター
YouTubeがFlashからHTML 5に移行した今こそ振り返るスティーブ・ジョブズの5年前のレター2015.02.02 12:306,018 勝敗はすでに決まっていた？ 先日YouTubeはビデオのデフォルトをFlashからHTML 5に移行すると発表しました。アップルは長らくFlashをサポートせず批判されてきましたが、それに対してスティーブ・ジョブズが発表した2010年の声明が残っています。 彼が5年前にFlashとAdobeや、これからの時代の変化をどう考えていたか垣間見ることができます。 FlashはPCの時代にPCとマウスのために作られた。AdobeにとってFlashは成功しているビジネスだから、FlashをPC以外にも進めてくるのは理解できる。しかしモバイルの時代は低出力のデバイスとタッチインターフェース、オープンウェブスタンダードが重要であるのに、そのすべての分野でAdo
YouTubeがFlashではなくHTML5でのムービー再生を初期設定にすることを発表
By José Tomás Albornoz YouTube上でムービーを再生する場合、ユーザーの視聴環境に適したプレーヤーが自動で選択されるようになっており、これまではユーザーがFlashに対応している場合はFlashプレーヤーが優先される仕様になっていました。しかし、これからはFlashではなくHTML5でのムービー再生が初期設定で実行されることをYouTubeが発表しています。 YouTube Engineering and Developers Blog: YouTube now defaults to HTML5 http://youtube-eng.blogspot.jp/2015/01/youtube-now-defaults-to-html5_27.html YouTubeがHTML5でのムービー再生をサポートし始めたのは2010年からで、当時はFlashの方がHTML5で
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
2015年のWeb標準 | gihyo.jp
株式会社ミツエーリンクスの渡邉卓です。昨年の「2014年のWeb標準」と同様に、2015年もWebコンテンツのフロントエンド設計および実装に関連した各種標準や、周辺領域の動きに関する短期的な予測を寄稿させていただきます。 2015年のWeb標準については「より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加」「ECMAScript 6仕様の利用増加」「IE7・IE8 未サポートWebサイト増加」をキーワードとして取りあげます。 より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加 2014年10月28日、ついにHTML5がW3C勧告 (Recommendation) となりました。すでに多方面で利用されているHTML5仕様ですが、勧告になったことで、今まで利用を躊躇していた方々にも確実に浸透していくと予想できます。詳細は後述しますが、現役のWebブラウザでありながら
HTML5がついにW3Cの勧告として公開、約15年ぶりの規格更新
By slavik_V 世界のインターネットを支えているともいえるHTML技術の最新規格となる「HTML5」が勧告として公開されました。 HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成 http://www.w3.org/2014/10/html5-rec.html.ja HTML5は、1997年の「HTML 4.0」、1999年の「HTML 4.01」に続く新しい勧告で、急速に進化と発達、広がりを見せるウェブの現状をより多く取り込んだものとなっています。今回の勧告公開について、ワールド・ワイド・ウェブ・コンソーシアム(W3C)は以下の声明をプレスリリースで発表しています。 ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン
HTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイト「DevDocs」 | ライフハッカー・ジャパン
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
DOCTYPE はなぜあるのか - 若葉もすなる☆日記というもの
DOCTYPE 宣言はなぜ作られたのですかという質問がありました。 HTML 文書の先頭には必ず DOCTYPE がなければならないとされています。しかし確かに DOCTYPE は一見何の役割も果たしておらず、無駄な行にしか見えません。なぜそんな DOCTYPE が作られ、今も必要とされているのかを理解するためには、少し昔の話をする必要があります。 SGML になりたかった HTML HTML は元々 SGML と呼ばれるマーク付け言語を参考に作られました。正確には SGML はマーク付け言語ではなく、マーク付け言語を定義するための枠組み、メタマーク付け言語とでも言うべきもので、どのような要素や属性、タグや実体参照を組み合わせてマーク付け言語を構成するかを SGML の規定に従って記述することになっていました。これが文書型定義 (DTD) であり、 DTD を宣言・参照するのが DOCTY
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ対応サイトの作り方と6つの注意点 [ホームページ作成] All About![スマホ対応サイトの作り方と6つの注意点 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a067d7a89ea4cfd5e882d23b76497d96b7f90da/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F1%2F4%2F6%2F4%2Ftopimg_original.png)
