CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
textarea のリサイズ機能を止めてみる
Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。 なので、止める方法を。 CSS3にそれっぽいプロパティが有るので、1行書くだけです。 textarea { resize: none; } こんな感じですね。 これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。 これだけだと、寂しいのでエントリーっぽくするために。 textarea以外に使うとしたら、トップページの新着情報みたいなので時々見る、高さ固定して overflow: auto; とかでスクロールバー出してる場合とかに使っていけばユーザー側でリサイ
FacebookのIFrameタブページでスクロールバーを消す方法
FacebookのIFrameタブページに表示されるスクロールバーを消す方法のまとめです。 １．スクロールバーが発生するケース スクロールバーは、コンテンツサイズが高さ800px・幅520pxを超えると自動的に表示されるようです（CSSでbodyセレクタにmargin:0; padding:0;を指定した場合）。 下のスクリーンショットは、サイズをちょっと超えた、青枠だけの画像を表示したものです。 IFrameタブページにスクロールバーが表示された状態 「高さ800px・幅520px」という値はブラウザ依存なので、大体の目安と理解しておくと良いでしょう。 参考までに、ブラウザ別のスクロールバーが表示されなかった最大サイズを掲載しておきます。計測は、コンテンツにimg要素を与え、width属性とheight属性を指定した方法で行っています。すべてOSはWindows VISTAです。 Goo
[JS]異なる高さのdiv要素の高さを揃えるだけのシンプルなスクリプト -Equalbox | コリス
Equalbox.js デモページ [ad#ad-2] Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> </div> <div id="box2" class="box"> <p>dsfsdfsdfsdf</p> </div> <div id="box3" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdf
HTML5･CSS3をサポートしたフリーのHTMLエディタ、BlueGriffon Ver1.0登場
5月10日、そのBlueGriffonのVer1.0が登場しました。BlueGriffonはNvuやKompoZerの後継となる、オープンソースのMozillaComposer：Gecko 2.0ベースのHTMLエディタです。 BlueGriffon,html5,css3,フリーなどについて。 プライバシーポリシー ▲BlueGriffon起動画面 BlueGriffon.org BlueGriffonはNvuやKompoZerの後継となる、オープンソースのMozilla Composer: Gecko 2.0ベースのHTMLエディタ。HTML5の全てのフォームエレメントもサポートした最新の WYSIWYGエディタです。 5月10日、ついにBlueGriffonのVer1.0が登場しました。 サイト内のBlueGriffon紹介ページを更新したのでお知らせします。 HTML5もサポート
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
HTML5のセクションで“文書構造”を理解する - ＠IT
（文書構造編：前編）HTML5のセクションで“文書構造”を理解する：HTML5“とか”アプリ開発入門（4）（1/2 ページ） HTML5の要素群を解説するに当たって 前回の「HTML5の登場で、XHTMLは結局どうなったの？」まで3回にわたり、HTML5に関する基礎知識を解説してきました。今回から、HTML5で定義されているマークアップ要素を解説していきます。 ただし、HTML5における要素の数は100以上に及びます。その中には、HTML 4から引き継いだ歴史のある要素も数多く含まれており、それらに関してはすでに多くの優れた解説があります。また本連載はHTMLのタグリファレンスではないため、HTML5の全要素を辞書的に参照していただくような形にはしません。 従って、HTML5から加わった要素、または利用法が変化した要素に絞って解説します。読者の皆さんが最も興味を持たれるのは、やはり「HTM
PHPと組み合わせることでブラウザごとのCSSセレクタが使えるようになる「PHP CSS Browser Selector」:phpspot開発日誌
PHPと組み合わせることでブラウザごとのCSSセレクタが使えるようになる「PHP CSS Browser Selector」 2010年10月31日- PHP CSS Browser Selector PHPと組み合わせることでブラウザごとのCSSセレクタが使えるようになる「PHP CSS Browser Selector」。 PHPでエージェント判別することで、ブラウザごとのCSSが書けるようになるのでハックなどを使わなくとも分かりやすいCSSが書けるようになります。 次のように、IEだけ、IE7だけ、Geckoだけという処理が簡単に書けるようになります。 .ie body { background-color: yellow } .ie7 body { background-color: orange } .gecko body { background-color: gray } 誰
HTMLでもっともよく使われているclass名，id値は「footer」 | TRIVIAL TECHNOLOGIES 4 @ats のイクメン日記
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー EuroPythonで聞いた，OperaのBruce Lawsonさんのキーノートに出てきた話題。 OperaがMAMAというHTMLマークアップの構造を専門にあつかうクローラーを作って，世界中のHTMLを読んで解析したところ，HTMLで最もよく使われているclass名とid値はともに「footer」だったのだそうです。class名は「menu」「style1」のように続きます。id値は「content」「header」と続きます。 class名の10位までのランキングは。。。 class名 出現回数
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
知らなかった…CSSのborderで斜めに線を引く方法:rynote
なんと画像を使わずにCSSのborderだけで、上のような吹き出しボックスが実現できてしまうようです！ 技術的には、border同士の重なりで斜め線を生み出して実現しているようですね。 ▼具体的なコードは以下のようになります CSS&HTML blockquote { margin: 0 0 50px 0; padding: 0;} blockquote#one { width: 250px; background: #e3e3e3; padding: 25px; position: relative;} /* 吹き出しの部分 */ blockquote#one .arrow { width: 0; height: 0; line-height: 0; border-top: 40px solid #e3e3e3; borde
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
みんなでよってたかってコメントがつけられるコード共有サービス『Chop』 | 100SHIKI