もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす
Web制作者が知っておいた方が良いと思う、HTML5ハイブリッドアプリのフレームワークについて | バンクーバーのうぇぶ屋
ここのところ、バンクーバーにある専門学校の方とお話することが多いのですが、WEBデザイナーの専門学校なんかの授業でもハイブリッドアプリの科目が取り扱われているみたいですね。最近はWEBデザイナーに必要なスキルの一つとしても、HTML5のハイブリッドアプリ開発は大事になってきてるんじゃないかなと思ったので、これから色々勉強してみようと思っている方向けに最初のとっかかり記事を情報共有として記事を書かせて頂ければと思います。 僕自身もアプリ制作専門で活動したことは無いのですが、最近は「WEBサイト作りましょう」で、モバイルの話が上がる事はほぼ絶対になってきていますよね。で、WEBという媒体を使って何かを提案する姿がWEBデザイナーである以上、そうやってフィールドがモバイルにも派生しているのであればアプリ面の知識も「全く知りませんでした」は正直避けたい所になっていくのではと思っています。 というわ
RazorFlow - 多数のグラフをサポートするHTML5ダッシュボードフレームワーク MOONGIFT
業務システムといえど、UIが整っている方がやる気が出るはずです。特にダッシュボード系のよく見る画面であれば分かりやすくなっているかどうかで生産性が大きく変わってきます。 今回紹介するオープンソース・ソフトウェアはRazorFlow、HTML5のダッシュボードフレームワークです。 RazorFlowの使い方 RazorFlowでは幾つかのグラフをサポートしています。 一覧も利用できます。 グラフはマウスオーバーで説明が出ます。 こちらはよりダイナミックなデータ変化ができます。フォームで表示するデータを絞り込めます。 カテゴリや名称などで検索できます。 RazorFlowは各種グラフの他、KPI表示パネル、ゲージ、テーブル、ドリルダウンなどの表示や機能に対応しています。HTML5を使っており、リアルタイムな描画アップデートも可能です。 RazorFlowはHTML5/JavaScript製のオ
未経験Webデザイナーが独学で勉強する方法
Webデザイナーに求められるスキルは、HTML・CSS・JQuery・WordPress・タイポグラフィ・配色・コピーライティングなど多岐に渡ります。より多くの知識・技術を身につけていれば、Webデザイナーとして活躍できるチャンスは増えるでしょう。そこで今回は、これらのスキルを独学で学ぶための方法をご紹介します。 ＜この記事に関連する記事＞ 初心者Webデザイナーの独学におすすめの本10選 グラフィックデザイナーからWebデザイナーに転職するには？ Webデザイナーになるには？未経験のための実践的フロー 目次 Webデザイナーの仕事内容と必要なスキル Webデザインを独学で勉強する方法 独学でWebデザインを学習するときにおすすめのサイト 独学をするときの注意点 まとめ Webデザイナーの仕事内容と必要なスキル 独学で勉強をする前に、Webデザイナーの仕事内容とそれに伴って必要となるスキル
【HTML5】section要素とdiv要素の違い / 使い分けについて - DD_log / HTML,CSS,Javascript,Wordpressの解説や雑感サイト
w3gによるdiv要素の解説は以下の通りです。 div要素（division）は区切りを意味するブロックレベル要素です。この要素自身が特に意味を持っているわけではなく、他の要素をグループ化（含まれた内容を一つの単位とする）し、文書に構造を付加することで文書の情報的価値を高めます。 上記のようにdiv要素自身には特に論理的な意味を与える役割りはありません。 ただデザインやレイアウトのために範囲を作成したい際に使用する要素となります。 使用例としてページ全体を中央に配置する場合などに、body要素内のすべての要素をdivで囲むなどして使われます。 section要素もdiv要素と同様に「範囲を指定」したり「区切り」を作成したりする要素です。 しかしdiv要素が論理的な意味を持たないのに対して、section要素は論理的な意味を持つ要素となります。 sectionは「一つのテーマを範囲指定する」
SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント
検索エンジンがページ構造を理解しやすいようにHTMLがマークアップされていることは、安定的に検索結果上位にインデックスされるために重要な要素の1つです。 当然のことながら、前提として検索キーワードを想定した質の高いコンテンツ作成が必要です。せっかく質の高いコンテンツを作成してもマークアップの仕方が論理的に間違っていると台無しです。 今回はSEO対策として押さえておいてほしいHTMLおよびHTML5マークアップの最低限のポイントについてお話しします。 この記事では自力でSEOに最適なマークアップをする方法を紹介していますが、はじめからSEO対策がばっちりなWordPressテーマを使えば、なにもしなくても良いのでとてもラクです。SEO対策が万全のWordPressテーマは下記で紹介しています。 WordPressのおすすめテーマはコレ！SEOもレスポンブも完璧【有料&無料】 headタグ内の
君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM
知っている方には、すみません。 HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。 ちょっと試してみましょう。 <div contentEditable="true">ここは編集できる</div> ↑ ここは編集できるのです。(ただの <div> 要素なのですが！) 編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。 body要素に contentEditable 属性をつけてみる さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。 JavaScript コードはこんなかんじ。 javascript:(functi
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
第18回 HTML5で家計簿アプリを作る 設計と基本機能の実装
前回までは、日報アプリケーションを題材に解説をしました。 特に「入力系」のアプリケーション開発の際に役立つ フォーム要素について解説するとともに、 実装に役立つツールを紹介してきました。 第9回 HTML5で日報アプリを作る 実装編［1］ 画面の構造を定義する 第10回 HTML5で日報アプリを作る 実装編［2］ 画面のレイアウトを定義する 第11回 HTML5で日報アプリを作る 実装編［3］ 操作や処理を定義する 第12回 HTML5で日報アプリを作る 解説編［1］ HTML5の入力補助部品を使う 第13回 HTML5で日報アプリを作る 解説編［2］ レスポンシブWebデザインとBootstrapを使う 第14回 HTML5で日報アプリを作る 解説編［3］ 非同期処理とCSS Animationを使う 第15回 HTML5で日報アプリを作る ツール編［1］ 開発者ツールで生産性を向上する
参考になるレスポンシブデザインのサンプル集
Web制作の環境は大きく変化しています。 スマホ、タブレットなど様々なデバイスにホームページをを最適化しなければいけないため、各デバイスに対応できる支流のレスポンシブデザインのニーズが高まっています。 レスポンシブデザインをできるだけ効率的に作成するためのサンプルをストックしている方も多いのではないでしょうか。 今回はWeb制作時に役立つレスポンシブデザインのサンプル集をご紹介します。 レスポンシブデザインとは Web制作をスタートする時、デザインからワイヤー構成を考えますが、どの端末向けのサイトにするか、ということです。 PC用、スマホ用、とデバイスごとにファイル管理をしていたら更新の時間もかかり管理も大変です。 そこで単一のファイルで管理ができ、各デバイスに応じた表示をさせることが可能なのがレスポンシブデザインです。 全てのデバイスに対応したサイトを考える時、デザインをマルチメディアで
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
JavaScriptでデスクトップ通知（HTML5 Notification） - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Desktop Notification</title> </head> <body> <script> // Notification対応しているかどうか if (window.Notification) { alert('Notificationは有効です'); // Permissionの確認 if (Notification.permission === 'granted') { // 許可されている場合はNotificationで通知 alert('通知許可されています'); var n = new Notification("Hello World"); } else if (Notification.permission === 'denied') { al
ReactとHTML5 Form Validationでリアルタイムチェック機能付きフォームを作る
サンプルについてメールアドレスとURLを入力して送信するフォームです。リアルタイムで入力値のフォーマットと入力の有無のチェックを行います。入力値に問題がなければ、送信ボタンが押せるようになります。ボタンを押すと、入力値がアラートとして表示されます。※サンプルなので、かなりシンプルに作っています。 サンプルのソースコードはGitHubで確認可能です。 maechabin/react-validation-form – GitHub実際にReactの実装を行っているのが以下のJSファイルとなります。 https://github.com/maechabin/react-validation-form/blob/master/src/app.js実装方法の説明の前にReactの基礎知識の説明や開発環境の構築方法などは省略します。その辺の情報については、当ブログの以下の記事などを参考にしてください
Webページを作成する時の基本になるHTML5の最小限構成やリセット用CSS、CSS3アニメーションなどのまとめ
Webページ作成のベースになる、HTML5の必要最小限の構成にしたテンプレート、各ブラウザのスタイルを正常化・リセットするスタイルシート、レスポンシブ対応の柔軟なグリッドをつくるスタイルシート、さまざまなCSS3アニメーションを簡単に利用できるスタイルシートを紹介します。 HTML5で作成する時の必要最小限のテンプレート スタイルの正常化・リセット グリッドをつくるスタイルシート CSS3アニメーション HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低限の配
aタグのdownload属性でサーバを介さずにファイルダウンロードする
この記事はHTML5 Advent calendarの16日目の記事です。 HTML5からaタグにdownloadという属性が指定可能になったようです。 この属性が指定されたaタグは、href属性の値をブラウザで開くのではなく、リンク先をファイルとしてダウンロードします。 今までcanvasで画像を生成した画像など、jsで生成したファイルをユーザに保存させるにはwindow.openにdata urlを渡して新窓で表示させ、ユーザに右クリ等で保存してもらう方法しか知らなかったのですが、 aタグのdownload属性がまさにやりたいことドンピシャだったので備忘録を残します。 デモ MDNにまさにドンピシャなデモがあったので、自作デモは割愛します。 canvasで生成した画像を新窓ではなくファイルダウンロードさせるデモです。 このとき、サーバに対して一切リクエストを飛ばしていないことがポイント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高品質でしかも無料！すごい使えるレスポンシブ対応のHTML5/CSS3のテンプレートのまとめ
http://www.smaroomch.net/html_css_sample30/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://harold-spm.com/webdesign-ryoukiji/