iOS（iPhone・iPad）のCSSハック15個 スマートフォンサイトでやっておくべき設定 | モバイル・スマホWeb・WordPressのSEO塾.com
半角スペースがあると意味不明のテキスト折り返し：半角スペースを に リンクをタップしたときのグレーのハイライトを無効に：-webkit-tap-highlight-color Safariの明朝をゴシックに：font-family iOS（iPhoneやiPad）やMacのSafariやChromeにSan Franciscoフォント：-apple-system-bodyとBlinkMacSystemFont GoogleのNoto Sans Japaneseはヒラギノに近い：@import ヒラギノ（Hiragino Sans）フォントのW3とW6：@font-face iPhoneなどで縦横画面でフォントサイズが変わる：-webkit-text-size-adjust リンク長押しのポップアップ：-webkit-touch-callout iPhoneなどのフォーム：-web
CSSで吹き出しを作っちゃうよ
CSSだけで吹き出しを作るメリット 画像を使用せず、CSSだけで吹き出しを作るメリットとして以下のようなものが挙げられます。 吹き出し内部のテキスト量に応じて、吹き出しのサイズが自動的に調整される 後から吹き出しのデザインを変更したくなった場合にCSSの指定で容易に変更可能 画像を使用しない分だけファイルサイズを節約できる iPhoneやAndroidでも表示できる 吹き出しをCSSで作る場合の考え方 吹き出しの外枠のボックスを用意してあげて、擬似要素である「:before」や「:after」といった要素を使って表現します。 自分で一から作ろうとすると、border要素を使って三角形を作ったり…、そして吹き出しに枠線を付ける場合は三角形を二枚重ねて微妙にずらしてとか…、ああ、めっちゃ複雑…！ 吹き出しを簡単に作ることができるWebサービスを使ってラクをしちゃいましょう。 CSS ARROW
(K)CSSで作った対談（会話）式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus|WEBデザイナーのための技術系メモサイト
以前、CSSで吹き出しを作って対談式のレイアウトを組んでみたんですが、PCのみのレイアウト組みだったので、新たにスマホ版の物を組んでみました(・∀・) PC版との違いを検証してみれば面白そうなので、見比べながら検証しようと思います。 @akiueoさんのブログで「どなたか改良版を」って書いてあったので、LINEのグループトークみたいなレイアウトの改良版をアップします（頼まれてもいませんが・・・） CSSで会話形式のフキダシデザインを作ってみる – AIUEO Lab2 以前組んだ奴とほとんど同じレイアウトで対応させた例 以前の物は横幅指定していたため、スマホではキチンと表示されませんので、width指定のところはすべて％表示に治す必要があります。【HTML】はほとんど変更なしです。＜img＞に直接指定しているサイズ指定を取っ払うのみです。 HTMLマークアップ 【HTML】 <body>
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
【Labs】CSSだけでサイズ可変・スマホ対応のアコーディオン
こんにちは（・∀・） CSS3のAnimationやtransitionといったプロパティのおかげでJavaScriptを使わなくても動きのあるWebサイトが作れるようになってきました。そこで今回はCSSだけで作る、サイズが可変してスマホにも対応したアコーディオンをご紹介します。 Contents チェックボックスでアコーディオン ラジオボタンでアコーディオン チェックボックスを使ったアコーディオンとラジオボタンを使ったアコーディオンの2種類です。それぞれの特質にあわせた形でアコーディオンが展開されます。チェックボックスを使ったアコーディオンはその性質上、ボタンを選択(クリック)したら選択した分すべて展開しますが、ラジオボタンのアコーディオンはnameでグループになっているので選択(クリック)した分だけ展開します。また、最初から展開している状態で表示したい場合はinput要素にchecke
CSSのみでグローバルメニューを3Dアニメーションで開閉表示するサンプル
いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に移動するエフェクトのサンプルをご紹介します。 Javascriptは使用せず、CSSのみで表現しています。 概要としては、label要素であるハンバーガーメニューアイコンをクリックすると、関連付けられているチェックボックスの属性を持たせた input要素のチェック状態が変化し、これをCSSの疑似セレクタ(:checked)を利用してチェックされた状態のときに、オフキャンバス状態にしてあるサイドメニューをCSSのtransition, transformプロパティによってスライド表示させる、というものです。 言葉ではわかりにくいので、まずは完成サンプルをご覧ください。 See
CSSファイルを<head>内ではなく</body>直前で読み込む - Qiita
Webページの表示は少しでも高速化させたいですね。 そのために我々はいろいろな方法を使いミリ秒単位の短縮化を頑張るわけですが、そのテクニックの一つをメモします。 Webサイト表示高速化の一つの方法として、レンダリングをブロックさせるCSSとJavaScriptをHTMLの<head></head>内ではなく</body>タグの直前に読み込ませるというものがあります。 JSは普通に</body>タグの直前に書けばいいのですが、CSSは残念ながら<head>~</head>の中にしか書けません。 HTMLの仕様が変わって書けるようになったそうです！教えてくれたmyakuraさんありがとうございます。コメント欄参照 それでもどうしてもCSSも</body>タグの直前に書きたいという場合はJSを利用し以下のように書くことが出来ます。 <head> ... </head> <body> ... <s
下方向にもCSS Transitionでスムーズにスクロール
少し前のCSS Transitionを使ったスムーズにスクロールしてトップに戻る機能という記事では、CSS Transitionを使ってスムーズにスクロールさせるためにbody要素のmargin-topプロパティーを負の値を設定した。これはとにかく上方向へのスクロールにしか使うことは出来ない。下方向にスムーズにスクロールさせるためにはまた別のアプローチが必要になるようだ。 何かしらのCSSプロパティーを使い、body要素を上方向にずらすということになる。つまりtransformプロパティーでtranslate()やtranslate3d()を使いY方向のマイナスへ動かすのが向いているようだ。あとはtransitionプロパティーを組み合わせるだけでスムーズにスクロール(しているように見せる)ことができる。 Demo: Scroll Down Smoothly with CSS Transi
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold Archive
どうもこんにちは、Honma です。今回の Tips は CSS のみで作れる吹き出しのデモです。簡単なツールチップなどにも利用できるかと思います。 CSSのみの吹き出し 5パターン×4方向 CSS は長くなるので全てデモページに記載してあります。 吹き出しの仕組み自体は :before :after 要素に三角形や円を作ることで表現しています。 Balloon 4 がうまく表示されない場合は z-index による可能性が高いので、吹き出しを囲う container の 値を 1 にするなど各自調節してみてください。 また、簡単に吹き出しを作るジェネレーター もありますので参考までに！ 以上になります。
CSSだけ！画像・JavaScriptなしのSNSボタン - Paritto
ソーシャルボタンはアクセスアップには当然設置しておいた方が良いですが、公式なボタンだと JavaScript のボタンもあるのでこれが読み込み速度を低下させます。 表示が数秒遅いだけでも離脱率が上がります。 さらに画像を使わなければもっと軽くなると思ったのでCSSとアイコンフォント( Font Awesome ) で JavaScript を除いた重くならないオリジナルソ－シャルボタンを作ってみました。 アイコンフォント Font Awesome を導入していないならまず Font Awesome を使えるようにします。 Font Awesome はHTMLの<head>～</head>の間に<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
2016年最強のFont family設定 - ミルログ
いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます
iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル
Blog Posts List ブログ記事一覧 検索 CakePHP3を始めた方に CakePHP 3.X 2016年01月16日(土) 14時23分 2つの住所から距離を計算する API 2015年12月18日(金) 10時23分 「:target」セレクタについて CSS 2015年12月12日(土) 12時23分 外部サイトからの画像への直リンクを防ぐ Apache 2015年12月04日(金) 12時23分 CSS3だけで作るブラウザタブ CSS 2015年11月17日(火) 21時23分 CSS3だけで作るパンくずに関する件 CSS 2015年11月12日(木) 12時23分 Bootstrap4のブレイクポイント計算機 Bootstrap 2015年11月11日(水) 19時23分 Bootstrap4のブレイクポイントに関する件 Bootstrap 2015年11月11日(水
レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編 | SEO内部対策についてまとめ【基本の対策を詳細解説】
運営中のサイトをスマホ対応にしたいとお考えの方へ、具体的なレスポンシブデザインの導入方法を数回に分けてご紹介します。 レスポンシブデザインについては、2015年4月21日からスマホ対応していないサイトに対して、スマホでの検索結果が下がる、モバイルフレンドリーアルゴリズムが導入されることから、モバイルユーザーの多いサイトにとっては無視できない対応となります。 モバイルフレンドリーに対応しているかどうかは、Googleの「モバイルフレンドリーテスト」から確認できます。 ※モバイルフレンドリーはサイト単位ではなく、ページ単位となるので、全ページ対応しないといけない訳ではありません。 今回は、このモバイルフレンドリーに対応する方法としてGoogleが推奨しているレスポンシブデザインにするための準備とポイントをご紹介します。 htmlやcssファイルなどは必ずバックアップを取って作業するようにしてく
コピペで簡単♪cssの見出しデザインサンプル10個作ってみた | CreativeTips
2014年12月25日css, WEB制作 cssでの見出しデザインを作ってみました。 ブログとかで使う見出しや小見出しなんかに使えると思います。 殆どのものを擬似要素を使って作ってみました。 中々センスある見出しデザインを作るのは難しいですね＞＜ ご参考になれば幸いです。 サンプルはこんな感じになります。 Resultボタンを押して表示を確認してみてください。 各ソースの紹介 それぞれのソース別にコードを紹介します。 なお各HTMLはこのようになっています。 <h3 class="sample1">CSS見出しデザイン</h3> <h3 class="sample2">CSS見出しデザイン</h3> <h3 class="sample3">CSS見出しデザイン</h3> <h3 class="sample4">CSS見出しデザイン</h3> <h3 class="sample5">CSS
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
【CSS】display:inline-block;で要素を横並びにする方法（前半はHTML5におけるボックスの話）
現在、（HTMLにおいては)ブロック要素、インライン要素という分け方がなくなりました。 では、どうなったかというと、その考え方はCSSに引き継がれています。 ブロック要素、インライン要素というHTMLの話ではなくて、 『その要素の、CSSにおける初期設定がブロック扱いなのかインライン扱いなのか』という分け方になっているわけです。 つまり、ブロック要素、インライン要素という分け方は廃止されたものの、ブロック扱い、インライン扱いという見た目の指定に関する考え方は残っているということです。 HTML4.1やXHTML1.0までは、HTMLの『ブロック要素、インライン要素という考え方』とCSSの『displayプロパティ』が混在していたので、HTML5では、それを整理したんですね。 見た目の話に限ると、『ブロック要素、インライン要素』が『コンテンツのカテゴリーやコンテンツモデル』に引き継がれたとい
CSSだけで画像の縦横比を保持したサムネイルスタイルまとめ
こんにちは、最近コーディングばかりでフォトショの使い方を忘れつつある中村です。 今回の内容もコーディングのお話です。 動的なサイトを作る上で、悩ましいのがサムネイル画像の表示。 画像のサイズが決まっているものなら良いのですが、縦長、横長とさまざまな比率のものが入ってくる場合、 縦横比を保ちつつサイズを揃えるのは一工夫必要です。 今回はスタイルシートだけでの記述方法をまとめました。 はじめに：内接リサイズと外接リサイズ 内接リサイズ：画像の長辺を枠に合わせる（枠内に余白ができる） 外接リサイズ：画像の短辺を枠に合わせる。はみ出た部分はカットされる。 内接リサイズだと画像全体が表示されるが、余白ができてしまい、並べた時にスカスカした印象になります。 逆に外接リサイズだと並べた時にはキレイに揃うが、画像の内容によっては不十分な情報となってしまう可能性があるため、どんな画像が入ってくるのか、予め考
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blog - LINE ENGINEERING
http://2ndidea.com/design/gray-on-web-design/