somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

html/CSS

【html】タイトルの変更

Twitterをブラウザで開いているときに、新しいツイートを取得するとタイトルが変更されます。実際に変更してみるとどうなるのか調べてみました。 タイトル変更 以下のブラウザで試しました。 IE8 FireFox12 chrome18 Safari5.1.5 開発者ツールなどを使ってタ…

【html5】ブラウザにデータを保存する【Web Storage】

html5でブラウザにデータを保存するWeb Storageについてのメモです。 Web Storage ブラウザにデータを保存するというとcookieを思いだしますが、いろいろ な点で異なるようです。 似ている点は、以下のとおりです。 ドメインごとのデータを保存 Javascriptで…

【html】Apple端末専用のsafariメタタグ

enchant.jsの勉強中に出てきました。 Apple端末専用のsafariメタタグ Apple端末専用のsafariメタタグとは、Apple端末でWEBページをsafariで見るときに働くようです。なので参考にしているのはsafariのリファレンスです。今回調べたのは以下の二つです。 appl…

【CSS】Twitter Bootstrapに触った感想【html】

CSSフレームワークのTwitter Bootstrapを一通り?触ってみたのでその感想をメモしておきます。 学習環境 ローカルでhtmlを書いていくだけですので、ライブラリ以外に特別必要なものはありません。 実現できたこと 以下のとおりです。 固定ヘッダー 検索バー …

【html5】モバイル端末向けのページのレイアウト

スマートフォンなどのモバイル端末向けのページのレイアウトに関するメモです。 viewport The <meta name="viewport"/> meta tag can be used to control how HTML content will appear in mobile browsers. It contains a comma-separated list of properties in the form name=val</meta>…

【CSS】CSSだけで特定番目の要素にスタイル適用する

Twitter Bootstrapに触れていたら見つけたのでメモしておきます。 今まで 今までは、phpなどのサーバサイドで調べたり、Javascriptで調べる必要がありましたが、CSS3では調べるためのnth-childというものが存在します。 nth-child nth-childのあとに()と、()…

【CSS】固定と流動的【html】

固定レイアウトと流動的なレイアウトについて調べたのでメモしておきます。 固定 固定レイアウトは、pxなどの固定となる単位を使用して作るレイアウトです。文字通り大きさは固定になるので、難しいことはありません。欠点は、解像度によることです。 流動的…

【CSS】CSSフレームワーク【html】

CSSフレームワーク を調べてみました。 CSSフレームワーク CSSフレームワークでぐぐってみましたが説明されているサイトなどはありませんでした。フレームワークでできることを元に説明すると、ウェブデザインをする際にほぼ必須となる横並びやspanの調整、…

【CSS】ページングナビゲーション

.pager li { display: inline; } .pager li span { display: inline-block; padding: 4px 6px; border: 1px #CCCCCC solid; } .pager li span.now { display: inline-block; padding: 4px 6px; border: 1px #CCCCCC solid; background-color: #EEEEEE; font-…

【CSS】ページ全体を中央寄せにする

指定している要素は、bodyとbodyの直近の子要素container(ページ全体を示すid)の2つです。 基本は、marginを自動にするだけで、ブロック要素が中央寄せになりますが、IEの場合よりません。 その対策として、text-align:centerでインライン要素を中央寄せにす…

【CSS】marginの場所指定

いつも忘れるのでメモしておきます。 #container { /* 個別指定 */ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; /* 左から「上 右 下 左」の時計回り */ margin: 10px 20px 30px 40px; /* 「上右下左」の指定 */ margin…

【CSS】メニューの横並びと回り込み解除とclearfix

横並びのメニューを作成したときの方法と問題点のメモです。 横並びのメニュー 通常縦に並ぶリストを、横並びにすることで実現しています。横並びにするために、float属性を使用します。 float属性は、その要素をその名のとおり浮かせるようなイメージだそう…

【html】実態参照文字の書き方

ブログにhtmlコードを書くときに、&gt;などと書きます。これに、gtなどの文字以外に10進表記や16進表記があることを今更知りました・・・。 今後、&#数字;を見ても疑問に思わないようにしないといけないですね。 HTMLで使える文字実体参照 HTML文字コー…

【CSS】スタイルの書き換えを指定URLに任せるとhttpコード206

開発中に見慣れないコードを見かけたので調べていたら、httpコードについて詳しく載っているサイトを見つけました。ちなみに、見かけたのは206(レスポンス完了後のクライアント側からの書き換え[css]のURL指定)ですた。 [Studying HTTP] HTTP Status Code

【html】突き抜ける文字を折り返す

また起きたときに絶対忘れる自身があるので、メモしておきます。 ある幅のdivタグ内に、その幅以上の文字列を表示すると突き抜けてしまいます。 突き抜けるだけならまだしも、IE6だと幅まで広がってしまいます。 そんなときに「style="word-wrap: break-word…

【html】1行に左寄せと右寄せ

よく忘れるのでメモしておきます。デザイン苦手です・・・ ※ボーダーは関係ありません。 <div class="border"> <p>pタグテキスト</p> <div align="right" style="margin-top: -35px; margin-right: 7px;"> <button class="default">buttonテキスト</button> </div> </div> pタグテキスト buttonテキスト 参考 1行内に左寄せと右寄せを同時に書きたい [ホームページ作成] All About HTML/CSSで右寄せの6つ…

【CSS】文章に枠をつける

文章に枠をつける方法のメモです。 1.CSSファイルをアップロード ・下記の内容を記載したCSSファイルを作成する(数値や線の形および色はお好みで) .border { border: 1px #FFFFFF solid; padding: 5px; } ・ファイルアップロードリンクを押下後、作成した…

【html】<pre>タグの意味

preタグについて気づいたことをメモします。 syntaxhighlighterを使用する場合、改行の扱いを自動改行からHTMLタグのみに変更しています。 理由としては、preタグに囲んでいる部分は改行もそのまま扱われるからです。 ということは、改行の扱いを普段か…

【html】selectedとchecked属性の正しい書き方

selected="selected" checked="checked" trueで書いたらauの実機で適用されませんでした。 参考: http://www.au.kddi.com/ezfactory/tec/spec/wap_rule.html http://d.hatena.ne.jp/maru_cc/20080613/mobile_option_selected