CSS SVGアニメーションジェネレーターを使って簡単に動きをつける 今回はSVGジェネレーターのSVG ARTISTAを使ってSVGテキストに簡単に動きをつけてみました!SVG ARTISTAを使うと簡単なSVGアニメーションができるので、少しホームページに動きを出したいときにおすすめです。スクロールしてsvg画像を使用している場所まで達したらアニメーションを開始させるためにjQueryを使用しています。 2022.08.07 CSSjQuery
flexbox 【flexbox】折り返し指定&余白の調整をする方法【CSS】デモあり flexboxで横並びにした要素の折り返し指定をするには、CSSで親要素にflex-wrap:wrap;を指定します。その他、flexboxで子要素を折り返した際の余白の指定の仕方についても紹介しています。 2022.07.25 flexboxCSS
flexbox flexbox横並びで子要素を均等幅で配置する◎余白なしの場合 flexbox横並びで子要素を余白なしの均等幅で配置する方法を解説しています。子要素を均等に配置するには、子要素にwidth:100%;を設定するか、flex-grow:1;を設定すると簡単です!折り返して複数行になる場合は、calc関数などを使用すると計算する手間がありません。 2022.07.24 flexboxCSS
flexbox 【flexbox】横並びデザインの基本!コード一行追加で簡単【基礎】 flexboxレイアウトで子要素を横並びにする方法を解説しています。flexboxを使うと子要素がブロック要素でも簡単に横並びが可能。親要素にdisplay:flex;の一行追加で簡単に横並びにできる!実際にHTMLとCSSを使って解説しています◎ 2022.07.24 flexboxCSS
CSS レスポンシブでdivや動画などの縦横比(アスペクト比)を固定して要素の高さを可変にする方法【CSS】 レスポンシブサイトで動画やiframeなどで横幅が変わっても、高さもきちんと元の比率を固定して表示されるように対応するためのCSSをご紹介。divなどでも使えます。 2022.07.21 CSS
CSS videoタグで埋め込んだ動画に自作再生ボタンをつける方法 videoタグで張り付けた動画に自作の再生ボタンと停止ボタンを付ける方法を紹介していきます!特に消音で動画を挿入する場合で、再生・一時停止・再生位置の移動やボリュームなどのインターフェースを表示したくないけど最低限の再生・停止ボタンは付けたいという場合に。 2022.07.20 CSSjQuery
CSS ページ内リンクがずれる場合の対処方法について 画像に遅延読み込みの処理を施した際に外部ページから特定の位置へのリンクがずれることがあるので、このような場合の解決方法をひとつ記載しておきます。今回は画像のアスペクト比を保つ処理を行って要素に高さを持たせることで解消できましたので参考にしてみてください。 2022.06.07 CSS
flexbox 【Flexbox】横並びデザインの子要素・孫要素の高さを揃える! Flexbox横並びレイアウトを、子要素・孫要素まで高さを揃える方法を出来る限りわかりやすく解説していきます。子要素は親要素にdisplay:flex;を指定すると、簡単に高さが揃いますが孫要素は少し工夫が必要です。 2021.11.29 flexboxCSS
flexbox 【Flexbox】横並びデザインの画像の高さを揃える方法 Flexbox横並びデザインの画像の高さを揃える方法について解説しています。画像の高さが揃わないという問題を解決!整ったレイアウトでホームページを制作しましょう。 2021.11.20 flexboxCSS
CSS ホームぺージに使用する画像の設定方法【基礎編】 ホームぺージに使用する画像の設定方法について解説しています。基本的な設定を知りたい、画像下の余白を消したいときなど、基礎編として紹介しています。 2021.11.15 CSSHTML