CSS よくわかる、CSSでn個目系を指定する擬似クラスの解説 CSSでn個目系を指定する機会は多いのに、出てくるたびにググってる気がしたので、備忘録としてまとめました。 n個目系擬似クラスの種類 要素の何番めかを指定する擬似クラス(ここでは勝手に「n個目系」と呼びます)には、以下の種類が... 2021.11.11 CSSコーディング
CSS コピペでOK!画像を使わずCSSで三角形をつくる方法×2 以前なら三角形は画像一択でしたが、単純な三角はCSSで表現が可能です。三角形のジェネレーターも存在しますが、今回はコピペでサクッと使えるような、頻出する三角形のコードを紹介します。 1.塗りつぶしの三角形 まずは、塗りつぶしの... 2021.05.29 CSSHTMLjQueryコーディング
CSS 画像下揃えでテキストを回り込ませる方法 ある日、支給されたデザインを確認したときに画像とテキストが下揃えになったテキスト回り込みに出会いました。普通floatでテキストを回り込ませると上の図のように、画像が浮くことでそこにテキストが回り込み、画像の高さ分を超えたテキストは幅いっ... 2021.05.28 CSSJavascriptjQueryコーディング
CSS エリアの比率を変えずに可変させる方法 レスポンシブ対応に必須の、エリアの縦横比を維持したまま可変させる場合の計算方法を紹介します。 今回は、一般的な写真サイズ(L版)と同じ比率のエリアにいらすとやさんからお借りした正方形の風景イラストをエリアいっぱいに表示させたいと思い... 2021.05.17 CSSコーディング
コーディング jsに苦手意識を持つコーダーが、サイトに動きをつけるときにやること 私(コーダー)はあんまりJavaScript(以下、js)が得意ではない。なので、「こういう動きをつけてほしい」などという依頼は正直カンタンに言うなって…と身構えてしまう。 ただ、苦手意識が先行しているだけで、やってみたら意外とチョ... 2020.06.26 コーディング
コーディング コーディングする際に最低限押さえておきたい、SEOの基本 古いサイトのリニューアルなどで他の人が書いたタグを見るとSEOや文書構造を意識せずコーディングしている人が意外と多いと感じたので、今回は、コーディングの段階でSEOに関してこれだけは意識しておきたいという、大枠の考え方をまとめました。 ... 2019.08.23 コーディング
jQuery コピペでOK!デザイナーのための、jQueryでよく使う記述集 HTMLとCSSを覚えたての頃は jQueryなんて敷居が高くてとても使えない…!と思ってましたが、 制作を続けていると、使う必要に迫られる場面が多々あり、 いつの間にやら普通に使うようになってしまいました。 ... 2019.08.07 jQuery
CSS CSSで画像をトリミングする 画像を使い回したいけど、場所によって比率が異なるときなど、CSSで画像トリミングができると便利です。 今回は、背景画像の場合と、imgタグの場合のトリミング方法をまとめました。 元画像はこちら(hamarikyu.jpg) ... 2019.08.03 CSSHTMLコーディング
HTML iframeからのリンクを、別タブ/親ページで開く iframeで別ページを読み込んでいるとき、リンクやフォームの送信がiframe内でおこなわれてしまい困ったので、どうすればいいか調べました。 下記のコードサンプルは、iframe内(読み込まれる側)の記述です。また、今回の解説に必... 2019.08.02 HTMLコーディング
Javascript 【初心者向け】デベロッパーツールでエラーが出て困っているあなたと私へ。 デベロッパーツールにエラーが出てしまって困り果てている人へ、根本的な対処法をお伝えします。 今回のエラーの定義 デベロッパーツールの「コンソール」タブで表示される、この赤いエラーのことを指します。 ※画像はChrome ... 2019.08.01 JavascriptjQueryコーディング