HTML

CSS

【HTML/CSS】iframeの下に謎の余白が空く問題

iframeで要素を埋め込んだとき、下の要素とピッタリつけたかったのに何故か隙間が空いていることに気づきました。探ってみると、盲点すぎる原因でした。 iframeタグは、インライン要素 早速ですが、下に、iframeの下にdivを配置したH...
CSS

【HTML/CSS】テキスト入力するときチカチカ点滅する棒みたいなやつ、何て名前?ついでに消し方も紹介

フォームでテキスト入力するときチカチカする縦棒、ありますよね。inputで点滅するやつ。 先日これの名前がわからなくて、ちょっと困りました。ググりたいけどそもそもなんてググればいいかわからないとき、ありますよね笑? そんな人のために、チカチ...
CSS

コピペでOK!画像を使わずCSSで三角形をつくる方法×2

以前なら三角形は画像一択でしたが、単純な三角はCSSで表現が可能です。三角形のジェネレーターも存在しますが、今回はコピペでサクッと使えるような、頻出する三角形のコードを紹介します。 1.塗りつぶしの三角形 まずは、塗りつぶしの三角形を紹介し...
CSS

CSSで画像をトリミングする

画像を使い回したいけど、場所によって比率が異なるときなど、CSSで画像トリミングができると便利です。 今回は、背景画像の場合と、imgタグの場合のトリミング方法をまとめました。 元画像はこちら(hamarikyu.jpg) 都会のオアシス・...
HTML

iframeからのリンクを、別タブ/親ページで開く

iframeで別ページを読み込んでいるとき、リンクやフォームの送信がiframe内でおこなわれてしまい困ったので、どうすればいいか調べました。 下記のコードサンプルは、iframe内(読み込まれる側)の記述です。また、今回の解説に必要最小限...
HTML

レスポンシブのとき、viewportタグをjsで振り分け

レスポンシブ対応だけど、タブレットはPCと同じ見た目でいいのになー、ということありませんか?そんな時のための備忘録です。 viewportをjsで切り分け デバイスごとにviewportを書き換える方法です。 ちなみに > 0と言う記述はt...
CSS

aタグをリンクさせたくないとき、CSSで解決できる

とりあえずリンクは設置するけれど、期日が来るまでリンクを無効にしたいときのための良い方法がありました。 CSSの「pointer-events」で設定 HTML CSS プレビュー リンクしないよ たったこれだけ。なんて簡単!わざわざdiv...
CSS

tableタグに関するあれこれ備忘録【応用編】

tableタグを使う機会が多々あるので、以前tableタグに関する基本あれこれ備忘録という記事を書きました。 今回は更に応用編として、(自分的に)新しい小ワザをまとめました。 ※2018年2月8日に追記しました。 thead、tbody、t...
CSS

tableタグに関する基本あれこれ備忘録

(この記事は2017年11月14日に修正・加筆しました) コーディングの際会社概要や沿革などのレイアウトにtableタグを使う機会が多々ありますが、基本的なことがあやふやで毎回同じこと調べてるので自分用にtable備忘録を作成しました。 セ...
スポンサーリンク