CSSレイアウトテクニック 見出しの装飾をする
見出しの下にちょこっと線をつけましょう デモはこちら こんな感じでレイアウトしているサイトをよくみるはず。やってみましょう。 HTML <h2>問い合わせ</h2> CSS 擬似要素を利用して追加します。 h2 { text-align: ...
2024-11
CSSレイアウトテクニック 
CSSレイアウトテクニック 背景色を交互にする
背景を交互にしましょう デモはこちら 背景を交互にするには背景をつけるdivと幅をつけるdivを二重にすることで実現できます。 HTML <div class="bg-gray"> <div class="container"> <h2>ダ...
WEB制作基礎知識 スムーススクロールと上に戻るボタンを実装する
スムーススクロールと上に戻るボタンを実装しましょう！ スムーススクロールとはページ内リンクを押した際に、すーっと移動するものです。 まずはページ内リンクを設定しておきましょう。 該当エリアに「ID」を振っておき、そこへaタグでリンクさせます...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【flexbox版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 今回はflexboxを使用してください。 ポジションの場合は以下です。 ヒント 文字...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【position版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 ヒント 文字を中央に置こう！ 位置指定にはposition:absolute;を利用...
Canvaの使い方 Canvaで作るモックアップ画像！
ポートフォリオ用にモックアップを作る ポートフォリオに載せるために、サイトをpcやスマホで動作させている画像を作りたいことがあります。 そのような画像はCanvaで簡単に作れます。この記事で作り方を解説します。 次のような画像が作れます。 ...
WEB制作基礎知識 ハンバーガーメニューから始めるjQuery
スマホサイトにハンバーガーメニューを実装しよう！ スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。 jQueryの使い方をスマホメニューの作り方から学んでいきましょう。 次のような動きのメニューを作成でき...