リンク(aタグ)をブロック要素(div)全体に効かせるCSS
スマートフォンの普及で、レスポンシブデザイン、スマホファーストが推奨されつつある中、今までどおりにテキストにリンク指定するだけでは、ユーザビリティを損ねてしまう場合があります。 例えばECサイトの検索結果一覧に表示される、画像とタイトル(テキスト)だけでなく、商品BOX(画像、タイトルが含まれる)全ての範囲にaタグ(リンク)を適用するCSSの書き方を記述します。 ※本文中にサンプルとして掲載しているBOXは全て、レスポンシブデザイン対応しているので、PCでご覧の方はブラウンザの幅を小さくしたり大きくしたりすることで、BOXにの伸縮を確認できます。 PR .link_box{ position:relative; width:30%; padding:5%; border:solid 1px #CCC; margin:0px auto 20px; } .link_box a{ positio
[CSS]使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素
CSS3のセレクタには便利なものがたくさんあり、複雑なHTMLやJavaScriptを使用しなければ実現できなかったことが非常に簡単なコードで実装できます。 Webページでよく利用されるテクニックに役立つ便利な5つの疑似クラスと疑似要素を紹介します。 5 Lesser Used CSS Selectors 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 疑似クラス・と疑似要素を使おう E:empty E::first-letter, E::first-line E:not(セレクタ) E:lang(fr) E:target 疑似クラス・と疑似要素を使おう もしあなたがCSSの新入生なら、あなたが使うセレクタはおそらくclassやidや要素名がほとんどでしょう。実はCSSで利用できるセレクタは、38種類あります（参考: Selector
![[CSS]使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素](https://cdn-ak-scissors.b.st-hatena.com/image/square/74174ecfeac99fc45dc37b0a40bfc40eea6c4183/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080410.png)
CSSで外部サイトへのリンクの後ろにアイコン画像を表示する
CSSで外部サイトへのリンクの後にアイコン画像を表示する方法を備忘録的に残しておきます。方法は色んなブログで紹介されていますが、画像リンクにアイコンを表示しない方法は決め手に欠けます。 外部サイトへのリンクの識別法 以下のようにすればリンクの後にアイコン画像を表示されます。 a { background:url(画像のURL) no-repeat right center; padding-right:15px; } これだとすべてのリンクに画像が表示されるので、外部リンクと内部リンクを識別する必要があります。 URLで識別する a[href^="http"] { background:url(画像のURL) no-repeat right center; padding-right:18px; margin-right:5px; } a[href^="http://weboook.blo
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
【HTML5リファレンス】HTML5・ページ作成の基本
こんにちは（・∀・） HTML5でWebページを作るときの基本です。DOCTYPE宣言文、言語コード指定、文字コード宣言など参考にしてください^^。 HTML5でページを作るときの基本 DOCTYPE宣言文 <!DOCTYPE html> DOCTYPE宣言文は従来のに比べてかなり短くなりました。 言語コードの指定 <html lang="ja"> 言語コードの指定は日本語ならjaです。 文字コードの宣言 <meta charset="utf-8"> 文字コードの宣言も短くなりました。utf-8推奨です。 スタイルシートの指定 <link rel="stylesheet" href="sample.css"> type="text/css"は省略して短くできます。 スクリプトの指定 <script src="sample.js"></script> こちらもtype="text/javas
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
【業務効率が変わる！】こんな時に役に立つ「正規表現」の使い所 | WebNAUT by Beeworks
※この記事は2013年7月10日に執筆された記事です。現在は仕様が異なる可能性があります。 大変です！ あなたは、公開間近でクライアントから少々面倒な修正依頼を頂きました。 対応したいのですが、大型案件の為、納品するページ数は膨大にあり、該当する箇所がどれほどあるのか想像がつきません。 さて、この場合どのような対応がベストでしょうか？ 今回は、ベストな対応をしたい方の為に便利な正規表現の使い所をご紹介します。 公開間近でクライアントからこんな修正依頼が、、、 クライアントから下記の修正依頼を頂きました。 該当するページ数は未だ不明ですが、調査対象は明日公開予定の膨大な数のHTMLファイルです。 1. ¥を円の表記に統一（¥9,000→9,000円） 2. 「しております」「してます」を「しています」に統一 3. 外部リンクのaタグは別窓指定 4. 素材と販売元の行を入れ替える 5. 最後の
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
IEなんて怖くない！冷静にバグを叩き潰すための11のヒント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングを始めてはや1年。今でこそ、そこそこできるようになってきた僕ですが、初めの頃はそれはもう悲惨なものでした。 あるときはIEのバグで先輩に助けを求め、またあるときはIEのバグで先輩に助けを求め、そしてまたあるときはIEのバグで先輩に助けを求め・・・。 そんな時代に、CSSハックを使わず、極力自力でバグをつぶすために、僕は先輩の助言を元に「バグで詰まったらまず目を通す11のヒント」なるものをノートにリスト化して書きとめておいたのでした。 バグったらとりあえずこの項目に目を通す。するとGoogle先生に頼らずともなんとかなるようになりました。 今でこそもう使わずともよくなりましたが、コーディングに不慣れな方は、このようなリストを作っておくといいかもしれません。 参考程度に以下、ご覧になってみてくだ
HTML5 のマークアップで心掛けたい事 - HTML5 のいろいろな要素
HTML5 のマークアップで心掛けたい事を挙げてみます。 平成25年 5月16日現在、HTML5 勧告に向けて、グラフィカルなウェブブラウザの開発者は HTML5 への対応を急速に進めておりますが、そうでない環境、例えば音声出力ブラウザや CUI 環境向けテキストブラウザなどについては、殆どと言って良い程話を聞きません。 こう言った事から、HTML4/XHTML1 時代の環境でも問題なく取り扱えるようにマークアップすべきでしょう。 はじめに。 平成24年12月17日に HTML5 の勧告候補が発表され、HTML5 は勧告に向けて大きく前進しております。 特にグラフィカルなウェブブラウザの開発者は、WAHTWG に加盟していないマイクロソフト社を含めて HTML5 への対応を急速に勧めており、西暦2014年に勧告される頃には、殆どのグラフィカルなウェブブラウザが HTML5 対応になっている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
クロノドライブのコーディングガイドライン
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
CSS Reference | Codrops
extractCSS - Online CSS Extractor
http://www.hp-stylelink.com/news/2013/10/20131001.php
