[B! html] peketaminのブックマーク

peketamin id:peketamin

htmlに関するpeketaminのブックマーク (143)

CSS でテーブルに行番号を振る - Qiita
リスト要素に対して番号を振りたければ 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>
peketamin 2020/07/16
知らなかった〜

HTML

CSS

table
リンク
「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita
続編を書きました。CSSも大幅改善してるので、一度見てみてください。︻小数点実装︼﹁(HTML +) CSS﹂のみを使って、今﹁もっとリアルな電卓﹂を作ってみた - Qiita完成品まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめにはじめて、CSS カウンターの存在をはじめて知ったときは驚きました。テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がないと思っていたからです。Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - QiitaCSSで見出しタグに連番をつけ
peketamin 2020/07/16
LaTeXで3並べを作ってた人を思い出した https://iwatam-server.sakura.ne.jp/software/tictactoetex/index.html

css

html
リンク
WebでHTMLをいい感じにコピーさせる - VideoTouch Engineering Blog
こんにちは id:mstssk です。 Webサービスを作っていると、何かしらをユーザーにコピーして使ってもらうというシチュエーションが出てきます。 WebページをシェアするためにURLのコピーボタンが置いてある、なんていうのはよく見かけますね。しかし、ある程度複雑なコンテンツはHTML情報としてコピーさせたい事が稀にあります。画像やリンクを含んだHTMLです。そこで、もう少し欲張って、こういうことが出来ないか調べてみました。テキストエディタに貼り付けると、HTMLソースコードのテキストとして貼り付け WYSIWYGエディタに貼り付けると、書式情報を保ったコンテンツとして貼り付け3行まとめただのテキストをコピーするだけならクリップボードAPIを使えばOK。 HTMLをWYSIWYGに貼り付ける状態でコピーさせるには、現在非推奨な実装方法を使いつつ一工夫必要になるけど可能。一行
peketamin 2020/06/10
_FAV_

html
リンク
<input type=submit>は止めて<button type=submit>を使うべき - Qiita
表題の通り問題多くのHTML Formでは送信ボタンのサンプルとして以下のようなコードを例示してします。
peketamin 2020/04/12
value="日本語" は多言語対応とかでも不都合だし、とのことで同意

html

フォーム
リンク
How to prevent buttons from submitting forms
peketamin 2020/04/12
“<button type="button">Button</button>” 知らなかったー！

html
リンク
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。イベントについてまずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
peketamin 2017/12/20
リンク
<a>か<button>か - hitode909の日記
クリックできるものがあって，<a>にするか<button>にするか，という話をしていて，いろんな観点があるなと思ったのでメモ．単なる画面遷移なら<a> 単にformを送信したいときは，<input type="submit">や<button> <button>はdisabled属性を使って無効状態にできるので，押せない場合もあるなら便利リンクを<a>にしておくと，PCではホバーするとリンク先が見えるので，ユーザーにとっては何が起きるか予想できて便利そう考えるとformは押してみるまでどこに飛ぶか分からないので怖い気がするリンクを<a>にしておくと，:visitedを使って訪問済のリンクの色を変えることができて便利モーダルウィンドウを出すとき，ウェルカムメッセージを開くボタンを<a href="#welcome">として，/#welcomeのときにウェルカムメッセージを出す，とし
peketamin 2017/12/08
HTML

ui
リンク
GitHub - joshbuchea/HEAD: A simple guide to HTML <head> elements
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
peketamin 2016/10/25
HTML

html5
リンク
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお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 やチームコラボレーション系サービスを想定する。攻撃者は、このサービスの不
peketamin 2016/06/15
Webを便利にしようと持って実装された window.openerなんだろうけど、便利を意図した機能には不正介入がついてまわるなあ

セキュリティ

html
リンク
GitHub - scrapy/w3lib: Python library of web-related functions
peketamin 2016/01/21
Python

HTML

ライブラリ
リンク
Templates and Themes » W3Layouts
We help developers, designers and website owner's create stunning websites. We have been building a huge collection of website templates for every business and industry needs. Simply select your favourite template, edit, download and launch 🚀
peketamin 2015/02/05
テンプレート

webデザイン

HTML
リンク
HTML の q タグが日本語のサイトではカギ括弧を出すようになってた
HTML にqという要素がありますね。 Quotation のQですか。 <q> について文書内で引用をしたいとき、ブロック要素を含むような場合には <blockquote> ですが一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。q自体がデフォルトでインライン要素だしね。こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分がダブルクォーテーションで挟まれて表示されます。上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた﹁表示されます﹂って書いたんだけど、本当は﹁と思ってました﹂でした。こないだふと気づいたら、日本語のページではこれがこうなってました。﹁ここは引用ですよー。﹂クォーテーションマークじゃなくてカギ括弧になってる。知らんかった。いつの間に。 <q> を初めて使
peketamin 2014/12/01
便利げ

HTML
リンク
Private Presentation
Private content!This content has been marked as private by the uploader.
peketamin 2014/10/25
やり過ぎるとエンジニアが死ぬ→じゃどこまで→90パーセンタイル

パフォーマンス

HTML
リンク
GitHub - ericchiang/pup: Parsing HTML at the command line
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
peketamin 2014/10/04
cli

HTML

parser
リンク
ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本 CSS の基本 JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
peketamin 2014/08/08
webサイトの作り方

HTML

CSS

javascript

入門
リンク
Sophomoric Periods
REAPERを高解像度ディスプレイで使うととても小さく表示されて使いづらいので、スケーリングやフォント拡大の設定をする。 UIのスケーリングま Arch Linux（Manjaro Linux）でThinkpadのトラックポイントのボタンが不安定な場合の対処法December 31, 2020
peketamin 2014/08/01
golang

template
リンク
CSSMENUMAKER.COM
Get a price in less than 24 hoursFill out the form below. One of our domain experts will have a price to you within 24 business hours.
peketamin 2014/07/27
ナビゲーション

css

メニュー

menu

html

webデザイン
リンク
Google HTML/CSS Style Guideについて、そろそろひとこと言っておくか - teppeis blog
話題になっていたので、 <html>,<body>は要らない？Googleが推奨するHTMLファイルの記法 - Qiita [キータ] 便乗して、一年以上前に社内勉強会で作った資料があったので今更ながら公開してみます。 Best practice from Google HTML/CSS Style Guideはい、当時流行っていたimpress.jsを使いたかっただけの資料ですね。読めば分かるように、これはGoogleさんの中の人のためのスタイルガイドっていう側面が強くて、とにかく1byteでも削ることに命を懸けてます。省略できるところは全部削っていくスタイル。われわれ平民の提供するサービスとはトラフィックの桁がいくつも違う世界の話なので、鵜呑みにすると悲しいことになりますのでお気をつけて。ちなみに、 HTML and CSS, including GSS files のGSSっ
peketamin 2014/05/01
google

HTML

css

guide
リンク
Googleがtitleタグを置き換える3つの理由と書き換えを防ぐ方法
[対象: 全員] Googleは数年間から、状況に応じて、HTMLのtitleタグの記述ではないタイトルを検索結果に表示するようになりました。どのように書き換えるかはアルゴリズムによって完全に自動化されています。タイトル修正が発生しやすい状況をGoogleは説明していますが、アルゴリズムはその後も絶えず改善されています。現状はどのようになっているのでしょうか？ GoogleのMatt Cutts︵マット・カッツ︶氏が説明しました。検索結果のタイトルをGoogleはどのように選んでいるのか基本的に、タイトルを選んだり検索結果にどのタイトルを表示しようか決めたりしようとするときは、検索クエリに関連性があって簡潔な記述かどうかも常に見ている。僕らが見ている基準はいくつかある。比較的短いかどうかそのページのことをよく説明できているかどうか。そのページがあるサイトのことも説明できてい
peketamin 2014/04/30
seo

google

title

HTML
リンク
Project Parfait、公開！ | fenomas.com
デザイナーがPhotoshopでカンプを作る。そしてエンジニアに渡し、HTML化やアプリ化が始まる。だがカンプ通りのデザインを実現するためには、フォントサイズ、グラデーションのRGB値、オブジェクトの高さと幅、XY座標などを、Photoshopからコードに写す手作業が必要だ。まるでコピペ大会になる。こんな経験ない？あるあるの方に、ちょっと面白い発表がございます。Project Parfait︵プロジェクトパフェ︶は、PSDから簡単にデザインの詳細を取り出す目的のWebサービスである。ブラウザベースなので、Photoshopを開く必要すらない。絵で言うと、こんな感じ。触ってみたら大体伝わると思うが、軽く機能紹介をしたいと。初め方 projectparfait.adobe.com を開く。参考用のデザインが出て来るが、自分のPSDで試す方が面白いので手元にあれば… ﹁Upload
peketamin 2014/04/23
HTML

PSD

コーディング
リンク
1 2 3 4 5 6 7 8 次のページ