frontendmemo

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

css

css3でコイントスのように水平に回転するアニメーション

css

読み込み時にコイントスのように水平に回転するアニメーションのcss3です。マウスオーバー時も回転します。 <div class="coin-wrap"> <div class="coin"> <div class="front"><h2>コイン:表</h2></div> <div class="back"><h2>コイン:裏</h2></div> </div> </div> .coin-wrap .coin { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transition: a…

flexで簡単!画像を中央揃えにして横並びにする方法(キャプションあり)

css

画像を中央揃えにして横並びにする方法 <ul class="img-col2"> <li class="image"> <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""> <figcaption>キャプションが入ります</figcaption></figure> </li> <li class="image"> <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""> <figcaption>キャプションが入ります</figcaption><…</figure></li></ul>

iphoneX対応サイトの実装方法・注意点まとめ html・css

css

近く実装案件も出てくるであろうiPhone Xの実装方法、注意点の記事をまとめました。 主に表示領域に対して処理を加えなければいけなくなりそうです。 iPhone X の Safari における Web コンテンツの表示 medium.com <meta name="viewport" content="viewport-fit=cover"> viewport にこの値を設定することで、Saf</meta>…

意外と知られていない!?dlの直下にdivを置いてもOK!

css

質問サイトにもdl要素の直下にはdt、dd以外置いていけないという答えで終わっており意外と知られていないかもしれません。MDNのdl要素のページでも下記のように記しています。 <dl> <div> <dt>Name</dt> <dd>Godzilla</dd> </div> <div> <dt>Born</dt> <dd>1952</dd> </div> <div> <dt>Birthplace</dt> <dd>Japan</dd> </div> <div> <dt>Color</dt> <dd>Green</dd> </div> </dl> WHATWG HTML…

iframeはmarginの相殺が起こらない

css

CSSにおけるマージンの相殺は深いですよね。マージンの相殺とは、簡単に言うと要素が連続する場合にマージンのサイズが大きい方が優先されるということです。例えばh2がmargin-bottom:30pxで続く要素がmargin-top:20pxであればその要素間は30pxになります。 …

cssで見出しデザイン117選

css

見出しデザインのアイディアってこれでもかっていうくらいありますよね。 今日はそんな見出しデザインをしてくれてるサイトを集めました。 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 fit-jp.com 手書き風の見出しデザイン[01] サ…

親要素のコンテンツ幅を超えて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…

CSSとJSでtelリンクを無効にする方法

html css JavaScript DEMO 電話番号をかけさせたいときのhtmlは以下のようにします。 html <p class="tel"><a href="tel:0312345678">03-1234-5678</a></p> この状態では、PCの時でも不要にリンクが発生してしまうため、レスポンシブデザインではPCでは無効にし、指定の幅以下で無効を解除します。 css [href^…

【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派になって、自分なりのルールを決めてみようと思ったわけです…