今回まとめた内容をあらかじめ言っておきます。 CSS JavaScript イメージギャラリー Generator Ajax です。 とりわけJavaScriptやCSSは色々なブログでも使える為、ブロガーも頑張れば導入可能なプログラム等をなるべく多めにまとめました。 これは『個人的な感想』のテーマで、私個人が遊び心をくすぐられたものをまとめています。 あくまで私がくすぐられたもので、他の人がくすぐられるかどうかまでは保障できませんので、上記キーワードに興味の無い方は特にあらかじめご了承ください。 送信ボタンなどをちょっとセクシーにするCSS 送信ボタンなどをちょっとクールにかわいらしくする為の知識。 JavaScriptがいらないイメージマップの切り出しサンプル 画像にマップを埋め込んで華麗に表示する為の知識。 口で言うより、デモを見たほうが早い。 チェックボックスとラジオボタンをオシャ
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
ボックスの幅が制限されていて、且つ'white-space'に[nowrap]や[pre]が指定されていて、テキストが横方向にはみ出し、且つ'overflow'に[visible]以外の値が指定されている場合、長過ぎるテキストは右にはみ出します。 このプロパティは、そのはみ出したテキストに対して、可視部分の最後に省略符号(「...」の事)を入れるかどうかを指定します。置換要素には無効です。 キーワード解説 ellipsis はみ出した行の可視部分の最後に、省略符号「...」を付け足します。 clip 普通にテキストを切り取り、省略符号はつけません。 以下にひとつ例を挙げておきます。'text-overflow'と'overflow'を換えてみて、大体の感じを掴んでください。 <div style=" width:120px;height:50px;border:1px solid blue
漬物は料理において重要なアクセントを提供します。 その酸味が、食事の味わいを引き締め、新たな深みを加える役割を果たします。 例えば、酢漬けの漬物は、独特の酸味と爽やかさで料理全体を軽やかにし、油っぽさを中和します。 これにより、食べ手の口の中をさっぱりとさせるだけでなく、食欲を増進させる効果も期待できます。 また、塩漬けの漬物もまた重要です。 塩の効果で野菜から水分を抜き、旨味を凝縮させることで、料理に深いコクと風味を加えます。 この塩味は料理全体のバランスを整え、食事を豊かにしてくれます。 漬物の酸味が生む料理のアクセントは、料理の種類や季節によっても異なります。 夏にはさっぱりとした酢漬けの漬物が、冬には塩漬けの漬物が特に重宝されます。 季節感や地域の食材と漬物の組み合わせを工夫することで、料理の魅力がさらに引き立ちます。 漬物は単なる付け合わせではなく、食事の一部としてその重要性を増
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
2007年05月11日18:45 カテゴリiTech あなたのページを最速にする14の掟 人気Webサイトの管理人、必読。 紹介ページ: 14 rules for fast web pages (Skrentablog) PPTのスライド: http://www.web2expo.com/presentations/webex2007/souders_steve.ppt 実は、これらはYahoo!の"Chief Performance Yahoo!"(本当にそういう役職名)であるSteve Soudersによる以下のblog entriesをまとめたもの。 Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests Performance Research, Part 2:
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get: Sliding doors Since we want our buttons to be über-flexible, we'll have to make the background image expand with the si
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted - by developers and browsers. Still, if you take a closer look at the float theory, you’ll fi
Updated Feb 23rd, 08: Adds ability for menu to revert back to default selected tab when mouse moves out of menu. Only ddtabmenu.js changed! Description: DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents. Hi
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
The web editor for Mac is back. For people who make delightful, innovative and fast websites — in an app to match. Espresso helps you write, code, design, build and publish with flair and efficiency. Sophisticated text features, amazing Live Preview with Browser Xray, CSSEdit tools, the Navigator, Dynamo auto-building, and Server Sync. Whether you're starting from scratch or tweaking a live site,
いま会社で、鼻毛にCSS指定をするというのが、ごく一部でにわかに流行しております。 以下、現在考案されている、鼻毛CSS。 はみ出た鼻毛を切る 鼻毛 { overflow:hidden; } 鼻毛を抜く 鼻毛 { position:relative; top:1000px } はみ出た鼻毛を折り返す 鼻毛 { word-wrap:break-word; } 一定の長さ以上鼻毛が伸びないようにする 鼻毛 { max-height:50%; } 鼻毛を白髪にする 鼻毛 { border-color:#ffffff } 鼻毛の先に鼻くそをつける 鼻毛:after { content:"鼻くそ" } 鼻毛の密生 body { background:url(鼻毛); } 毎日伸びるやっかいな鼻毛をCSSで制御できるなら、こんなにありがたいことはありません。 CSSハックにしてライフハック。 P.S.
レポートを端々とまとめますよー 良いところも悪いところも隠さずまとめますよー。 そういえば、こういうレポート書くの始めてだ。 あ、ちなみに Apollo WPF は飲み会で聞いた話がほとんどでつ＞＜ オープニング かっこいい動画。 スペシャルコンテンツ ミニオーケストラ。 20分 エコなWebデザイナーになろう - 長谷川恭久 エコと言っても環境問題の話ではない。 最初は環境問題の話から始まるが、途中でネットが汚染されてるとかって話がすり変わって、 font 要素とか table レイアウトとか SEO スパムとかの話になる。 コードをリサイクルしようといってエディタの機能を紹介 カメレオンアイコン 率直で分かり易い言葉を使おう ブログ書いたり、会話したりして、共有しようぜ どちらかというとオープニングのライトな話って感じ Apollo、インストールから向かうビジョンまで - 太田禎一 太
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
後編では、Chart Usage(WebFX)、CSS FOR BAR GRAPHS(Apples To Oranges)、 Artichowを紹介します。 ・Chart Usage(WebFX) http://webfx.eae.net/dhtml/chart/usage.html 最初は、JavaScriptのみを使用してグラフを生成してしまうライブラリです。 全ての処理をクライアント側で行うため、グラフを表示するだけならサー バー側のスクリプトは必要はありません。 あらかじめ必要なjsファイル、CSSファイルを読み込んでおき、グラフを出力し たい場所にid付きの<div>タグを設置しておきます。 以下の例では id="chart" の<div>タグ内にグラフが表示されます。 現在このライブラリは、Apache Software License 2.0 に基づいて自由に使用す ること
画像編集ツールで領域を選択しているようなエフェクトをCSSとGIFアニメで実現する方法。 次のように、ブロック要素を目立たせたい場合に非常に効果的です。 作り方は簡単で、次のような4x4ピクセルのGIFアニメを用意します。 簡単な画像を組み合わせて、一般的なGIFアニメ作成ソフトで作れます。 次に、次のようなＨＴＭＬを作ります。 <html> <!--CSS--> <style type="text/css"> body { background-color:orange; } div#selectblock { background-image:url("back.gif"); padding:1px; width:300px; } div#innerblock { background-color:white; padding:8px; } </style> <body> <div i
认证在线平台✅太阳集团tcy8722,太阳网集团tyc8722✅高效快速出款,拥有千万会员,持在线合法执照,信誉保证,请您放心...
Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
