divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた（microCMS + Amazon S3） | DevelopersIO
はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。 サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、というケースも多いと思います。 今回はそんな用途にぴったりの「ヘッドレスCMS」を利用して、S3 でホスティングしている静的ウェブページに管理画面から記事を投稿できるシステムを、1 時間ほどの作業でサクッと実装してみました！ ※本記事では「とりあえず動くシステム」をできるだけ簡単に、最短で体験することを目指しているため、セキュリティやフロントエンドの実装技術については掘り下げていません。 ヘッドレスCMSとは？ CMS（Content Management System）とはユーザー管理、記事の投稿、データベースなどがセットになったコンテンツ管理システム全体を指します。 最も
js-xlsx で js で excel のファイルを生成する - tokuhirom's blog
js-xlsx で js で excel のファイルを生成する Excel ファイルの生成、めんどくさいですよね。CSV の生成めんどくさいですよね。HTML を出力した上でさらにやるのはだるい、というわけで、HTML の DOM を解析して JS で XLSX 生成してダウンロードさせたらいいんじゃね?と思ってそういうのやれるやつ探したら、js-xlsx ってのがあった。 これをつかって、HTML のレポートから XLSX を生成するコードを書いた。なかなかうまく動く感じしてる。 http://tokuhirom.github.io/js-xlsx-demo/ td タグに class を指定すると数字カラムになる、みたいな感じになってるのがいいかんじです。 js-xlsx で生成したXLSXは、FileSaver.js で保存させてます。 デモで利用している JS は以下のようなもので
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
