内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
HTML5 と CSS3 で 死にたい
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
HugeDomains.com
Captcha security check protocoder.com is for sale Please prove you're not a robot View Price Processing
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)
Note: Updated Oct 10th, 06'. Added ability to randomly pick a stylesheet to apply to the page (automatically). Description: You've seen such a feature on other CSS based sites, now you can have it too. This is a "plug & play" style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your sit
CSS Maker - スタイルシート簡単作成ツール
ページ設定 | 通常リンク | ホバーリンク | 訪問済リンク | クリック時リンク | スクロールバー | ヘディング あなたの電子メールアドレスを入力して送信してください。 作成したスタイルシートのファイルを電子メールでお送りします。 後はスタイルシートに基づきあなたのウェブページをレイアウト調整してください。 作業が完了したらスタイルシートとウェブページをサーバーにアップロードしてください。 電子メール: * 後でダイレクトメールを送ったりはしませんからご安心ください！
いろいろなサンプル集 『ホームページ研究室』
ホームページ研究室 JavaScript（ジャバスクリプト）、DHTML（ダイナミックHTML）、CSS（カスケーディングスタイルシート） その他、いろいろなサンプル集 ここではHTMLのソースを見ることが出来る人を対象に、主としてJavaScript（ジャバスクリプト）、DHTML（ダイナミックHTML）、CSS（カスケーディングスタイルシート）を使ったサンプル、その他を公開しています。 興味のあるかたは、ご自由にサンプルの をご覧ください。 注） ソース内には、特に解説などは設けておりませんが、質問・リクエストを頂ければ、出来る限りお答えしようと思っております。 お問い合わせ・リクエストは、『JavaScriptやDHTML、CSSを使ってこんなページは作れる？』とか『こういう動作のページを作りたいんだけど』でＯＫ。 気軽に作者までメールでお問い合わせ、もしくはＱ＆Ａ掲示板へ投稿し
hail2u.net - Weblog - 二重枠線ボタン
どこかで「フォーム・ボタンのボーダーにdoubleを指定するとカッコイイぜ！」みたいなのを見つけて、1週間ほど前から使ってみてたりするわけですが、これはなかなか良い気がする。とりあえず憶えておくと即戦力になります。 doubleだとカッコイイとは言っても、実は単にdoubleにすれば良いわけではないようで、四辺のborderを別個に指定し、うまいことベベルっぽくしないとダメな感じ。 僕はシャイで口下手(エイプリルフールは過ぎたのにネタっぽい)なので、言葉では説明できないため、デフォルトのボタンからCSSのルールを増やしていってかっこよさげなボタンを作るプログレスをHTMLでまとめてみました。 borderのサイズはいろいろ試してみればわかりますが、3pxじゃないとうまいことまとまってくれません。 フォーム部品のスタイリングは困ったものなので、こういった即戦力なテクニックを憶えておくとなかな
CSSレイアウトのサンプル集:phpspot開発日誌
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. CSSで段組デザインをする際に、とても参考になるサイトを発見。 ＣＳＳでの段組レイアウトのサンプルがサムネイル付きで４０種類紹介されています。 お好みのデザインを見つけてソースを開いてコピー＆ペーストすればお好みのデザインを素早く作れますね。 ＣＳＳも
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
in te redi: はてなブックマークをカスタマイズ
posted by nano on June 10, 2005 06:51 tohatenatips はてなブックマーク日記 - デザイン編集機能の追加について(はてな) はてなブックマークににデザイン編集機能が追加されました。はてなブックマーク導入時に要望したトップページにリンクを貼る機能もこれで実現できます。 デザインガイド(はてなブックマーク) はてなブックマークの構造(?d:kamioka) とりあえず、上のエントリを参考にこのブログのメニューをのせてみたのですが、はてなのバナーより上にメニューを持ってきたので、どこぞのiframeサイトみたいな感じに； →はてなブックマーク - nanomemo ソースをメモ。気に入ったのがあったらコピペして下さいませ ・ページのヘッダ <hatena name="usersearch"> <div id="ban"> <div class
Passion For The Future: TopStyleはHTMLデザインに手放せないツール
TopStyleはHTMLデザインに手放せないツール スポンサード リンク 今日は開発ソフトの紹介。Webページのデザインでは、コンテンツや構造をHTMLで書き、デザイン（装飾やレイアウト）はCSSで、分離して、コードを書くというのはWebデザインの世界では、当たり前になってきた。ふたつの技術を覚えなければならないので、技術を意識せずに制作できるオーサリングソフトは人気がある。 だが、ホームページビルダーや、DreamWeaverなどの統合開発環境を使わずに、手でHTMLを書くという私のようなタイプはまだまだ結構多いのではないだろうか。無駄なコードがなくてシンプルに作ることができるメリットもある。 手書き派にとって頭が痛いのがCSSによるデザイン開発だ。CSSに要素を追加するごとにHTMLをブラウザーでいちいち読み込ませて確認表示しないといけない。面倒だなあと長いこと思っていたが、最近は私
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「オレがルールだ！」：HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール その２
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
Clockworks | CSSで作るタブ風メニュー その2
AWCS
はてな[日記タイトルを画像にする・日記タイトルに背景画像を入れる2]![はてな[日記タイトルを画像にする・日記タイトルに背景画像を入れる2]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2399268c45f05176589994884651cf8a795231e/height=288;version=1;width=512/https%3A%2F%2Flive.blog-tags.st-hatena.com%2F%2F_next%2Fstatic%2Fimages%2FogImageDefault-0b14dbf84ffadcafc73ec8b1d951813c.png)