[B! javascript][css][html] kitsのブックマーク

kits id:kits

javascriptとcssとhtmlに関するkitsのブックマーク (14)

現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！）対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。あとホームページ屋さんとかウェブコーダ
kits 2020/03/29
「2015年より前の知識は全て完全に過去の物」

html

css

javascript
リンク
CSSのid/class名のルールとそれにまつわるgetElementByIdとquerySelectorの動きの違い - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
kits 2013/08/26
#\000030id { } とか .\000030class { } とすれば適用できる。querySelector でも有効。

css

javascript

html
リンク
HTML によるプレゼン作成のススメ - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。昨日、 HTML5 勉強会で Opera の開発者向け機能についてプレゼンしてきました。会場が Opera の目黒オフィスということで急遽駆り出されました（笑）。こういったプレゼンをするときに必要なのがプレゼン資料（スライド）の作成。これまでは Google Docs や OpenOffice.org で作っていたのですが、これがどうにも不便。ちょっとしたことを
kits 2010/01/15
html

presentation

javascript

css
リンク
https://blog.8-p.info/2009/06/html
kits 2009/06/18
html

css

javascript
リンク
ウェブブラウザなんかに気を遣わなくてもいい理由 (agenda)
いつの間にか2009年になってしまった。 IE6に気を使わなくてもいい理由とか「そういう系」の話を聞くと、なんで非営利個人サイトが自分の嫌いなウェブブラウザなんかに一々気を遣わなきゃならないんだとか思う。もちろん気を遣うのには色々理由があるだろう。だが「気を遣わなくてもいい理由」というのもあっていいんじゃないか。そう思ってだらだらと悪文を書いてみた。本当に悪文だからまとまりはないよ。相手にしていられないほど膨大な種類の「ウェブブラウザ」この文脈においてはウェブブラウザではなく、所謂レイアウトエンジンやHTMLパーサの種類を把握すべきだろう。たとえばSleipnirもfubも、同じMSHTML.dllを利用しているなら一つとしてカウントできる。ウェブページのレイアウトエンジンレイアウトエンジン等の名称主なバージョン（2009年1月現在）応用しているプロダクト他
kits 2009/01/05
browser

css

html

javascript
リンク
最近よく使っているコードセットのようなもの　第9回　パーソナルブログの作り方-Re:Creator’s Kansai （リクリ）
2025年8月最新版レンタルサーバーおすすめ比較完全ガイド！当ページのリンクには広告が含まれています。
kits 2008/07/02
CSS, JS未対応の環境のことを考えると、マークアップはもっと改善できそう。

css

javascript

jquery

html
リンク
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。情報ソースこの問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
kits 2008/02/04
DOMの話。(タイトルでスルーしそうになったけど、Railsとは直接関係なし)

css

dom

javascript

html
リンク
「(X)HTML + CSS だけで Web デザイン」時代の終わり？
前回の続きプログラマへ質問: こんなプログラム言語があったら── : 亜細亜ノ蛾の続きです。 CSS で「できること」「できないこと」 CSS という言語は、「できること」（文字装飾など）と、「できないこと」（サーバ通信など）を覚えるまでは簡単です。できることがわかっていれば、「やりたいこと」の答えは検索ですぐに見つかります。できないことも、あっさり諦められる。問題なのは、「できなさそうでできること」（リンクに特定のアイコンを表示）と、「できそうでできないこと」（リンクに favicon を自動取得して表示）を覚えるのがやっかい。さらに、「全てのブラウザで同じように表示させたい！」と禁断の、いやごく普通の願いが、地獄への道しるべ。CSS 魔のダンジョンへ、ようこそ──。「CM 入りまーす」そこで──、すべての Web デザイナ・CSS ファン・ブロガ必見、現在絶賛
kits 2008/01/15
JavaScriptを使うとしてもHTML要素を追加したりとかCSSプロパティを介して表現を変更したりするのだから、本質は変わらないのでは。

html

css

javascript
リンク
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。このライブラリは新バージョンがあります。レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
kits 2007/07/26
class名固定ではなく、任意の要素を選択できた方がいいような。/ ブラウザ側で文字の大きさを変えても追随する。

javascript

css

html
リンク
lllcolor.com
We’re getting things ready Loading your experience… This won’t take long.
kits 2007/05/16
curvyCornersによる装飾について(コメント欄)

html

css

javascript

jquery

argument
リンク
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。デメリット・メリットの切り分けが困難です。そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
kits 2007/02/22
class名にファイル名書くぐらいならimg要素で書くよ… / 「装飾はCSSで記述されるべき」という話はどこへ

html

css

javascript
リンク
Nifty_Cornersに関する議論 - 徒委記
Nifty_Cornersに関する議論出典日本語での紹介記事 2005年3月19日 2005年3月20日 2005年3月21日 2005年3月22日 2005年3月23日 2005年3月24日関連情報 HTML + CSS + DOM(Javascript)を用いてブロックの角を丸く見せる手法(Nifty Corners)に関する議論。出典 Nifty Corners: rounded corners without images by Alessandro Fulciniti 日本語での紹介記事谷賢一さん画像なしで角を丸くするCSSテク: Nifty Corners - PLAYNOTE たつをさん [を] CSSで角を丸くする 2005年3月19日 DACさん適宜覚書: 角を丸めたいのは分かるが寸゛（ずん）さん ?D 大和但馬屋バンブラ日記 - 角を丸めず頭を丸めよ j
kits 2006/05/07
タイトルに(5)とかついてたので修正

html

css

javascript
リンク
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
kits 2006/04/18
逆に使いにくくなっているような(チェックボックス・ラジオボタンはそれ自体を押しても選択できなくなってたりとか)。

html

javascript

css
リンク
Javascriptで指定のHTML要素を動的に角丸デザインにする方法:phpspot開発日誌
Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascriptで指定のHTML要素を動的に角丸デザインにする方法。 NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。例えば、次のような単一DIV要素も簡単に角丸にできます。 <div id="nifty"><p>test</p></div> <script type="text/javascript"> Rounded("div#nifty","#377CB1","#9
kits 2006/03/15
Nifty Corners、一年ぶりに再紹介される。

html

css

javascript
リンク
1