こんにちは、フローです。 今回は、position要素を使ったパララックスデザインの例を、書いて行きたいと思います。 このパララックスも、よくWEBデザインで使われるので、覚え使えるようになりましょう。 前回の記事はこち…

こんにちは、フローです。 今回は、CSSのpositionを使った例を書いて行きたいと思います。 relativeとabsoluteを使った簡単な例 以下に、position: relativeとposition: ab…

こんにちは、フローです。 今回は私が1番ハマった、CSSのpositionについて書いていきたいと思います。 このposition要素は、WEB制作をやっていたら絶対に出てくる要素のひとつです。 是非覚えて使えるようにな…

こんにちは、フローです。 今回は、変わり種シリーズで、 WEBページの背景カラーを自由に選べるデザインのコードを書いて行きたいと思います。 変わり種シリーズは、役に立つかはあなた次第のちょっと変わったデザインを紹介して行…

こんにちは、フローです。 今回は、前回書いたデザイン要素のCSSの解説を書いていきたいと思います。 前回の記事はこちらです。 CSS要素の解説 まずは前回のCSS全体を見ていきましょう。 これですね。 この内容を、各要素…

こんにちは、フローです。 今回は使うかどうかはわかりませんが、 ちょっと変わり種のアニメーションを作っていきたいと思います。 前回の記事はこちらです。 見出しで使える？アニメーション 最近のWEBデザインはとにかく動きの…

こんにちは、フローです。 今回もフェードインで遊ぼう〜、って事で書いていきたいと思います。 前回の記事はこちらです。 フェードイン右から 前回は下から出てくるCSSを書きました。 今回は右から出てくるCSSを書いていきま…

こんにちは、フローです。 今回は、前回のフェードインアニメーションのCSSと、jQueryの解説をしていきたいと思います。 前回の記事はこちらです。 フェードインのCSS 前回の例では、カードデザインを3つ使用して、 p…

こんにちは、フローです。 今回は、カードデザインが下からふわっと出てくるアニメーションを、 HTML,CSS,jQueryを使用して書いていきましょう。 前回の記事は、こちらです。 ふわっとアニメーション こんな感じです…

こんにちは、フローです。 今回は、トップ画面の画像などが切替わるやつを書いていきます。 よくありますよね。 前回の記事はこちらです。 画像の切り替え こんな感じです。 画像の代わりに、色で表現しています。 切替わる時間も…

こんにちは、フローです。 前回の続きで、ハンバーガーメニューをやっていきましょう。 前回の記事はこちらです。 🍔ハンバーガーアイコン🍔 あの3本線の作り方を詳しく書いていきましょう。 対象…

こんにちは、フローです。 今回は、HTMLのタグについて書いて行きたいと思います。 最初によく迷うのが、このタグの種類や使い方などではないでしょうか。 私も迷いました。 タグの種類も、ものすごく沢山あるので、とりあえずよ…

こんにちは、フローです。 今回もカードレイアウトについて書いていきます。 前回の記事はこちらです。 カードレイアウトを作ろう2 前回書けなかった、残りの部分を書いて行こうと思います。 前回の記事は上に貼り付けあるので、是…

こんにちは、フローです。 今回は、カードレイアウトを作ろうって事で書いていきたいと思います。 前回の記事はこちらです。 カードレイアウト ウェブサイトのコンテンツを小さなブロック（カード）にまとめ、 それらを横並びや縦並…

こんにちは、フローです。 今回はレイアウトの中心部、コンテンツエリアについて書いていきたいと思います。 前回の記事はこちらです。 コンテンツエリア ウェブページ上の主要な情報が表示される領域です。 一般的に、コンテンツエ…

こんにちは、フローです。 前回は、初心者の1番の悩み「レイアウト」のヘッダー部分の事を書きました。 今回はフッター部分を書こうと思います。 前回の記事はこちらです。 フッターレイアウト WEBサイトのページの最下部に配置…

こんにちは、フローです。 今回もお悩み解決法って事で、私がWEBサイト作りで最初に悩んだ事を書いていきたいと思います。 前回の記事はこちらです。 レイアウトの悩み そもそも悩む原因は、知識がないからです。 そりゃそうです…

こんにちは、フローです。 HTML/CSSの簡単な説明はとりあえず終わりました。 しかし、実際にどう組み立ていけばいいの？ってところが、私が最初に悩んだところです。 その他、最初にありがちな、お悩み解決に向けて考えていき…

こんにちは、フローです。 今日はCSSを書くと言って、ずっと書いてなかったので、書きたいと思います笑 前回の記事はこちらです。 HTMLとCSSの例 まずは、HTMLのコードをみていきましょう 次に、このHTMLに対して…