超初心者のためのHTML・CSS入門講座 - NO TITLE
超初心者のためにHTML・CSSを解説 今回は、HTMLやCSSを勉強してみたいって人のための入門記事です。 HTMLやCSSというのは、いわゆるマークアップ言語というもので、WEBサイトを作るために必須の言語になります。 HTMLは土台というか骨組みのようなもの。それを装飾するのがCSSです。 始めはちょっと難しく感じるかもしれませんが、慣れればそこまで難しいものではありません。 全く知識はないけど、WEBサイトを１から作ってみたい。ブログのカスタマイズがしたい。そんな人は一度目を通してみて下さい。 勉強したいけど、参考書買うお金がないよ…という人にはぴったりです。 筆者情報： 都内で働くWEBデザイナーです。個人としては、はてなブログ向けのデザインテーマも作ったりしてます。 はてなブログの超便利なデザインテーマ「Brooklyn」を作りました この記事の内容について 超初心者向けなので
10 Best Hybrid Mobile App UI Frameworks: HTML5, CSS and JS
10 Best Hybrid Mobile App UI Frameworks: HTML5, CSS and JS Native developers love working with native code but that doesn’t always go well with the business case or result in effective use of effort and time. We often see scenarios where developers end up building same mobile app for android, iOS, windows and other mobile platforms using native APIs and libraries of individual platform. HTML5 mobi
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
Tutorial: Using Thymeleaf (ja)
1 Thymeleafの紹介 1.1 Thymeleafって何？ ThymeleafはJavaのテンプレートエンジンライブラリです。XML/XHTML/HTML5で書かれたテンプレートを変換して、アプリケーションのデータやテキストを表示することができます。 ウェブアプリケーション内のXHTML/HTML5を扱う方が得意ですが、どんなXMLファイルでも処理できますし、ウェブアプリケーションでもスタンドアローンアプリケーションでも使用可能です。 Thymeleafのメインゴールは、テンプレート作成のための優雅で整形式の方法を提供することです。そのため、テンプレート内にロジックを記述する方法ではなく、事前定義されたロジックの実行を DOM(Document Object Model) 上でXMLタグ・属性によって指定する方法を基本としています。 このアーキテクチャのおかげで、パースしたファイルを
HTML5モーション制作のテクニックとデータ最適化の必要性―CreateJS勉強会/池田発表資料 - ICS MEDIA
2015年9月4日（金）、CreateJS勉強会 (第6回） がICTCOで95人の定員規模で開催されました。勉強会のフォローアップとして、発表資料「HTML5モーション制作のテクニックとデータ最適化の必要性」（発表者：池田）のスライドを一部抜粋して記事という形で公開します。 バナー広告にみるFlash(SWF)の衰退とHTML5の隆盛 HTML5モーションコンテンツの代表的な活用分野として「ウェブページ」「ゲームコンテンツ」、そして「広告」があります。今回は「広告」をテーマとして最近の話題から紹介します。2015年9月1日にリリースされたGoogle Chrome 45からウェブページ内の主要でないFlash(SWF)コンテンツがブロックされるようになりました（参考記事「In June, we announced (https://goo.gl/TF7dmD) that Chrome w
HTML5 CanvasとWebGLでウェブフォントを扱う方法 - ICS MEDIA
ウェブフォントは異なる環境でもフォントの見栄えを確保する手段として、多くのウェブサイトで利用されています。 ウェブフォントはCSSとしては利用しやすいものの、HTML5 CanvasやWebGLを採用した場合にCSSのように簡単に使うことができません。この記事ではインタラクションコンテンツ制作で役立つようにHTML5 CanvasとWebGLでのウェブフォントの使い方をまとめました。本記事のサンプルコードはGitHubで公開していますので、ダウンロードして読み進めてください。 この記事で学べること ・ウェブフォントの先読み機能を実現するJSライブラリ「WebFontLoader」の使い方 ・FontAwesomeをプログラムで制御する方法 ・HTML5 Canvasでウェブフォントを使う方法 ・WebGLでウェブフォントを使う方法 この記事ではウェブフォントの題材として「Font Awes
HTMLのアウトライン意識してますか？ - QiitaのSEO事情（前編） - Qiita
「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか？ SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。 SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが（そういうのが不要と言っているわけではないですよ）、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。 後編はこちら 免責事項的な SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。Read less
CSSのみでフルスクリーンの動画背景を実装する方法 - NxWorld
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのをJavaScript等は使用せずにCSSのみで実装する方法です。 古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 <body> <video autoplay loop poster="img.jpg"> <source src="movie.mp4" type="video/mp4"> </video> </body> body { margin: 0; padding: 0; background: url(img.jpg) center center fixed no-repeat; } video { position: fixed; top: 0; left: 0; min-width:
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
第一回Apache Cordova勉強会( https://atnd.org/events/57562 )での発表資料
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
WebRTC入門+最新動向
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
HTML5 Conference 2015 講演資料まとめ #html5j
