doctype 宣言のありなしの違い : (*x).b=z->a+y/c
◆ strict モードか互換モードかが変わる ◆ デフォルトのマージンで画面外の部分は無視される ◆ css の px が省略可能 ちょっと試したい時には 書かないで作って あとから書いてある方に埋め込むと動かなかったりずれてたり そういうことがあるのでとりあえず全部に書いておいたほうがいいと思います これを1行目に書くだけです コピペしなくても特に困らない長さです 違いは？どういう違いがあるかですが 上の宣言文は HTML5 の書き方で sttrict モードになります 何もかかないのは 互換モードです 互換モードは名前の通り昔の記述方法でも動くようにしています こっちのほうが便利なところもありますが HTML5 は strict モードだけらしいですし strict モードをメインに考えていけばいいと思います 宣言なしだと HTML5 が使えないってわけではないんですけどね よく困る
PageSpeed Insightsによるブログの表示速度測定と、高速化方法
Googleはウェブページの表示速度を、検索ランキングの指標にすると公言しています。表示速度が速いほど、読者にとっても便利ですし、検索上位に上がりやすくなります。 表示スピード測定ツールは色々あります。Googleが提供しているPageSpeed Insightsで測定して、対策をするのが一番効果的です。 PageSpeed Insightsの利用方法 表示速度を測定したいウェブページのURLを入力するだけです。分析ボタンをクリックすれば、30秒くらいで分析が完了します。 画像を最適化する スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する 圧縮を有効にする ブラウザのキャッシュを活用する 上記4点が指摘されているはずです。一つつづ対策方法をご紹介します。 画像を最適化する EWWW Image Optimizerプラグインをインスト
CSSで左右に別々の背景を設定する方法 | 福岡のホームページ制作会社 | シンス株式会社
こんにちは、福岡のホームページ制作シンス株式会社の越水です。 こんな感じでウインドウに合わせて幅100％の見出しのデザインとかってよくありますよね。 で、このようなデザインで画像にしておきたいのは真ん中だけ、ということが多々あります。 なんでかって言うと画像をそのまま幅100％表示させてしまうと、画像幅以上にウインドウが広がったときにせっかく作成した画像がボヤけてしまったりするからです。 なので上のイメージのように真ん中部分だけ切り取って、margin: 0px auto; などで常にメインイメージは中央に表示される、というようなレイアウトを作るのがよくあるやり方です。 そうすると問題になるのがエリア全体の背景です。 この例の場合、中央でグラデーションしているので左側と右側の背景色が別々になってしまっているんですね。 このケースだと中央に透過画像を設置して、背景となる要素はCSSでグラデー
要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法
例えばこんなHTMLを横並びにする場合、 <div class="list-box"> <ul> <li></li> <li></li> <li></li> </ul> </div>CSSはこのようになるでしょう。divタグには横幅を指定し、ulタグには横幅を指定しないようにします。 .list-box { overflow: hidden; *zoom: 1; width: 320px; } .list-box ul { margin: 0 -10px 0 0; //ネガティブマージン padding: 0; } .list-box li { float: left; width: 100px; height: 100px; margin: 0 10px 0 0; background: #000006; }この方法を使えば「marginを0にするクラスを用意して端っこの要素のみに付ける
一番簡単な、Googleモバイルフレンドリー対応の方法
2015/4/21 より、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。 Google 検索 – モバイルでの検索がさらに便利に 私が運営しているサイトのアクセスを調べてみると、どのサイトも、モバイルデバイスからのアクセスが半数を超えてきています。モバイル対応をしていないと、モバイルのランキングが下がってしまい、アクセス数が大きく減少してしまう可能性があります。 レスポンシブに対応したデザインを一から作るのがベストですが、もう時間がありません。とりあえず手っ取り早くモバイルフレンドリー対応をする方法をご紹介します。 サムリさんが紹介している方法が簡単です。 WPtouchはもういらない？プラグインに頼らずCSSの切替でスマホ対応サイトを用意する方法 1) ヘッダにviewportとcss切替えのタグを設置 下記コードをヘッダ<head>〜<
★CSS3リファレンス
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
JavaScript とかによるブラウザ判定方法のまとめ - A Memorandum
JavaScript でのブラウザ判定について まとまった情報がサクッとヒットしないので、まとめ UserAgent によるブラウザ判定 よくある単純な例 var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('opera') != -1) { return 'opera'; } else if (userAgent.indexOf('msie') != -1) { return 'ie'; } else if (userAgent.indexOf('chrome') != -1) { return 'chrome'; } else if (userAgent.indexOf('safari') != -1) { return 'safari'; } else if (userAgen
オンマウスで吹き出し説明文がポップアップ
通常サイズのマスクでは、お子様には隙間ができてしまい ウイルスを効果的に遮断できません。 このマスクは、プリーツ構造で自由に伸び縮みするプリーツ構造で快適な着け心地を実現しています。1日中着けていても、息苦しくなったり耳が痛くなったりしづらい作りになっています。 普通のマスクよりも小さめに設計された 幼児・子供用のマスクなので、顔が小さい方でもジャストフィット。 幼児や学校に通うお子様にぴったりです。 ■新型インフルエンザ新型インフルエンザとは？ 動物のインフルエンザウイルスが変化して人に感染したものが『新型インフルエンザ』です。容易に人から人へ感染して広がり、急速な世界的大流行（パンデミック）を起こす危険性があります。対策の3層型高性能マスク 外側と内側には不織布、 真ん中にBFE95規格フィルターを採用した3層構造でウイルスを防ぎます。 2層目にはBFE95素材が使われているため、 新
Webデザインリリック
「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法
CozyMax: Guides & Resources for Homeowners & Real Estate Investors
Hot Picks! Land for Sale in Illinois You Can’t Afford to Miss! From the serene countryside to the growing suburbs, and an easy access to urban centers—Illinois is an ideal place to invest. Whether you're looking for acreage near Chicago or a peaceful retreat in central Illinois, the options are plentiful.What’s more? Illinois’ farmland market is thriving with a 2.7% increase in land values. As lan
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
CSSフレームワーク『BlueTrip』が想像以上にすごい - present
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Arrow Please - By Simon Hoejberg - @shojberg
面倒なボタンデザインをCSSで簡単に！コピペで使えるCSS3ボタンデザイン