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: center;...
CSSレイアウトテクニック 背景色を交互にする
背景を交互にしましょうデモはこちら背景を交互にするには背景をつけるdivと幅をつけるdivを二重にすることで実現できます。HTML<div class="bg-gray"> <div class="container"> <h2>ダミーテキ...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【flexbox版】
概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。今回はflexboxを使用してください。ポジションの場合は以下です。ヒント 文字を中央に置...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【position版】
概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。ヒント 文字を中央に置こう！ 位置指定にはposition:absolute;を利用 he...