2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study
div要素の正しい使い方
2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study
JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
a-table.js - リッチな機能を持ったHTMLテーブルを出力 MOONGIFT
Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。 そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。 a-table.jsの使い方 デモです。上にあるテーブルがa-table.jsの適用例です。文字寄せや色の変更などができます。 カラムを追加できます。 日本語も問題なく使えます。 さらに太字の変更も。 行についても追加や削除ができます。 a-table.jsではHTMLでの出力はもちろん、Markdown形式でも出力できます。ただしMarkdownの場合は文字装飾などの情報は失われています。ビジュアル的にテーブルデータを操作できるので、表計算的な利用もできるでしょう。 a-table.jsはJavaScript
初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza times
Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ
JavaScript不要、HTML/CSSコピペで実現するすごいスタイル10個まとめ - PhotoshopVIP
JavaScript不要、HTML/CSSコピペで実現するスタイル10個まとめ YOU MIGHT NOT NEED JAVASCRIPT JavaScriptはとても便利で、Webページを構成する機能的なUIコンポーネントを自由に作成できます。ほんの数行のコードを加えることで、ブラウザにさまざまな機能を追加できます。 今回は、JavaScript を使わずにHTMLとCSSのみで実現できる、ウェブサイトでもよく利用するコンポーネントを10個まとめてご紹介します。 参照元@ : YOU MIGHT NOT NEED JAVASCRIPT - youmightnotneedjs.com
mocknow.com - mocknow リソースおよび情報
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.
「第38回 HTML5とか勉強会 ～Webアプリ×テスト最新事情」活動報告 | gihyo.jp
2013年4月26日、Googleのオフィスをお借りして、第38回HTML5とか勉強会を開催しました。今回のテーマは「Webアプリ×テスト最新事情」。Webアプリとしましたが、今回の内容は主にJavaScriptのテストになります。昨今JavaScriptが利用されるシーンが非常に多くなり、コードの量も多くなってきています。これによりテストが必要になるケースが増えてきていますが、JavaScriptのテストといえばこれ、というものがあまりない現状です。 このような背景もあってか、今回の勉強会の参加率はとても高く、当初予定していた部屋だけでは収まりきらず急遽サテライト会場ができるほどで、JavaScriptテストへの注目度が高いことが伺えました。 本稿では、今回のイベントについてレポートします。 JavaScript Unit Test Why? What? How? トップバッターとし
HTML のタグを一度覚えたら一生忘れないようにするためのコツ | TM Life
IT の世界は, よく省略名が使われます. そもそも IT ってのが Information Tecnorogy の略ですしねw HTML(HyperText Markup Language) も例外ではありません. HTML で使われるタグは, ほぼ省略形で記述します. 例えばテーブル. テーブル系の要素は tr, th, td ってのがありますね. これらの要素を単純にそのまま覚えてしまうとふとコーディングをするときに最初に書くのって tr だっけ？ td だっけ?? 中に書くのは th だっけ? tr だっけ?? なんてことになります. HTML 学びたてのかたは経験したことがあるのではないでしょうか？ そこで今回は, HTML のタグを一度覚えたら一生忘れないようにするためのコツを紹介します. 紹介するコツをマスターすればそんなことは一切なくなります. コツといってもやりかたは簡単
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
HTML5カンファレンス2012の資料まとめ
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指
![[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
HTML5が盛り上がった本当の理由 － ＠IT
2012/09/11 9月8日、HTML5コミュニティ「html5j.org」が主催するイベント「HTML5 Conference 2012」が慶應義塾大学日吉キャンパスで開催された。コミュニティとしては初めての1000人規模のイベントであったが、応募開始からわずか2日間で席が埋まってしまうほどの盛り上がりをみせた。全22のセッションのうち、パネルディスカッション「Web最先端、エキスパートたちの視点から」では、グーグルの及川卓也氏、Futomiの羽田野太巳氏、シーエー・モバイルの白石俊平氏、NTTコミュニケーションズの小松健作氏が登壇。「たくさんの優れた技術がある中で、なぜHTML5が今、こんなにも盛り上がりを見せているのか」という議論が行われた。 羽田野氏は、「冷めた言い方かもしれないが、HTML5が盛り上がったのは、Appleショックがあったからである」と話した。「仮に、iPhone
アプリ開発を効率化する 方法あれこれ
4. 自己紹介 Facebook : Atsushi Mizoue Twitter : asion_m ・Vimが大好きで社内で 布教＆プラグイン作成なんかやってます ・JavaScriptも大好きで最近仕事では ほとんどJSしか書いてません。 ・麦酒が血液です。
Webアプリとネイティブアプリの違いについてまとめてみた | TM Life
細かく見て行きましょう. Table of contents 入手方法 動作環境 開発環境 実際に同じアプリをネイティブ と Web とで作ったので見比べてみてちょ♪ 結局どっちの開発が良いのよ？ 入手方法 ユーザー側のお話です. Web アプリの場合, 常にネットを介して実行をするため, 何もダウンロード, インストールする必要がありません. 便宜上, データをクライアント側に保存することはあります. その際は, キャッシュだったり HTML5 から追加されたローカルストレージを使用します. それに対しネイティブアプリの場合は, 専用のストアを介してアプリのデータをまるごとダウンロードしてインストールする必要があります. 有料のものもありますがその分高機能かつ大規模なものが数多くあります. アプリをダウンロードできるストアには iPhone の場合は App Store, Android
アドビ、オープンソースのHTMLエディタ「Brackets」を公開。まだまだ開発中
アドビがオープンソースとして公開している「Brackets」は、HTML5とJavaScriptで作られたHTMLエディタです。アドビ自身はBracketsについてブログやプレスリリースでのアナウンスは何もしておらず、Github上にAdobeのコードとしてひっそりと公開されています。 アドビには統合的なWeb開発環境として確固たる地位を持つDreamweaverがありますが、Bracketsの画面を見るかぎり、目指すものはDreamweaverを置き換えるようなものではなく、もっと直感的で軽くシンプルなHTML/CSS/JavaScriptエディタを実現しようとしているように見えます。 Bracketsはまだ開発が始まったばかりで、それほど多くの機能が実装されているわけではありません（実際に起動してみましたが、短時間では使い方もよく分かりませんでしたし……）。今後もう少し機能が追加されて
「BrowserQuest」HTML5＆最新技術てんこ盛りで作られたマルチプレイヤーゲーム 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間:1分] 1980-90年代のTVゲームを彷彿とさせる荒いドット絵。よくあるレトロゲームのように見えるが、実は米MozillaがHTML5とWebSockets等のウェブ技術の最新技術を取り入れたマルチプレイヤーゲームの画面だ。Firefoxはもちろん、SafariやGoogle Chromeでもプレイできる。スマートフォン/タブレットではiOS、AndroidでもFirefoxブラウザなら動作させることが可能だ。 ソースコードも公開 HTML5は現在策定が進むウェブ標準の最新仕様。WebSocketは、ウェブサーバーとウェブブラウザとの間の通信のための双方向通信用の技術規格（規定中）で、いわゆるリアルタイム通信を実現するもの。 「BrowserQuest」のページを開き、ユーザー名を入力すると、すぐにキャラクターが動き出すのを確認できるだろう。これは、よくあるNPC（ノン・プレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.asial.co.jp/1236
Engadget | Technology News & Reviews
Feelingplace
Loading...
