実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
5000兆円欲しい！.css
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Home - PlType-Te
Top 5 CSS Libraries CSS is an essential part of any website. However, pure css code sometimes forces you to write too much unnecessary stuff, and many libraries are willing to take on the chore. Learn More 10 Sass libraries to help speed up website development SASS is one of the popular CSS preprocessors nowadays. Learn More 10 best libraries for CSS animation All in all I have tried about thirty
コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 - Web:a piece of cake!;
新ブログに移転しました。 ↓ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 | Webooker お手数ですが、ブックマークの移動をお願いいたします。
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
タイトルと日付（リスト）が一行なサンプル
どことなく良くありそうなリストのサンプルです。 ちょっと前にこんな感じのデザインのを組んだので、メモがてら色んなバージョンも作ってみました。 sample04辺りが良いかもしれないす。 サンプルページ ダウンロード ul要素のサンプル Sample 03まではul要素でやってみました。 XHTMLは↓こんな感じ。span要素無くてもいけそうな気もしたけど、めんどｒｙ <ul class="sample01"> <li> <a href="#">タイトル</a> <span>1983年03月24日</span> </li> </ul> Sample 01 positionプロパティ使って色々やってる感じです。 ul.sample01 { width: 500px; margin-bottom: 30px; padding: 10px; border: 1px solid #999; } ul
floatした際に背景が消える件【css tip】
floatした際に背景が消える件【css tip】 親ボックスに背景を適用して、内包する子ボックスに対してfloatを適用した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、以下のような表示に
div等に指定した背景をページの下まで伸ばしたい | Takazudo Clipping*
背景を下までずずーっと伸ばしたい時は、bodyにbackground-imageを指定すればよいですが、div等に指定した背景やborderをページの下まで伸ばしたい時は、以下のようにします。 <body> <div id="Container">高さ100%</div> </body> *{ margin:0;padding:0; } html{ height:100%; } body{ height:100%; } #Container{ height:100%; min-height:100%; width:80%; background:Khaki; border-right:1px solid red; } body > #Container{ height:auto; } 下まで背景伸びたHTML完成サンプル 以下、なぜこれで実現できるのかの解説と疑問点。とても長い。 Step
商品画像掲載のページ構成CSS
商品画像掲載のページ構成CSS ネタ元：商品画像掲載のページ構成css or table? なかなか語られることのない、Web制作の問題点が議論されています。 この問題はheightLine.jsを使ったり、tableで組むことで解決できるのですが、なんかそれをやると負けた気がする人がいるのも理解できます。 ですので、私が最近使っている方法を紹介。 サンプル コードに関してはサンプルから参照してください。 行ごとにブロックレベル要素で包み、その要素(サンプルではul要素)に対して、商品のリスト表示に使っている要素(サンプルではli要素)にかかっている物とおなじfloatプロパティを適用します。 副産物として、行ごとにブロックレベル要素で包んでいるのでclassを適用することにより背景色を変更することができます。 このマークアップも好みが分かれる所だと思いますが参考までに 関連エントリー 高
ブロックレベル要素の高さを揃える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
floatしたdivの高さを揃える « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
tableレイアウトからdivのfloatによるレイアウトに変更した際に、デザイン面で困ることがいくつかありますが、その1つが、floatしたdivの高さが揃わないこと。 floatしたそれぞれのdivに背景画像や背景色を設定していたり、borderでラインを入れている場合など、高さが揃わないため、情報量が少ないdivの下に隙間が空いてしまいます。 そういった問題を解決する方法です。 サンプル floatしたdivの高さを揃える 高さが可変（別ウィンドウで表示） floatしたdivの高さを揃える 高さ画面いっぱい（別ウィンドウで表示） ソース（高さが可変） floatされたdivの中で、もっとも高さがあるものに他のdivの高さも合わせる場合です。 float解除用のclass="cl"についてはfloat解除を参照してください。 html,body { margin: 0; paddin
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://docs3/test.html