[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
リストの横並び時に生まれる< li >の隙間を解決する5つの方法
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。 元となるソース HTML <ul> <li>バナナ</li> <li>リンゴ</li> <li>ミカン</li> </ul> CSS ul { margin:0; padding:0; list-style:none; } ul li { display: inli
HTML5でつまずきやすいasideとsectionの使い方
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
たった一行でclearfixを使わずにfloatを解除するテクニック｜クロノドライブ
floatを使った際の表示の崩れを正すためによく使われるclearfixですが、それを使わずともfloatを簡単に解除する方法をご紹介します。 HTML
高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
[(X)HTML] モバイルサイトにおけるinput要素の初期入力モード指定 | Blog | Development Reference
携帯サイトでは、特に何も指定せずにinput 要素を使用すると初期入力モードが全て「全角かな」になるため、メールアドレスや数字のみ入力すればよい項目は、いちいち入力モードを変えなければいけない。 これは携帯電話の特性上、ユーザにとっては非常にストレスになる。 input要素向け独自属性 これを回避してユーザビリティを向上させるため、各キャリアごとに初期入力モードを指定するためのinput要素向け独自属性が用意されている。 Docomo, au（istyle属性） 全角かな
二度押し防止の onsubmit で disable にするやつ :: Drk7jp
もう２年ほど前に話題になったアレなんですけど、今更ながらあるサービスでこの仕組みの導入を検討しています。 onsubmit で submit ボタンを disable にしてユーザビリティを良くする - naoyaのはてなダイアリー submit ボタン disable 技の罠 - naoyaのはてなダイアリー onsubmit で submit ボタンを < disable にしてユーザビリティを悪くするのはやめてください - のヮの うんこ♥ onsubmit で disable にするやつ - 鷹の島 onsubmit の disable 化ですが既に議論が終わっているように、onsubmit disable の実装方法として、 onsubmit イベント発生時に submit 要素を disable にして値をサーバへ渡すための hidden 要素を生成する方法 setTimeou
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
FirefoxでTITLE属性のツールチップ内改行を有効にしたい
さて趣味でプログラミングをしているわけですが最近は専らPHPのそれにかかりきりです（1.4.0がリリース間近ということもあり）。でも，たまにはJavaScriptのスクリプトも書いてみたくなります。 IMGタグにはALT属性がありますが，これは画像の代替テキストの役目を果たします。XHTMLでは必須の項目です。このALT属性なんですが，ホームページ作りに励んでいる方々はお気付きかもしれませんが，インターネットエクスプローラー(IE)とFirefoxでは，挙動が違います。IEでは，画像にALT属性があるとマウスのカーソルを重ねたときに，ツールチップ(バルーンヘルプ)が表示されます。でも，Forefoxでは何も表示されません。これはFirefoxのバグというわけではなくて，単にブラウザ間の実装(解釈)の違いに基づくものです。じゃ，Firefoxでもツールチップを出すにはどうしたらいいかというと
小人さんへの置き手紙: title 属性のツールチップ内で改行
カテゴリ html title 属性のツールチップ内で改行 2004-01-03 14:38 更新 多くのウェブブラウザは、HTML の title 属性の内容をツールチップとして表示する。内容が長い場合は適当に改行して表示することもある。では、任意の位置に改行を入れることはできないのだろうか？ WinIE では title="1行目 2行目" 実は、これで Windows IE はツールチップ内で改行してくれる。つまり、改行コードを空白扱いせず、改行として扱ってくれるのだ。しかし、妙な位置で改行すると、可読性が落ちるし、気持ち悪い。もうちょっとマシな方法はないものだろうか。 Windows での改行コードは CR+LF で、10 進表記コード番号は CR が 13 、LF が 10 だ。そこで、先程の例を次のように書き換えてみる。なお、 は数値文字参照で、先程の改行コードの番号に対
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
携帯サイトの作り方 第1回 作成方法の基礎 [ホームページ作成] All About
携帯サイトの作り方 第1回 作成方法の基礎携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。 (注) 本記事の解説は、ガラケーサイトの作成方法です。 本記事は、ガラケー(フィーチャーフォン)端末向けのウェブサイトを作成する方法の解説です。スマートフォン端末向けのウェブサイトの作成方法ではありませんのでご注意下さい。スマートフォン向けモバイルサイトの作成方法に関しては、下記の記事などをご参照下さい。 スマートフォン対応サイトを作る際の注意点 レスポンシブ・ウェブデザインの簡単な作り方 レスポンシブCSSで使うブレイクポイントの決め方 モバイルファーストでデザインする際のCSSの書き方 ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選
![携帯サイトの作り方 第1回 作成方法の基礎 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/99ea29bf657cd4dbe096c25bd4423077e189e7a5/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F9%2F9%2F201610192029%2Ftopimg_original.jpg)
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE6でのXML宣言の問題と回避方法 « BirDesign