webサイトで、ブラウザの高さに合わせてファーストビューを作る場合、CSSでheightを100vhに設定すると、実際にスマホで見た場合、若干下にはみ出てしまう問題を解決します。 PCブラウザのレスポンシブモードなどでチェックしながら作っていく段階では気がつかないやつです。 vhとは CSSのViewportを基準にした単位の１つ。 Viewport Hightの意です。 100vhでブラウザの高さ目一杯なので、1vhはブラウザの高さの1/100です。 vhがあるんだからもちろんvwもあります。 Viewport Widthで、100vwで横幅目一杯になります。 よくある、ブラウザのサイズに合わせてファーストビューをデザインする場合、要素の幅や高さを100vh、100vwにすれば、どんなサイズで閲覧しようとも、縦横目一杯に表示することができるので簡単・便利🙆♀️ <div>Box</d
CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickering 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSレイアウトの厄介な問題 Media Queryで実装する -ばかげてます JavaScriptで実装する CSSで解決 はじめに 私はこの6ヵ月の間、さまざまな活動に取り組んでいました。 ※これらに限定されるものではありません。 頭をかきむしる 窓の外をみつめる ベッドで天井をみつめる 枕に叫ぶ 呪文をつぶ
現象が起きた内容 以下の条件のときに、画像がぼやける問題が発生しました。 CSS a, img, input, svg, *:before, *:after { transition: all 0.5s; } a:hover img, a:hover input, a.hover:hover, .btn a:hover, .btn input:hover { text-decoration: none; opacity: 0.8; } HTML <ul> <li><a href="https://futaego.com"><img src="/asset/images/logo01.png" alt="ふたえごブログ"></a></li> </ul> 問題が起きた理由 実際の問題がこのサイトで起きたわけではないですが、問題が起きたサイトのおそらくの理由はRetina対応による大きい画像を使
CSSでコーディングしているときに画像の下に謎の隙間ができることがあります。今回はその原因と対象方法について書きたいと思います。実際、以下のようになります。 ソースは以下です。 <div> <img src="/sample/image/sample.gif" alt="sample" />abcdefg </div> div{ background:#F00; width:200px; } この現象の原因はCSSのプロパティでインライン要素の垂直位置を指定する、vertical-alignにあります。このvertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているからです。vertical-alignの値の意味は下記サイトに載っていました。 vertical-align－スタイルシートリファレンス つまりgとかjとか下にはみ出るアルファベ
CSSの擬似セレクタ :before と :after において、content プロパティに日本語を設定すると、表示時に文字化けが起こってしまう場合があります。大半のブラウザでは文字化けが起こらないのですが、マルチブラウザをサポートしなくてはいけないような場合に備え、予防線を張っておく必要があります。 文字化けする要因CSSを外部ファイル定義している場合に起こるCSSファイルの文字コードが Shift_JIS でない (UTF-8 等)文字化け回避方法直接日本語を書くと文字化けする場合がある例えば下記のように直接contentプロパティに日本語で定義した場合、文字化けとなってしまう場合があります。 .test:after { content:"€ユーロ"; }前述の通り、ブラウザ依存による文字化けなので、ブラウザに依存しない方法で記述してあげましょう。 日本語の文字化けを回避する定義方法
初めに よし、ヘッダーを画面上に固定してやろ（＾ω＾） って時に え、ヘッダーの上に文字が来るんですけど( ‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ とか スクロールして、動的におしゃれに上部メニューを表示させたいのにスクロール中に表示されない( ‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ とかそんな事件の対処法をテンションに任せて書いていこうと思います。 事件１「z-index」 概要 ヘッダーにposition:fixedを指定してtop:0,left:0で画面上部に固定しているのに なんで他の要素が上に来ているの！？という事件。 DEMO DEMO キャプチャ code html <body> <div class="div_elm"> hoge </div> <div class="fixed_elm"> hoge </div> <div class="div_elm"> hoge </div> <
inputにbefore使おうとしてはまったのでメモ。 仕様読めばすぐ解決（できないという意味で）だったんだけど色々試して時間無駄にしてしまった。 12. Replaced content If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::af
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
