タグ

html5に関するyusuketsudaのブックマーク (59)

  • Adobe Animate CC の使い方 - ICS MEDIA

    Animate CCはwebアニメーションを制作するソフトウェア。アドビシステムズというクリエイティブのツールを中心に開発している会社の製品です。このソフトでは、グラフィックを描きタイムラインで動きをつけ、スクリプトでインタラクティブな操作を実装できます。これはどういうことかというと、Animate CCを使えば、「動くwebコンテンツ」を自由に作れるということです。 制作できるものの種類は多岐にわたります。アニメやモーショングラフィックスといった動画や映像作品、ゲームやメニュー画面といったインタラクティブコンテンツ、グラフやシミュレーションといったビジュアライゼーション(データの可視化)に利用できます。 初心者でも手軽に使えるうえに、放送品質のアニメまで作り込めるという幅の広さがAnimate CCが最大の魅力です。 ▲ 公式サイトの紹介ビデオではソフトの利用用途や利点がわかりやすく紹介

    Adobe Animate CC の使い方 - ICS MEDIA
  • コーディングガイド by @mdo

    HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </

  • 書評:現場のプロが教えるWeb制作の最新常識 | 279-design

    珍しくWebの技術書を読んでみた 題とあまり関係ないですが、飲み会やTwitterや勉強会や飲み会やダーツや仕事やバーベキューや飲み会を通じて、Web業界で仲良くさせていただいている友人もそこそこ増え、おかげさまで公私ともに楽しい毎日を送っております。なんか”私”の方が多そうですけど。 何人かの(とても優秀な)友人達の中には、HTMLWordPress、Photoshopなどに関する専門書を出版しておられる方がいるのですが、友人だから無条件で買う、というわけでもなくスルーさせていただいていることもしばしばです(ごめんなさい)。 それらの技術Web制作をする上では(もちろん必要だけど)手段であって、それらにどっぷりとハマるのが少し怖かったんですよね。Webで売上を上げるなり集客を伸ばすなり、大きな目標を見据えていたかったというか。 しかしながら、最近のWeb制作の現場の変化のスピードは

    書評:現場のプロが教えるWeb制作の最新常識 | 279-design
  • ゴールデンウィークにどうぞ。2013〜2014のWeb&デザイン系書籍14

    2013年から今にかけての一年間で色んなに関わったり気になって買ったり頂いたりしたものがあったのですが、棚卸し的にそれらを紹介してみます★ ここ一年前後のうちに色々な書籍を手にする機会があったりしました。もちろん一番推したいのは先日自分が執筆に参加した現場のプロが教えるWeb制作の最新常識なわけですが、他にもたくさん良さげなを手に入れることがあったので、どういう部分が良かったかざーっと紹介してみます! 自分が持っているを紹介する要は宣伝記事なんですが、読書感想文として購入する際のご参考に。私が持ってないは紹介出来ないので、よりオススメのがあれば教えてほしいです!(他の人も書籍紹介記事書いてねアピール) 一旦ここで紹介はしちゃいますが、これらのでまだ個別に記事を書いてないものは別記事でも触れようと思います。新卒のweb制作者一年生!みたいな人も参考にしてみてはいかがでしょうか★

    ゴールデンウィークにどうぞ。2013〜2014のWeb&デザイン系書籍14
  • section, article を使う前に知っておきたいこと - WP-E (仮)

    何を今更、と言われるとツライですが色々な人と仕事をしていると、思わず”んー…”っとなるような使い方をされている場面に遭遇したりして、果たして自分はどれだけ正しく使えているのかと気になり調べてみました。ぼくがウェブの勉強を始めたのは2012年、時代は既にhtml5に移りつつあり、この辺りはちょっと苦労した思い出があります。 もしぼくがこれらに関して誤った認識をしていたらそっと優しく指摘して欲しい。聞くは一時の恥、聞かぬは一生の恥なのだと思えば、自らの過ちにも耐えられると思う。 html5のルールに関しては(5.1ですが…) https://www.w3.org/html/wg/drafts/html/master/ HTML 5.1 Nightly A vocabulary and associated APIs for HTML and XHTML Editor’s Draft 3 Apr

    section, article を使う前に知っておきたいこと - WP-E (仮)
  • Grid 日本語版

    なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは

    Grid 日本語版
  • 完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

    作成:2014/01/27 更新:2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 1.仕様書の確認 2.入稿データの確認・スケジューリング HTML5 マークアップ 3.テンプレート作成 4.条件付きコメント 5.GCF+キャッシュクリア 6.OGP記述 7.ファビコン 8.アウトライン作成 9.バリデーターをチェック CSS の設定 10.ノーマライズスタイル レスポンシブデザイン設計 11.モバイルファーストを基準に設計 12.プログレッ

    完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
  • 続・よくある3つのデザインから考える、マークアップの最適解

    マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初

    続・よくある3つのデザインから考える、マークアップの最適解
  • Engadget | Technology News & Reviews

    Pick up the 9th-gen iPad with two years of AppleCare+ for only $298

    Engadget | Technology News & Reviews
  • HTML5KARUTAが届いてたので遊んだよ! | Hal-Cana

    WEBCRE8.jpの中の人こと酒井優さん(@glatyou)が作ったHTML5カルタが届いてたのを思い出して早速遊んでみました。 はこです 僕はCAMPFIREのアレで早々にパトロンとして金を出したので、初級・中級・上級の3種類のセットを頂くことが出来ました。 かね の ちから って すげー 。 中身を見てみる カルタの他に簡単な解説も入ってました。 カルタですね。カルタです。こんなにカルタなものは見たことないくらいカルタ。 早速遊んでみよう! というわけで、早速カルタで遊んでみようと思ったんですけど、よく考えたら僕には一緒にカルタを楽しめる友達がいませんでした。 友達が、いませんでした。 おわり。 以下、泣きながら全力で一人カルタを楽しむ僕の努力をお楽しみください わ、わーい。 僕のID、halcanaができたよー。カルタってすごーい。たのしーい。 続いてカルタの制作者、酒井優さんのI

  • ul・ol・li要素の備忘録 - NxWorld

    かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ(特に一部のIEで未対応)とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま

    ul・ol・li要素の備忘録 - NxWorld
  • HTMLのアウトライン意識してますか? - QiitaのSEO事情(前編) - Qiita

    「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか? SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。 SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが(そういうのが不要と言っているわけではないですよ)、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。 後編はこちら 免責事項的な SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、

    HTMLのアウトライン意識してますか? - QiitaのSEO事情(前編) - Qiita
  • HTML5Experts.jp

    進化するWeb ~Progressive Web Appsの実装と応用~(de:code2018より) 物江 修 2018年5月に開催された日マイクロソフト主催のイベントde:code 2018で「進化するWeb ~Progressive Web Appsの実装と応用~」というセッションを担当しました。 イベントに参加できなかった...

    HTML5Experts.jp
  • HTML5でサイトをつくろう

    若者を中心に爆発的な人気となり、ユーザーを増やし続けているInstagram。Web関連の仕事をしていると、最近ではクライアントからも「Instagramを使いたい」という要望も聞くようになりました。Instagramが今どうなっているのか?どう活用し、どのように見てもらうのか、初歩的な内容から少し専門的な内容まで、参考になるサイトや記事をまとめました。

  • ブログ記事リストのマークアップ

    サイトをリデザインした のにともない、全体的にマークアップについても見直しているのですが、ちょっと悩んだのがホームやアーカイヴ・ページなどにある「ブログ記事の概要や抜粋のリスト」です。 よく見かけるのは以下のようなマークアップで、うちもリデザイン前はだいたいこんな感じでした: <section class="articleExcerptList"> <h1>Recent articles</h1> <article> <h2><a href="...">ブログ記事リストのマークアップ</a></h2> <time datetime="...">April 10, 2012</time> <p><!-- 概要・抜粋 --></p> <a href="...">Continue reading</a> </article> <article> <h2><a href="...">リデザインしま

    ブログ記事リストのマークアップ
  • HTML5でセマンティックなブログのアウトラインを考えたときに役立ったことのまとめ。

    これらの新要素と、あるHTML5の書籍でサンプルをざっと見た時点では「ふむふむ、いままで<div>で囲んでいた部分を置き換えればいのね。」くらいに思っていたのですが、実際にマークアップしてみると…あれれ?と、主に<section>と<nav>要素でちょっとつまずいてしまいました。 <section>の使い方がいまいちわからない。 たぶん、そう思われた方は少なくないと思います。 セクションを日語に訳すと、文書構造的には「節」「章」「欄」というのがしっくりくると思います。「第一節」とか、「ニュース欄」とか。で、そのセクションを表す要素(タグ)は上記のとおり<section>だけではありません。上の表の<section>から<nav>まで、すべてセクションを表す新要素です。他にも、従来からある<body><hn><address>もセクションを表す要素ですね。 これらのセクショニング要素の中で

    HTML5でセマンティックなブログのアウトラインを考えたときに役立ったことのまとめ。
  • HTML5 のマークアップで心掛けたい事 - HTML5 のいろいろな要素

    HTML5 のマークアップで心掛けたい事を挙げてみます。 平成25年 5月16日現在、HTML5 勧告に向けて、グラフィカルなウェブブラウザの開発者は HTML5 への対応を急速に進めておりますが、そうでない環境、例えば音声出力ブラウザや CUI 環境向けテキストブラウザなどについては、殆どと言って良い程話を聞きません。 こう言った事から、HTML4/XHTML1 時代の環境でも問題なく取り扱えるようにマークアップすべきでしょう。 はじめに。 平成24年12月17日に HTML5 の勧告候補が発表され、HTML5 は勧告に向けて大きく前進しております。 特にグラフィカルなウェブブラウザの開発者は、WAHTWG に加盟していないマイクロソフト社を含めて HTML5 への対応を急速に勧めており、西暦2014年に勧告される頃には、殆どのグラフィカルなウェブブラウザが HTML5 対応になっている

    HTML5 のマークアップで心掛けたい事 - HTML5 のいろいろな要素
  • HTML5KARUTAのその後(イベントとかスポンサーとかCAMPFIREとか) #HTML5KARUTA

    http://www.asial.co.jp/ アシアル株式会社は、HTML5、PHP等を得意とするシステム系の制作会社。最近はブラウザー上で動く、HTML5とJavaScriptで動くスマートフォンアプリ開発が出来るMonacaというサービスが注目されています。 取り組みとしても私の活動と親和性が高く、私も今後これでHTML5に関連したアプリを作ろうと思っています★ この機会を与えてくださったアシアルの岡さんにこの場を借りてお礼を申し上げます。 CodeIQ https://codeiq.jp/ CodeIQは、株式会社リクルートキャリアの運営するWebサービスです。 CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。ということで、もちろんHTML5についての問題も掲載されています。 こちらもテストやクイズの様な形式でweb制作

    HTML5KARUTAのその後(イベントとかスポンサーとかCAMPFIREとか) #HTML5KARUTA
  • hanatoweb.jp - このウェブサイトは販売用です! - hanatoweb リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • 新春!!HTML5KARUTA大会報告&まとめ #HTML5KARUTA

    今週日曜日に全国で行われた「新春!!HTML5KARUTA大会」の様子のレポートを紹介します。一応渋谷会場のレポートもしたいと思います! HTML5KARUTA大会、無事終了しました! 2013年年始のイベントごととしては初めての人も多かったのではないでしょうか。1月6日日曜日、webcre8の制作したHTML5KARUTAを使った全国的なイベント、新春!!HTML5KARUTA大会が行われました。 新春!!HTML5KARUTA大会、全国規模に。参加を迷ってるあなたに! #HTML5KARUTA webcre8としてはこうしたイベントに参加する事自体あまりできていなかったのですが、せっかくやるなら話を大きくしたいという安直な考えのもと、いきなり主催で、しかも全国を巻き込んでのイベントとしてしまいました。 Photo by @shinsyou 実際のところ私自身が考えていたような段取りでイ

    新春!!HTML5KARUTA大会報告&まとめ #HTML5KARUTA