HTMLとCSSの基本 タグ辞典① 基本のタグ
タグの基本を理解しよう！タグはこんな感じで書きます。<h1>こんにちは世界</h1>仕組みを図解すると以下のとおりです。「h1」の部分がタグの種類です。h1の他に「p」「img」「a」などがあります。タグで囲むことにより「ここは”h1”とい...
HTMLとCSSの基本 
未分類 PHP工房のメールフォームを実装する
PHP工房さんのメールフォームを実装しようWEBサイト制作を行うほとんどのケースでメールフォームが必要になってきます。しかし、メールフォームはサーバー側の言語を使わないと実装ができません。「メールフォーム」はメールを行うだけの簡単なものと侮...
WEBデザイン企画 ヒアリングシートで情報を集めよう
ヒアリングシートを使うサイトを作成するときにまずはヒアリングシートを作成する必要があります。以下に所要なヒアリング項目をまとめましたので参考にしてください。1. 基本情報 クライアント名：企業名、担当者の氏名、役職、連絡先など 業種・業態：...
WEB制作基礎知識 イラストレーターでSVG画像を作ろう！
SVG画像を作ろう！スマホ対応が必須となった現在の状況では綺麗に表示できるSVGを利用することが非常に有用です。今回はイラストレーターによるSVG画像の作成方法についてまとめたいと思います。今回はイラストレーターでこのような画像を作ってみま...
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で簡単に作れます。この記事で作り方を解説します。次のような画像が作れます。以下のペ...