[B! CSS] h-a-t-e-h-a-t-e-h-a-t-e-n-aのブックマーク

CSSで画面の横向き/縦向きを判別して表示を分ける方法 [ホームページ作成] All About

スマートフォンのような「画面の小さな端末」でウェブページが閲覧された際には、端末が横向きなのか縦向きなのかによってデザインを分けたい場合があります。例えば、列数(横方向の項目数)の多い表を掲載したページ、1画面単位でスクロールさせるような見栄えに凝ったページ、横長の動画を配置したページなどでは、横幅の狭い画面(縦向きの小型端末)で閲覧されると見にくくなってしまいそうです。そのような場合は「横向き(横長画面)用デザイン」と「縦向き(縦長画面)用デザイン」の2種類を用意しておき、閲覧者の環境に合わせてスタイルが切り替わるように作成してあると望ましいでしょう。なお、(タブレットのように)元々画面が広い端末であれば横向きでも縦向きでも構わない場合もあるでしょうから、「画面が小さい場合で、向きが縦の場合」のように複数の条件を組み合わせてスタイルが切り替えられると便利です。横向きか縦向きか、望ま

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/09/29

スマホやタブレットの縦と横をメディアクエリーで判別してCSSを分ける

CSS

リンク

[jQuery]hoverでfadeInさせると1pxずれる現象の対策 - Qiita

hoverでfadeInさせると1pxずれる現象の対策です（ちなみにChromeでした）。hoverすると1pxずれる現象自体は割とよくあるみたいで、ブラウザによって対処方法が違います。 Chromeの場合 display: inline-block; を使う要素に display: inline-block; の記述を追加したら、マウスオーバー時にズレが発生しなくなります。 backface-visibility: hidden; を使う要素に backface-visibility: hidden; の記述を追加します。参考：【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する) Firefoxの場合 backgroundの指定を追記以下を追記

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/09/14

各ブラウザでホバー時に1pxずれる現象の対策

CSS

リンク

水平型リストで画像を並べた時の隙間を消す6つの方法｜web bibo

display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。 XHTML&CSSを記述 li { display: inline; } <ul> <li><img src="/images/tips/h_list_space_01.png" alt="HTML" /></li> <li><img src="/images/tips/h_list_space_02.png" alt="CSS" /></li> <li><img src="/images/tips/h_list_space_03.png" alt="JavaScript" /></li> <li><img src="/images/tips/h_list_space_04.png" alt="PHP" /

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/08/31

インライン要素の隙間の消し方

CSS
HTML

リンク

Google Maps iframeでホイールスクロールを無効 – ブログ @ デジドリ

デジタルドリームワークスから比嘉です。たぶん「こんなの知ってるよ！」というくらい、ちょっとしたメモです。ホームページにGoogle Mapsを組み込むことは多々あります。 Google Maps APIを使用すればよりカスタム性は上がりますが、そこまでは… という方にはGoogle Mapsの「共有」から組み込みコードを取得してコピペで簡単に導入出来ます。 Google Maps 非常に便利ですが、少し気になる部分も出てきます。ページの表示速度が遅くなること。そしてページをスクロールする際にマップの上引っ掛かることがあります。実際に試して下さい。スクロール中にマップにさしかかると、マップのズームが反応してスクロールの妨げになります。 PCの場合はカーソルをマップからずらせば問題ないですが、スマホとかだと画面一杯に表示されていて面倒だったりもします。 Google Maps API

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/08/18

グーグルマップ埋め込み（iframeで）時にスクロールを無効

CSS

リンク

CSSでborderにグラデーション！？ | 成果に導くホームページ制作ならウィズスタイル

CSSで線にグラデーションをかける方法です。カンプが出来上がってきて、ここよく見たらグラデーションじゃね？みたいなことありますよね。画像で作成してしまえば手っ取り早いんですが、画像での対応はレスポンシブ対応のサイト制作では障害になることもあります。僕自身もできる限りCSSで再現できるものはCSSで制作したいと考えています。グラデーションを表現するには？まずCSSにグラデーションをかけるにはbackgroundにlinear-gradientを使用します。ベンダープレフィックスが必要になるので扱いずらいです。さらにこの関数はブラウザ間での書き方に相違があるのでかなりの曲者です。そこで使用したいのが、グラデーションを直観的に作成できるジェネレーターです。色々なWEBサービスがありますが、私自身がよく使用しているので今回はこちら。 http://www.colorzilla.c

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/07/26

背景色でグラデーションを指定し、上から色を被せて一部のみグラデーションを適応

CSS

リンク

:before content image のサイズを指定する - CSS note

:beforeなどの擬似要素を使った画像の場合、widthやheightを指定することができませんが、工夫をすると、サイズのコントロールが可能になります。コンテンツの背景として画像を設定する .entry-title:before{ margin:0 10px 0 0; content:" "; display:inline-block; width:80px; height:60px; background:url( http://www.tenman.info/images/DSCF0024.jpg); background-size:contain; vertical-align:middle; } 新着記事 ©2024 cssTheme URI: http://www.tenman.info/wp3/bootsDescription: Raindrops theme of chi

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/07/21

擬似要素を画像のレティーナ対応する方法

CSS

リンク

Google Fontsの日本語フォント「Noto Fonts」の使い方

そしてもちろん我らが日本語も用意されています。日本語のフォントセットは「Noto Sans CJK JP」という名前です。日本語は優遇されているのか7つも異なるウエイト（太さ）が用意されています。ちなみに名前にあるCJKとはChina、Japanese、Koreaの3つです。1バイト言語の256文字に収まらない、2バイト言語をまとめてCJKとしているようです。（2バイト文字は65536種類に対応している）中国語は「Noto Sans CJK SC」、韓国語は「Noto Sans CJK KR」と、それぞれ別のセットで、相互に対応していません。統一感のあるセットになっているとのことですが、それぞれの言語が混在する状況はあまりなさそうです。 2バイト文字は数千もの文字を作成する必要があるため、Adobeだけではなく各書体メーカーの協力しています。それぞれ日本語はイワタ、中国語はChang

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/06/29

グーグルフォント（日本語）を使用する際の注意事項や使用方法 font-saze:100%; はいらない

CSS

リンク

要素の高さを指定するせずにアニメーションがついたアコーディオンを作成するテクニック『CSS3 Accordion』 | 9ineBB

開閉の動作は、CheckBoxやjavascriptを使ったものではなく、focusを使ったのも特徴的 heightの高さの変化をtransitionで変化させたのではなく、marginの方を変化させていますこのCSSのmargin-top: -100%;と .acc-panel { padding: 1.5em; position: relative; float: left; clear: both; margin-top: -100%; z-index: 1; transition: all 1.2s ease; }

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/04/12

高さを確定せずにアコーディオンをmarginと:focusを使って実装

CSS

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/03/15

hoverエフェクトjs無し

CSS

リンク

Ultimate CSS Gradient Generator from ColorZilla

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/03/03

ジェネレーターのグラデーションをcss3で吐き出してくれる

CSS

リンク

★★★隙間を埋める！フッターをウィンドウ下部に固定する3つの方法 | 株式会社LIG

こんにちは、モモコです。ページを作っている際に、想定していたコンテンツ量よりも原稿が短く、フッターの下にブラウザとの隙間が空いてしまう事がありました。このスカスカ感を埋めるべく、フッターをウィンドウ下部に固定する方法を調べたので備忘録も兼ねてご紹介します。 positionを使い、フッターをコンテンツ下部に固定する方法【HTML】 <html lang="ja"> <body> <div id="wrap"> <header>ヘッダー</header> <div id="contents">コンテンツ</div> <footer id="footer">フッター</footer> </div> </body> </html> 【css】 html,body{ height:100%; } #wrap{ width: 100%

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2016/02/12

コンテンツが少ない時でもフッターをウィンドウ下部に固定するcss（コンテンツが増えた時は自動で伸びる）

CSS

リンク

counter-incrementプロパティを使って自動連番を実現する – mororeco

counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやolタグで実現可能ですが、「第1章」や「Q1.」などのように数字と文字を合わせて挿入することは出来ません。そういった際にcontentプロパティを使用します。カウンタの制御は、counter()、またはcounters()の形式で、()内に「カウンタ名やスタイル（list-style-type）、区切り文字をcontentプロパティに指定します。通常のカウンタはcounter()を用いて、同じカウンタ名のリストがネストされた入れ子構造のリスト等の場合には、counters()で一括指定が可能です。

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/12/15

CSSで連番などをふる

CSS

リンク

動くCSSのためのメモ。

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/11/30

css3

CSS

リンク

なぜCSSのborderで三角形ができるのか、実際にコードを書いて調べてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、おじいちゃんです。 Webサイトを作っていると、デザインによってはCSSを使って三角形を作るときがあります。便利ですよね。画像だとhover時に色が変えられなかったり、作ったとしてもアニメーションがつけられなかったり、かといってSVGにするほどでもない。 CSSのborderを利用することで、三角形は比較的簡単に作れますし、アニメーションもできる。それではなぜborderを利用することで三角形が表現できるのか、考えてみたことありますか？今回はborderを利用して、三角形を表現できるCSSの挙動について紹介したいと思います。まずは書いてみる黒で塗りつぶされた三角形を書いてみます。 <span>タグに任意のクラスを当てたHTMLを用意して、下記プロパティを当てることで三角形が表現できます。 <span class="triangle"></span> .triangle{

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/10/29

cssで三角形を作る

CSS

リンク

Chrome、Firefox、Safari、IEそれぞれのみに適用されるCSSハックの書き方まとめ

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/10/21

各ブラウザのハック

CSS

リンク

digitalskill.jp

Buy this domain. digitalskill.jp 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/10/15

webkit系ブラウザ(サファリ・クローム)のスクロールバーをCSSでカスタマイズ

CSS

リンク

inline要素を横並びにしてできる隙間を消す - Qiita

要素をinlineにして横並びにすると、デザイン上、隙間が生まれます。原因は改行コードなので、HTMLで改行を行わなければいいのですが、コードの見栄え的によくありません。また(コメントアウト)で改行による隙間を消すこともできますが、こちらも見栄えとしてあまりいいとは思わないので、letter-spacingを使って消していきます。 HTML

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/10/06

インライン要素の左右の隙間を無くす

CSS

リンク

CSSフォント指定を考える2015 - リシンプル

必要なCSS フォント指定を考えてみる海外のWebサイトでは、Webフォントを用いることが常識化しています。Google フォントなどのWebフォントが無料で使用できることもあり、どのブラウザ、OSでも共通したフォントが使えるWebフォントはかなり価値があるものとして重宝されています。しかし、日本語におけるWebフォントの整備は、世界のフォント事情からするとかなり遅れており、トラフィックに応じた課金で使用するWebフォントが主流となっていることもあって、使用するにはハードルが高く、その他のいくつかの問題もあり、まだまだ、閲覧者のローカルでインストールされているフォントに頼らざるを得ません。そこで、日本語を表現するCSSのfont-familyのあり方を現在のWebブラウザやOSの標準フォントの現状を踏まえて再検討してみます。 font-familyで共通するものはないのかフォントをどう

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/09/25

2015年font-family指定

CSS

リンク

CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要 | 9ineBB

jQueryを使うと簡単にアコーディオンを実装する事が出来るのですが、CSSでもアコーディオンの作成が可能です CSSだけでアコーディオンを作成 HTML コード <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> <label for="Panel12">ボタン2</label> <input type="checkbox" id="

h-a-t-e-h-a-t-e-h-a-t-e-n-a 2015/09/18

cssのみでアコーディオン実装（ラジオボタンやチェックボックスを使用）

CSS

リンク

CSSのappearanceを使ったセレクトボックスのカスタマイズ | design Edge

セレクトボックス（select要素）のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を整えることができるようなので機会があれば試してみてはいかがでしょうか。 <div class="select-box01"> <select> <option value="">セレクトボックス01</option> <option value="">選択肢01</option> <option value="">選択肢02</option> <option value="">選択肢03</option> <option value="">選択肢04</option> <option value="">選択肢05</option>