Photogentle

CSSレイアウトテクニック

画像にテキストをちょい被せ

画像の横にちょこっと文字を重ねますposition:absolute;でやりたくなるところですが、position:relative;で最小限の移動に収めるとレスポンシブ等にも柔軟に対応できるようになります。デモはこちらまずは普通に横並びに...
WEB制作基礎知識

Basic認証をかける ※中級者向け

サイトの閲覧に簡易のパスワードをかけようwebサイトにパスワードの閲覧制限をかけたい場合はサーバーの設定ファイルを追加し、パスワードをかけます。macの場合「.htaccess」という名称のファイルは非表示になってしまうため注意が必要です。...
CSSレイアウトテクニック

見出しの装飾をする

見出しの下にちょこっと線をつけましょうデモはこちらこんな感じでレイアウトしているサイトをよくみるはず。やってみましょう。HTML <h2>問い合わせ</h2>CSS擬似要素を利用して追加します。h2 {text-align: center;...
CSSレイアウトテクニック

背景色を交互にする

背景を交互にしましょうデモはこちら背景を交互にするには背景をつけるdivと幅をつけるdivを二重にすることで実現できます。HTML<div class="bg-gray"> <div class="container"> <h2>ダミーテキ...
WEB制作基礎知識

スムーススクロールと上に戻るボタンを実装する

スムーススクロールと上に戻るボタンを実装しましょう!スムーススクロールとはページ内リンクを押した際に、すーっと移動するものです。まずはページ内リンクを設定しておきましょう。該当エリアに「ID」を振っておき、そこへaタグでリンクさせます。<a...
CSSレイアウトテクニック

ヒーローイメージによくあるレイアウトを作る【flexbox版】

概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。今回はflexboxを使用してください。ポジションの場合は以下です。ヒント 文字を中央に置...
CSSレイアウトテクニック

ヒーローイメージによくあるレイアウトを作る【position版】

概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。ヒント 文字を中央に置こう! 位置指定にはposition:absolute;を利用 he...
Canvaの使い方

Canvaで作るモックアップ画像!

ポートフォリオ用にモックアップを作るポートフォリオに載せるために、サイトをpcやスマホで動作させている画像を作りたいことがあります。そのような画像はCanvaで簡単に作れます。この記事で作り方を解説します。次のような画像が作れます。以下のペ...
WEB制作基礎知識

ハンバーガーメニューから始めるjQuery

スマホサイトにハンバーガーメニューを実装しよう!スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。jQueryの使い方をスマホメニューの作り方から学んでいきましょう。次のような動きのメニューを作成できます。...
WEB制作基礎知識

AniCollectionの使い方

作ったサイトにアニメーションを追加したい!サイトを作っているとアニメーションを追加したいことがあるでしょう。アニメーションを1から作るのは大変ですが、ライブラリを使うことで簡単にサイトに動きを追加することができます。今回使うのは以下のサイト...
WEB制作基礎知識

【初級】jQueryから学ぶプログラミング入門

jQuery初級学習前の記事はこちら!次のように学んでいきます。 ボタンをクリックして要素を非表示にする(jQuery) 入力されたテキストをリアルタイムで表示する(jQuery) リストに項目を追加するボタンを実装する(jQuery) T...
WEB制作基礎知識

jQueryから学ぶプログラミング入門

jQueryは時代遅れの技術であるこの記事はWebデザイナーを目指すみなさんのために、jQueryの技術についての情報を提供します。しかし、そんなみなさんに知っておいて欲しい。jQueryは現在時代遅れの技術だと言われています。jQuery...