リスト要素に対して番号を振りたければ list-style-type: decimal を使えば良いんですが、テーブルだとそうもいかないです。しかし行番号を振るためだけに JavaScript は使いたくない。 そういうときは CSS Counters を使います。 <table> <thead> <tr> <th></th> <th>column1</th> <th>column2</th> </tr> </thead> <tbody> <tr> <td></td> <td>foo</td> <td></td> </tr> <tr> <td></td> <td>bar</td> <td></td> </tr> <tr> <td></td> <td>baz</td> <td></td> </tr> </tbody> </table>
続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ
こんにちは id:mstssk です。 Webサービスを作っていると、何かしらをユーザーにコピーして使ってもらうというシチュエーションが出てきます。 WebページをシェアするためにURLのコピーボタンが置いてある、なんていうのはよく見かけますね。 しかし、ある程度複雑なコンテンツはHTML情報としてコピーさせたい事が稀にあります。 画像やリンクを含んだHTMLです。 そこで、もう少し欲張って、こういうことが出来ないか調べてみました。 テキストエディタに貼り付けると、HTMLソースコードのテキストとして貼り付け WYSIWYGエディタに貼り付けると、書式情報を保ったコンテンツとして貼り付け 3行まとめ ただのテキストをコピーするだけならクリップボードAPIを使えばOK。 HTMLをWYSIWYGに貼り付ける状態でコピーさせるには、現在非推奨な実装方法を使いつつ一工夫必要になるけど可能。 一行
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
クリックできるものがあって，<a>にするか<button>にするか，という話をしていて，いろんな観点があるなと思ったのでメモ． 単なる画面遷移なら<a> 単にformを送信したいときは，<input type="submit">や<button> <button>はdisabled属性を使って無効状態にできるので，押せない場合もあるなら便利 リンクを<a>にしておくと，PCではホバーするとリンク先が見えるので，ユーザーにとっては何が起きるか予想できて便利 そう考えるとformは押してみるまでどこに飛ぶか分からないので怖い気がする リンクを<a>にしておくと，:visitedを使って訪問済のリンクの色を変えることができて便利 モーダルウィンドウを出すとき，ウェルカムメッセージを開くボタンを<a href="#welcome">として，/#welcomeのときにウェルカムメッセージを出す，とし
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分が ダブルクォーテーションで挟まれて表示されます。 上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた 「表示されます」って書いたんだけど、 本当は「と思ってました」でした。 こないだふと気づいたら、 日本語のページではこれがこうなってました。 「ここは引用ですよー。」 クォーテーションマークじゃなくてカギ括弧になってる。 知らんかった。いつの間に。 <q> を初めて使
Private content!This content has been marked as private by the uploader.
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア
話題になっていたので、 <html>,<body>は要らない？Googleが推奨するHTMLファイルの記法 - Qiita [キータ] 便乗して、一年以上前に社内勉強会で作った資料があったので今更ながら公開してみます。 Best practice from Google HTML/CSS Style Guide はい、当時流行っていたimpress.jsを使いたかっただけの資料ですね。 読めば分かるように、これはGoogleさんの中の人のためのスタイルガイドっていう側面が強くて、とにかく1byteでも削ることに命を懸けてます。省略できるところは全部削っていくスタイル。 われわれ平民の提供するサービスとはトラフィックの桁がいくつも違う世界の話なので、鵜呑みにすると悲しいことになりますのでお気をつけて。 ちなみに、 HTML and CSS, including GSS files のGSSっ
[対象: 全員] Googleは数年間から、状況に応じて、HTMLのtitleタグの記述ではないタイトルを検索結果に表示するようになりました。 どのように書き換えるかはアルゴリズムによって完全に自動化されています。 タイトル修正が発生しやすい状況をGoogleは説明していますが、アルゴリズムはその後も絶えず改善されています。 現状はどのようになっているのでしょうか？ GoogleのMatt Cutts（マット・カッツ）氏が説明しました。 検索結果のタイトルをGoogleはどのように選んでいるのか 基本的に、タイトルを選んだり検索結果にどのタイトルを表示しようか決めたりしようとするときは、検索クエリに関連性があって簡潔な記述かどうかも常に見ている。 僕らが見ている基準はいくつかある。 比較的短いかどうか そのページのことをよく説明できているかどうか。そのページがあるサイトのことも説明できてい
デザイナーがPhotoshopでカンプを作る。そしてエンジニアに渡し、HTML化やアプリ化が始まる。だがカンプ通りのデザインを実現するためには、フォントサイズ、グラデーションのRGB値、オブジェクトの高さと幅、XY座標などを、Photoshopからコードに写す手作業が必要だ。まるでコピペ大会になる。 こんな経験ない？ あるあるの方に、ちょっと面白い発表がございます。Project Parfait （プロジェクトパフェ）は、PSDから簡単にデザインの詳細を取り出す目的のWebサービスである。ブラウザベースなので、Photoshopを開く必要すらない。 絵で言うと、こんな感じ。 触ってみたら大体伝わると思うが、軽く機能紹介をしたいと。 初め方 projectparfait.adobe.com を開く。 参考用のデザインが出て来るが、自分のPSDで試す方が面白いので手元にあれば… 「Upload
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く