CSSレイアウトテクニック SVGArtistaの使い方
SVGデータでパスのアニメーションを実装しよう！ このサイトでパスアニメーションが作成できます。やってみましょう！ SVGデータを作る まずはSVGデータを作る必要があります。 イラストレーターで作成してください。 データの注意点として パ...
CSSレイアウトテクニック
CSSレイアウトテクニック 
CSSレイアウトテクニック youtubeとgooglemap埋め込みのレスポンシブ化
youtubeとgooglemapのスマホ対応しよう スマホでうまく埋め込みの「iframe」のサイズ指定がうまくできないのはあるある！対象方法を学ぼう！ なんでうまく制御できないのかな？ iframeは外部サイトの埋め込みです。 CSSで...
CSSレイアウトテクニック 画像にテキストをちょい被せ
画像の横にちょこっと文字を重ねます position:absolute;でやりたくなるところですが、position:relative;で最小限の移動に収めるとレスポンシブ等にも柔軟に対応できるようになります。 デモはこちら まずは普通に横...
CSSレイアウトテクニック 見出しの装飾をする
見出しの下にちょこっと線をつけましょう デモはこちら こんな感じでレイアウトしているサイトをよくみるはず。やってみましょう。 HTML <h2>問い合わせ</h2> CSS 擬似要素を利用して追加します。 h2 { text-align: ...
CSSレイアウトテクニック 背景色を交互にする
背景を交互にしましょう デモはこちら 背景を交互にするには背景をつけるdivと幅をつけるdivを二重にすることで実現できます。 HTML <div class="bg-gray"> <div class="container"> <h2>ダ...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【flexbox版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 今回はflexboxを使用してください。 ポジションの場合は以下です。 ヒント 文字...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【position版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 ヒント 文字を中央に置こう！ 位置指定にはposition:absolute;を利用...