HTML&CSS
コアウェブバイタルの１つCLS（Comulative Layout Shift）の設定方法
日々、SEOの改善に取り組んでおられる諸兄達は、CLSを気にされていることと思います。PageSpeed Insightsのスコアに四苦八苦されていることでしょう。 そんなPageSpeed Insightsの中で、以下のような指摘を受けていませんか？ このように書かれていると、imgタグにwidthとheightを設定しなければいけないと思ってしまいがちですが・・・ ちょっと待ってください！ このレスポンシブ対応が当たり前の時代に「widthとheightを設定しろ！」なん...
CSSアニメーションをアニメーションの途中から動かす方法
CSSアニメーションを作成する時、アニメーションの途中で画面の端に消えて行って、反対側の端から出てくるなど、 CSSアニメーションの基本 まず、CSSアニメーションの基本をおさらいしておきましょう。 animation-name : アニメーション名を指定 一番大切なアニメーションを指定するプロパティです。@keyframesで定義したアニメーション名を指定します。 // アニメーションさせる要素 .animation_element { animation-name: mo...
HTMLの構造を画面サイズごとに変更する方法
もうレスポンシブに対応するのは当たり前のことですけど、デザインによっては単純に配置を組み替えることが難しい場合がありますよね。そういう時、昔はパソコン用のHTMLとスマホ用のHTMLを別々に用意して、画面幅に応じて表示を切り替えるということをしていました。 しかし、今は１つのHTMLでもレイアウトの組み換えができるようになっているんです。しばらくHTML/CSSから離れている人は、インライン要素とブロック要素はわかると思いますが、他にも要素のレイアウトパターンが増えているので...
【CSS】文字サイズを画面幅に応じて自動調整する
レスポンシブ対応で面倒なことの一つに"文字サイズの調整"があります。キャッチコピーをかっこよく1行で表示したいのに、少し画面幅を変えるとエリアをはみ出してしまって、改行されてしまうことないですか？もしくは少し小さめに作っていると、フルHDや2Kディスプレイで表示すると余白が大きくなって、かっこ悪くなってしまったりしますよね。 さらにそれを防ぐために、細かくメディアクエリを設定するのも大変面倒です。 「あ～文字サイズが自動調整されたら良いのに」って思いませんか？font-siz...
【CSS】flex-boxで高さを揃える方法
display: flexが使われているCSSを見る機会が増えてきましたね。flexを使うことで、レイアウトの組み換えや順番の入れ替え、隙間を開けるのだって簡単に出来るので、非常に便利ですよね。 flexを使えば、inline-blockでは面倒だった、各子要素の高さを揃えるのだって簡単にできてしまいます。 flex-boxでは自動で高さが揃う そもそもflex-boxでは子要素の高さは同じになるように自動調節されます。 以下のサンプルを見てください。 CSSには高さを指定し...
【javascript/CSS】クリックで開閉するアコーディオン表示の作り方
WEBデザインのスタンダードがモバイルファーストになってしばらく経ちましたが、アコーディオン表示は長いコンテンツを短くまとめたり、特定の人にしか関係性ないようなコンテンツを普段しまっておく手段として、非常に高い需要があります。 今回はそんなアコーディオン表示の作り方をご紹介します。 Javascriptを使ったアコーディオン表示のサンプル まず、以下のサンプルを見てください。青いボタンをクリックすると、アコーディオンエリアが開閉します。 これは余計な処理を省いた最もプリミティ...
【CSS】特定の要素以外にCSSを適応する方法
例えば『テーブルで下線を引きたいけど、最後の行に下線は要らない』とか、『○○の流れをリストで作る時、最後だけ矢印が要らない』ってことありますよね？例えば、こんなデザイン こういう時、皆さんはどうしていますか？ 最後だけCSSをリセットする これは従来の方法ですが、CSSを以下のように設定していました。 ul.~~ li { border-bottom: 1px solid #333; } // 最後の要素のみ下線を消す ul.~~ li:last-child { border...
プログラミングの変数名や関数名の命名規則
変数名や関数名を付ける時、結構迷うことありますよね。「作っている時は良いけど、後から見た時、理解できるだろうか。」「他人が見た時、わかりやすいだろうか。」って考えると、少し考え込んでしまいます。 プログラミングには命名規則という物があり、無視してプログラムを作ることも出来るんですが、他人が見た時の可読性を意識すると、命名規則に従うのが吉です。『可読性』はシステムの寿命にも直結するので、軽視はできない問題です。 命名規則には、変数名や関数名にどんな言葉を使うかというルールもあり...
【CSS・javascript】カルーセルの作り方を３パターンで解説！
皆さんはカルーセルってどうやって作りますか？カルーセルっていろんな動き方があって、それぞれ作り方が違うと思うんです。 カルーセルの作り方パターン１：javascript(jQuery)を使って１つずつ要素を入れ替える 私は最初に考えました。『カルーセルエリアの先頭要素をjavascriptを使って一番後ろに移動させればいいんだ！』要素そのものを動かすイメージです。 図解するとこんなイメージです。 このような要素の入れ替えにはjQueryのappendが使えます。使い方は以下の...
【CSS】HTMLの要素（タグ）を横並びに配置する方法
『いまさら感』がありますが、HTMLの要素を横に並べる方法、その手法のパターンを紹介します。ある程度、HTMLとCSSに慣れてくると当たり前のことと思いますが、初めて触る人にとっては自由にレイアウトを組めるようになるまでの最初の関門になるかもしれません。 テーブルを使って横並びにする これはかなり古い手法ですが、CSSを使わず、HTMLだけで横並びにすることが出来るので、一番簡単です。 <table> <tr> <td>左側コンテンツ<...