jQueryでheaderとfooterを共通化する【load()メソッド】
どうも！かけちまるです！ いきなりですが、HTMLでWebサイトを制作するときにheaderのような全ページで共通な部分をどのようにしているでしょうか？ HTMLごとにheaderを書いていると変更があったときにページ数が多いほど変更箇所が多くなってきますよね。 なので、headerを共通化して変更があっても変更箇所を1か所にしましょう。 この記事では、 ・headerを共通化する方法 ・共通ファイルが読み込まれないときの対処法 ・階層が違うHTMLへの対応方法 がわかります。 Ajax通信を利用して共通化する方法もあります。 少し難易度は上がりますが、保守性はこちらの方が高いのでおすすめです。
【GSAP入門】使い方となにができるのか
どうも！かけちまるです！ 近年注目されてきたアニメーションライブラリのGSAPについて解説です。 軽量かつ多機能でいてプラグインも豊富に用意されています。 スクロールに応じたアニメーションや線形補完など複雑なアニメーションが簡単に実装できます。 さらに、WebGLやCanvasアニメーションでも重宝します。 この記事では、 ・GSAPでこんなことができる ・GSAP読み込み方 ・基本的な記述方法 ・コールバックについて ・バラツキのあるアニメーションについて ・アニメーションのテンプレート化 ・タイムラインについて がわかります。 GSAPを使えばこんなことができる 見たほうが早いと思います。 ざっくりGSAPで表現できることをサンプルにしてみました。
translateを使わずにpositionで要素を中央寄せにする方法
どうも！かけちまるです！ CSSでpositionで中央寄せにしたい時大体はtransform: translate(-50%,-50%);を指定すると思います。 しかし、乗算などを表現するmix-blend-modeを使った要素にtransform: none;以外を指定するとスタックコンテキストというのが形成されてしまいmix-blend-modeがうまく適応されなくなってしまうことがあります。 そこで今回はtransform: translate(-50%,-50%);を指定しなくてもpositionで中央寄せにする方法をご紹介します。 この記事では、 ・上下中央寄せにする方法 ・左右中央寄せにする方法 ・上下左右中央寄せにする方法 がわかります。 中央寄せはそれぞれこんな感じ 最初に実装例をまとめておきます。 順番は、 ・上下中央 ・左右中央 ・上下左右中央 ・transform:
【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする
どうも！かけちまるです！ Webサイトで動画を扱うとき、YouTubeの埋め込みをよく使うと思います。 でもレスポンシブにしようとすると縦横比が崩れてあんまり綺麗にならずに悩んでる方いませんか？ その縦横比、保つ方法あるんです。 てことでこの記事ではYouTube埋め込みを縦横比を保ちながらレスポンシブ対応にする方法をご紹介します。 この記事を読むと、 ・縦横比を保ちながらレスポンシブ対応 ・padding-topを使う方法 ・CSSの新プロパティaspect-ratioを使う方法 が理解できます。 padding-topを使ってレスポンシブ対応 padding-topを利用して縦横比を保つ方法をご紹介します。 基本のHTML 基本のHTMLは以下です。 任意のYouTube埋め込みコードをdiv要素で囲んでいます。 div要素は縦横比を保つための要素です。 <div class="you
フォントサイズを可変にする方法【CSSのclamp関数で実現】
どうも！かけちまるです！ webサイトを構築するにあたってレスポンシブ対応は必須になっています。 そのレスポンシブ対応で困ってしまう1つがフォントサイズだと思います。 でも、デザインカンプに合わせてコーディングしたとしても少しブラウザのサイズを変えればレイアウトが微妙になってしまう… フォントサイズを可変にできる便利な方法があればと思ったらcssでclamp関数というのが便利だったのでご紹介していきたいと思います。 この記事では、 ・clamp関数の使い方 ・IEではclamp関数が使えない ・IEでもフォントサイズを可変にする方法 ・Safariでclamp関数が効かない時の対処法 がわかります。 clamp関数の使い方
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
