CSSになり損ねた言語たち | POSTD
TeXやMicrosoft Word、あるいはその他の汎用的なテキスト処理環境では簡単に実現できるような見た目に自分の文書を似せようと頑張る（文字どおり）無数の人たちに対して、 “悪いけど、うまくいかないよ” と繰り返し言い続けるのは、実際のところ、この1年間、私にとっては継続的な楽しみだった。- Marc Andreessen 1994年 Tim Berners-LeeによってHTMLが発表された1991年には、ページのスタイルを設定する方法はありませんでした。HTMLタグがどのように処理されるかはブラウザ次第で、多くの場合、ユーザの恣意的な入力が大きく影響しました。そうした事情から、ページがどのようなスタイルで処理されるかを”提案”するような標準的な方法を求める声が上がるようになりました。 しかし、CSSが導入されるのは5年先で、完全に実用化されるには10年の歳月を待たねばなりません。
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
ソースコード「唐辛子」
【使い方】 ソースコードを上のエディタに貼り付けて、画面下部のプログラミング言語を指定して、[変換]ボタンを押します。 すると、変換処理が行われ、プレビュー画面と、タグ付けされたHTMLが表示されます。 【対応言語】 JavaScript, XML/HTML, CSS, Adobe Flex(MXML), ActionScript2/3, BASIC(Visual Basic, VB.NET, VBA), PHP, Ruby 【ブログに貼り付けるとき】 ソースコードには、pre.code というスタイルが設定されます。 CSSタブにある、CSSファイル、あるいは、こちらにあるCSSをブログのサイトにアップして、ヘッダに次のような一行を追加します。 <link rel="stylesheet" type="text/css" href="source.css" /> 或いは、HTMLのSPA
CSS/HTMLリファレンスマニュアル、最新ブラウザ互換情報 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLやCSSを記述する際にもっとも気になるのが、使おうとしている機能が開発に使っている以外のブラウザでサポートされているかどうか、また、意図どおりに機能するかどうかだ。テストフェーズでまとめてチェックする方法もあるが、複数のバージョンが混在する現状では、テストフェーズまでチェックを引き伸ばせば引き伸ばすほど、後からブラウザ互換性を確保する作業が困難なものになる。 開発段階でブラウザごとの互換性やサポート状況をチェックしリスクを回避するために役に立つリファレンスマニュアルにSitePointが提供しているSitePointリファレンスシリーズがある。CSS、HTML、JavaScript版が提供されており、特にCSSとHTMLのリファレンスマニ
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
HTMLの表（TABLE）のセル(TD)に斜線を引くjavascriptライブラリslash.js by77-WEB@名古屋
HTMLの表（TABLE）のセル(TD)に斜線を引くjavascriptライブラリ slash.js HTMLで作成した表（TABLE）で斜線（主に空欄・記入禁止などを示すためのもの）を引こうと思ったら、そんなもの引けなかった… そんな経験はありませんか？ 従来、VMLを使う方法と画像を使う方法が知られていましたが、どちらも欠点があり、汎用的に使うことができるものではありませんでした。 ・VML…W3C勧告として採用されておらず、WindowsIEのみ使用可能。Firefox等に移植性なし。 ・画像…tdのサイズに合わせて斜線の画像を用意するので、サイト・ページごとに、斜線の必要なtdの数だけ画像を作成しなければならない。 そこで、複数のページ・サイトに導入可能（何度も同じものを作る必要なし）で、誰でも簡単に使えるものを作れないか？と思い、javascriptを利用したライブラリを作成して
Blogサイトで見かける変なHTML - 3ping.org
というキャッチーな見出しを付けてみたけれど、(X)HTML(以下HTML)なんてのは自由に書いて、伝えたい人たちに思っている事が伝わるならば、それでいーんです。と、最初に言っておくよ。 自分の作ったWEBページのメンテナンス性を上げたいと考える人や、ソースコードを簡潔にしてダイエットしたいと思う人も中にはいるでしょう。複雑なBlogツールのテンプレートソースに四苦八苦してる人、単にW3Cの仕様に準拠させたページを作りたいと思ってる人も多いかもしれない(それは素晴らしいことだよ！)。 コンテンツの利用価値を高めたいと思っている人達、そういった方へ向けて、僕がよく見かける「もっといい方法があるよ」と思えるHTMLの記述を、代替ソースとセットで書いていきます。 項目をa要素やbrを使って整形する リストをリンクのためのA要素でマークアップして並べるという、ブログのメニュー部分などでよく見られる
XHTML & CSS Lightbox
A valid XHTML & CSS Lightbox (no JavaScript) by Jenna Smith / Opera fix by Tobias Wiersch Click any of the links below to see it in action Lorem ipsum dolor sit amet, consectetur about us adipiscing elit. Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condi
デザインのための多重入れ子設計を考えてみた [css,tips,web制作,xhtml,設計] - BlurBlue-Note
月一更新になりつつあります…。 ネタがないんです。すみません…。 さて、今日はちょっと設計的なものを思いついてみた。 グラフィカルなデザインを実現しようとすると、毎回ネックになるのが内包物や文字サイズ変更に対する縦幅の可変対応。 例えば、周囲に枠線があってさらに上から下に向けてグラデーションがかかっちゃってるような角丸デザインを実現しようとすると、 ボックス最下部の角丸直前部分を横長に縦1pxスライスし、それをrepeatさせて、上部からグラデーション終わりまでをスライスしtopに配置、下部の角丸をbottomに配置する3重入れ子 上（もしくは下）から横いっぱいで想定しうる縦サイズにながーくデザインしスライスして、下の画像で閉じる2重入れ子 気にせず1枚画像で。 などが考えられる。無難なのは（１）だろう。 なにしろ中にどんなに長いものが入ろうが対応可能だ。 （２）は小さいサイズならまだしも
にししふぁくとりー
Produced by Fumihiro Nishimura(Nishishi). Since 1997. ●ようこそ！ にしし ふぁくとりーへ ここは、にしし(西村文宏／にしむらふみひろ)が運営する個人サイトです。にししふぁくとりーでは、RSS作成ソフト・ログオン記録ツール・テキストビューアなどのWindows用フリーソフトウェアや、スケジュール表示CGI・簡易マイクロブログCGIなどのフリーCGIを配布しています。日々思いついた駄文を適当に書き綴るブログや、著書の紹介、ウェブ製作方法に関するTIPSなどもあります。1997年の開設当初からほとんどのコンテンツは削除していないので、あちこち掘り進むと、いろいろ出てくる気がします。^^; ●にししふぁくとりー内の主要な更新内容と更新日 2024,03,16 ブログ(日記)更新！ ※コメント投稿による更新も含まれます。 ▼にしし製フリーソフト
デザイン機能の今後について (2) - はてなブックマーク日記 - 機能変更、お知らせなど
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。2月26日（月）～3月3日（日）〔2024年3月第1週〕のトップ30です*1。 順位 タイトル 1位 メルカリ 小泉さんからのエグい学び｜Shota Horii 2位 行動をチャンク化して「1日に1ターンしか行動できない」から脱却する | Piyopanman 3位 「それって陰謀論じゃないですか？」闇の国家「ディープステート」を信じる著名人一人一人に会ってみたら…どうなった？ ｜ 47NEWS 4位 いつか起業したいエンジニアへ #キャリア - Qiita 5位 日本人はなぜ「生産性の高い社会」を理解できないふりをし続けるのか 6位 「情報セキュリティの敗北史」が面白すぎる。だめだこれは寝れない、なんだこの死ぬほどワクワクする本は→賢者は歴史に学ぶ - Togetter 7位 味付け塩だけ、放置
なつかしのHTMLタグ「marquee」--CSS 3のマーキーを検証してみる - builder by ZDNet Japan
HTMLのマーキー マーキーの機能はInternet Explorerがバージョン2.0の時代に独自拡張したもので、<marquee>というHTMLタグで文字のスクロールを設定する仕組みになっている。現在でも、<marquee>タグはバージョン8（ベータ版）を含むInternet Explorerや、Firefox、Safari、Operaといった主要なブラウザでサポートされている。 しかし、W3CのHTMLやXHTMLの標準規格には含まれておらず、実際に利用される機会はほとんどないのが現状だ。 たとえば、<marquee>〜</marquee>でマークアップした文字は次のように右から左にスクロールを繰り返す。
エリックが言った「I don't know.」の件について[謎] | securecat's exblog
Web Directions Eastのワークショップに参加したコジカたん[誰]に感想などを聞きましたが、とりわけエリック（敬称略）が言った「I don't know.」の件について[謎]。 このように、マージンが設定されているBODY要素がある場合、ブラウザの枠とBODY要素の間に見えているのはHTML要素です（上図では白い部分）。この場合において、body { background-color: #FDD; } などと、BODY要素に背景色を設定すると、、、 このようになります。BODY要素の範囲を超えて、HTML要素にまで背景色が及びます。 さて、なぜHTML要素に背景色を指定していないのに、あたかもそうしたかのようになるのか？ これについて、エリックは「I don't know.」と言ったそうです。「理由はわからん。なんだか知らないけどとにかくそうなる」と。 しかしそれでは納得がい
![エリックが言った「I don't know.」の件について[謎] | securecat's exblog](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b2056201cac5689f7c39b1312a960a182e639a0/height=288;version=1;width=512/https%3A%2F%2Fpds.exblog.jp%2Fpds%2F1%2F200811%2F10%2F04%2Fd0036104_22391542.jpg)
HTMLをシンプルに保ちつつ、横並びリンクの区切りを表現する方法 | バシャログ。
横並びのリンクメニューを作成するときに | （区切り）を表現する方法はいくつかあると思いますが、 今回はシンプルなソースで実現する方法を、紹介したいと思います。 HTML は <ul> <li> のみでシンプルに。 <ul> <li><a href="http://c-brains.jp/blog/wsg/">ホーム</a></li> <li><a href="http://c-brains.jp/blog/wsg/about.html">はじめての方へ</a></li> <li><a href="http://c-brains.jp/blog/wsg/contact.html">お問い合わせ</a></li> <li><a href="http://feeds.feedburner.jp/bashalog">RSS Feed</a> </li> </ul> CSS <ul> に widt
今よりちょっとだけクオリティを上げるために。
執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？ よく分か
アイコンやサムネイルの横にタイトルと概要文があるような時。
とりあえず、暑いっす。えぇ。 ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。 あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。 ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。 さて、そろそろ本題に。 こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。 今回は、これの組み方の一つとしてサンプルを用意してみました。 サンプルの確認は以下より。 サンプルを見る こういうデザインの場合、どうやって組もうか結構悩むんです。 何に悩むって、この画像をどうやってマークアップするか。 今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があっ
img要素とbefore/after擬似要素の関係 - WebStudio
もずはっく日記(2008年7月) 2008年7月20日 img要素とbefore/after擬似要素の関係 初回投稿日時: 2008年07月20日01時43分15秒 最終更新日時: 2008年07月20日02時37分46秒 カテゴリ: CSS SNS: Tweet (list) ZDNetのcontentプロパティでコンテンツを追加する（2）：FirefoxとSafariのCSSにalt属性の値を画像のキャプションとして表示するという記事がありますがCSS仕様の解釈が間違っていると思います。私も昔、同様に考えていたのですがIan Hicksonにこの考え方は間違いであると説明されたことがあります。 まず、before、after擬似要素とはどんなものかを正確に知らなくてはいけません。これらの擬似要素は、その要素の前後ではなく、内容の前後に新たな内容を追加するものです。つまり、 foo:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わかめにゅーす(HTML/CSS) (@wHTMLnews) | Twitter
スタイルシートの学習ならWebWord