body内から外部CSSを読み込む | miyasaka.info
CMSなどで<head>内が全く変更出来ず、JSもCSSも追加出来ない、といった環境に、Web屋さんなら行き当たった事があるはず。 そんなときは、<body>内でJSを使って<head>にCSS読み込みを追加すれば良い。 具体的にはこんな感じ。 <script type=”text/javascript”> window.onload=function(){ var css=document.createElement(“link”); css.setAttribute(“rel”,”stylesheet”); css.setAttribute(“type”,”text/css”); css.setAttribute(“href”,”/common/css/attend.css”); document.getElementsByTagName(“head”)[0].appendChild(
テーブル用CSS設定ツール［Web便利ツール］ - TAG index
CSSコード .example table { border: 1px #000000 solid; } .example td { border: 1px #000000 solid; } HTMLコード <div class="example"> <table> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table> </div> まずHTMLの設定で、表の列と行、キャプション（表のタイトル）、見出しのセルなどを設定してください。設定内容の詳細は、HTML テーブルタグカテゴリーでご覧になれます。 続いてCSSの設定で、枠線や背景色、余白など、見栄えに関する設定を行なってください。設定内容の詳細は、CSS テーブルカテゴリーで
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
Lightbox2.5～2.7 | Webサイト制作支援 | ShanaBrian Website
Lightbox2.5～2.7の使用方法をご紹介しています。 Lightbox2.5～2.7は別ウィンドウ（ポップアップ）ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。 Lightbox2ではprototypeを利用していましたが、lightbox2.5以降ではjQueryを利用するようになりました。 公式サイト ※ このライブラリは、jQueryが別途必要です。 ※ ボタンなど透明pngを使用しているためIE6では一部表示が異なる場合や動作しない場合があります。 ※ Lightbox2.6以降ではjQueryが1.10.2未満のバージョンだと正常に動作しない場合があります。 目次 ダウンロードと設置 JavaScriptおよびCSSの読み込み 適用方法 グループ化 キャプション 設置時に異なる階層への対応方法 ダウンロードと設
floatを使わずにinline-blockで横並びにする方法｜web bibo
floatを使ってボックスを横並びにする場合、その中で高さが違うボックスが混ぜっていると、そこでレイアウトが崩れてしまいます。ブログやCMSなど自動的にボックスを生成するとき、高さの違うボックスがでてくる場合があるので、この方法を知っておくと便利だと思います。 floatで横並びにするとレイアウトが崩れる場合がある 先述しましたが、floatで横並びにすると高さが違うボックスが混ぜっている場合、レイアウトが崩れてしまいます。 <div class="wrap"> <div class="box">float 1</div> <div class="box height">float 2</div> <div class="box">float 3</div> <div class="box">float 4</div> <div class="box">float 5</div> <div
SMACSSによるCSS設計 - Qiita
前案件でBEMチックな書き方をして、あまりのクラス名の長さに キィェエエエ！！ってなった後で、 CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。 ※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。 本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。 SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid CSSカテゴライズ 5つにカテゴライズして、それに準じた名前を付ける 1.ベース 2.レイアウト 3.モジュール 4.状態（ステート） 5.テーマ 1.ベースルール サイト全体で要素そのもののデフォルトスタイル
Studio ODIN - blog風小ネタ集 > 打消し線の色を変える
CSS で打ち消し線を表示するには text-decoration に line-through を指定しますが、打ち消し線の色と文字の色を 個別に設定することができません。 打ち消し線と文字の色を別にするには、 次のように <span> を入れ子にします。 外側の <span> で「打ち消し線と文字の色」、 内側の <span> で「文字の色」を設定します。 span.del { color: red ; text-decoration : line-through ; } span.del span { color: black ; } <span class="del"><span>test</span></span> これで 打ち消し線と文字の色を別にすることができます。
[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference
javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。 javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block（またはその逆）にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display
なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
今更聞けない:before :afterの使い方 - Toro_Unit
CSS2.1で定義された疑似要素、:before,:after。 しかし以外に使い方を知らないって人が多いはず。 clearfixとかで色々お世話になっているはずのbefore,afterの使い方を改めてまとめて行ければと思います。 before,afterの生成される場所 selecter:before,selecter:afterの生成される場所はhtmlでかくとここ。 [html] <selecter> <!–div:beforeの生成される場所–>hogehoge<!–div:afterの生成される場所–> </selecter> [/html] 図で表すと、こんな感じ。 また、 [css] selecter:after { content: ""; display: block; } [/css] などとCSSを書くと という感じになります。 これを使ってclearfixは作られ
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
IE8・IE9をクラッシュさせるシンプルなCSSコードが見つかる
わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace-bamberg.de/Benutzer:Schinken/CSS-IE-Crash デモページはこちら、IE8・IE9だとアクセスした瞬間にクラッシュし操作不可能になるので注意。 http://schinken.github.io/experiments/iecrash/crash.html 実際にIE8でアクセスしてみたところ、ページにアクセスしたとたんに一切の操作を受け付けなくなり、そのまま
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
tr要素の「display : block;」にはまる
Internet Explorerでは、ボタンをクリックするたびに、2行目の表示／非表示が切り替わります。 しかし、Firefox等では表が乱れ、2行目の左端のセルに、2行目の内容がすべて詰められて表示されます。 また、Firefoxでは、2行目を再表示するたびに表が長くなっていくという現象も起こります。 ちなみに、表示／非表示の切り替えは、以下のようなJavaScriptで行っています。 function toggle_row_a(id) { var obj = document.getElementById(id); obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'; return false; } 2.問題の原因 この現象は、Internet Explorerの不具合（または実装が不十分）ではない
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSリセット手法
なんでCSSすぐ死んでしまうん
CSS Regions で計算をする
IDEA * IDEA
