frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

css

親要素のコンテンツ幅を超えて100%の子要素ボックスを作る

css

レスポンシブデザインを作る上で時として無理をしなければいけない時があります。先日どうしてもコンテンツ幅を超えて100%のボックスを作る必要があり、そんなことできないかと思いきや調べてみたら発見することができました。ボックスにネガティブマージン…

display:flexでよく使う8つのプロパティ

css

display flexはとても便利ですが、プロパティが多く、単語も長いので覚えずらいプロパティかなと思います。そんな覚えたての方に向けてよく使うと思われるプロパティに絞って下記に例を挙げました。 .contents { max-width: 700px; } .lyt1 { display: flex;…

firefoxでbutton要素がクリック時に動くのを防ぐ

css

button要素って結構厄介でデフォルトのスタイルが当たっています。 button要素の中に画像を指定した場合 background: none; border: none; cursor: pointer; で十分かと思いますが、その場合firefoxでクリックしたとき動きます。 下記お試しください。See th…

【CSS】gridLayoutで使えるminmax()の新単位frとは

css

frはFlexible Lengthを表し fr単位を使用するこの長さは、グリッドコンテナ内の空きスペース領域の一部を表します。例えば、2つのセルを持つ100px幅のグリッドがあるとします。1つは20pxの固定幅で指定し、もう1つは1frで指定します。この場合、空きスペース…

【css】リンクの文字色とアンダーラインの色を変える方法

css

通常リンクテキストに text-decoration:underline; を当てるとそのまま文字色と同じ色のアンダーラインが付きますよね。See the Pen vmGLGo by funclur (@funclur) on CodePen. リンクの文字色とアンダーラインの色を変えるには? a要素の中にspanなどを入れ…

table-cellにtext-overflowを効かせる

css

text-overflowプロパティは厄介なもので、特定の条件下でないと効いてくれないことが多々あります。先日書いたものはselectbox内でJsを使用して3点リーダーを表示させるものでした。 www.frontendmemo.xyz今回はdisplay:table-cell内のテキストにtext-overfl…

擬似要素:hoverはないがhover:擬似要素はある

css

:hover+::after :first-child+::before 擬似クラスと擬似要素の違い 擬似クラス 擬似要素 ::beforeの:hoverはないが:hoverの::beforeはあります。 同じように::afterの:hoverはないが:hoverの::afterはあります。下記に例を示します。リンクにマウスオーバー…

bodyに充てるべきcss2017

css

bodyに充てるべきcssサイト全体を左右するのでとても重要です。自分が充てているcssは以下です。 (あくまでも一例) body { margin: 0; padding: 0; font-size: 16px; -webkit-text-size-adjust: 100%; font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku …

メディアクエリ最大値、最少値の書き方 mixinも

css

レスポンシブデザインサイトを制作する時、必須の記述メディアクエリ。こちらを何も見ずに書こうとすると忘れいることがあるので備忘録的に記事にしておこうと思います。 幅1200px以下 @media screen and (max-width: 1200px) { } max-widthつまり、最大値が…

【css】サイズのわからない要素を縦横中央揃えにしたい

css

cssで縦横中央揃えにしたいことは、よくあることだと思います。その場合、中央揃えにしたい要素のwidth、heightがわかってるか、もしくはどんなサイズが来ても中央に来るよう対応させるかでcssの充て方が変わってきます。 サイズがわかってる場合 codepen.io…

【JS不要】cssのみでtelリンクを無効にする方法

電話番号をかけさせたいときのhtmlは以下のようにします。 <p class="tel"><a href="tel:0312345678">03-1234-5678</a></p> しかしこれだと、PCの時でもリンクしてしまい、レスポンシブデザインで制作している時は、スマホのみに対応させたいですよね。以下のようにすれば、cssのみでPC→電話リンク無効、スマ…

【css】android4.3とandroid4.4の差が激しい

css

android2系は、使えないプロパティが多いイメージでしたが、実は4系でも4.1~4.3までは使えないことが多いことに気づきました。 1位 display:flex flex系は対応していません。4.4から対応しています。flexの対応状況はこちら↓ Can I use... Support tables f…

infoアイコンから×へ ハンバーガーアニメーションの応用

css

巷では賛否両論あるハンバーガーメニューですが、実際多くのユーザーに認知されたインターフェースであることは間違いなさそうです。下記記事は、面白かったです。 qiita.com今回は、別のアイコンから×にアニメーションできるか試してみました。例えばmenuナ…

form要素のinputやtextareaがiphoneでピンチインするのを防ぐ方法

form要素はいろいろとコツが必要になることが多いかと思います。スマホでinput要素に入力したところピンチインする現象に遭遇しました。文字が小さいためあえてピンチインする仕様だそうなのですが、恐らく十人が十人めんどくさっと思うでしょう。 これを解…

white-space、word-wrap、word-breakをまとめてみた。

css

white-space、word-wrap、word-breakの違いがわかりづらいのでまとめてみました。See the Pen KgyGzw by funclur (@funclur) on CodePen. 1.指定なし 日本語は単語の途中でも折り返されます 英語は単語区切りで折り返されます 連続する英数字は折り返されま…

ボックスの中の画像やテキストを上下中央揃えにする方法

css

上下中央に配置する方法はいろいろありますがボックスの中のテキストを上下中央に配置したい場合は、display:tableを使うとよいでしょう。 ボックスの中にテキスト See the Pen jraOXp by funclur (@funclur) on CodePen. point 1.boxにdisplay:tableをテキ…

レスポンシブデザインにおいてtableの対応で最も簡単な方法

css

レスポンシブデザインにおいてtableの対応は、悩ませる要素の一つです。display:blockにして縦並びにしたりもありますが、rowspanなどが必要なときはこの方法は有効ではありません。結局簡単なのは、スマホサイズ時は、スクロールさせることではないでしょう…

select要素にtext-overflow:ellipsisを効かせる方法

css

テキストが長いときなど、幅を超える分は三点リーダーに変えたいときがあるかと思います。それがtext-overflow:ellipsisです。しかし、select要素には三点リーダーが適応されませんでした。そこでselect要素にも三点リーダーを聞かせる方法を調べてみました…

フォームパーツのcssは初期値だらけ~第一回 button~

css

フォームパーツの初期値の実装が激しい 主なフォームパーツの要素は以下です。 input checkbox radio select textarea button そしてこれらは、borderや文字色、背景色などが各ブラウザによって予め実装されています。 各ブラウザで見え方が違うのはそのため…

liの何番目をセレクタで指定

css

よく忘れるので、覚えておくためにも以下記事にします。 項目1 項目2 項目3 項目4 項目5 1つ目 li:frist-child 2つ目 li:nth-child(2) 3つ目 li:nth-child(3) 最後から2番目 li:nth-last-child(2) 最後 li:last-child 奇数 li:nth-child(odd) 偶数 li:nth-ch…

margin-top派 or margin-bottom派

css

marginのつけ方に迷う ずっとmargin-bottom派だったんですけど、marginの相殺が思うようにされないケースが出てくるためマージンが相殺されないケースについて | WEBデザインの教科書margin-top派になって、自分なりのルールを決めてみようと思ったわけです…