CSS CSSで画像をトリミングする
画像を使い回したいけど、場所によって比率が異なるときなど、CSSで画像トリミングができると便利です。 今回は、背景画像の場合と、imgタグの場合のトリミング方法をまとめました。 元画像はこちら（hamarikyu.jpg） 都会のオアシス・...
コーディング
CSS HTML iframeからのリンクを、別タブ／親ページで開く
iframeで別ページを読み込んでいるとき、リンクやフォームの送信がiframe内でおこなわれてしまい困ったので、どうすればいいか調べました。 下記のコードサンプルは、iframe内（読み込まれる側）の記述です。また、今回の解説に必要最小限...
JavaScript 【初心者向け】デベロッパーツールでエラーが出て困っているあなたと私へ。
デベロッパーツールにエラーが出てしまって困り果てている人へ、根本的な対処法をお伝えします。 今回のエラーの定義 デベロッパーツールの「コンソール」タブで表示される、この赤いエラーのことを指します。 ※画像はChrome 左にエラーの内容、右...
HTML レスポンシブのとき、viewportタグをjsで振り分け
レスポンシブ対応だけど、タブレットはPCと同じ見た目でいいのになー、ということありませんか？そんな時のための備忘録です。 viewportをjsで切り分け デバイスごとにviewportを書き換える方法です。 ちなみに > 0と言う記述はt...
CSS liタグを複数列で縦並びさせたいとき、超絶簡単な方法があった！
liタグを、縦並びで、複数カラムで表示したいときの方法です。言葉だけではうまく伝えられないので、さっそく紹介していきます。 方法1、2とも、HTMLは共通です。山のラインナップの偏りはスルーしてください。。 【方法1】column-coun...
CSS aタグをリンクさせたくないとき、CSSで解決できる
とりあえずリンクは設置するけれど、期日が来るまでリンクを無効にしたいときのための良い方法がありました。 CSSの「pointer-events」で設定 HTML CSS プレビュー リンクしないよ たったこれだけ。なんて簡単！わざわざdiv...
CSS iOSでスクロールバーが出ない時の対処法
スクロールさせるレイアウトの場合、 高さを固定してはみ出した分は HTML CSS とすればスクロールバーが表示される仕組みです。 ところがタッチデバイスの場合はスクロールバーが表示されず ユーザーにスクロールできるエリアだとわかりにくかっ...
CSS 文章の改行位置をbrタグ以外で設定する方法
一時期、brタグ以外で改行したくて、方法を探していました。あまり使いどころないかもしれませんが、カンタンだったので紹介します。 疑似要素を使って改行 文章の改行位置をbrタグ以外で設定するには、spanタグに擬似要素を設定して改行します。下...
CSS tableタグに関するあれこれ備忘録【応用編】
tableタグを使う機会が多々あるので、以前tableタグに関する基本あれこれ備忘録という記事を書きました。 今回は更に応用編として、（自分的に）新しい小ワザをまとめました。 ※2018年2月8日に追記しました。 thead、tbody、t...
CSS 【CSS】要素の左右真ん中揃え
忘れがちな要素の左右真ん中揃え、 備忘録がてらシチュエーション別にまとめてみました。 インライン要素の左右真ん中揃え HTML CSS プレビュー インライン要素の左右真ん中揃え ブロック要素の左右真ん中揃え HTML CSS プレビュー ...