フロー

フロー

40代高卒者が製造業からIT転職する【フェードイン】

こんにちは、フローです。 今回は、カードデザインが下からふわっと出てくるアニメーションを、 HTML,CSS,jQueryを使用して書いていきましょう。 目次 1 ふわっとアニメーション 1.1 HTML 1.2 CSS 1.3 jQuery 2 まとめ ふわっとアニメーションこんな感じです。 テキストは英語ですが、何語でも構いません。 レスポンシブにも対応しています。 しかし、iPhone等の小さな画面だとコードペンの画面が小さすぎて、 うまく表示

フロー

    • 40代高卒者が製造業からIT転職する【画像を切り替えよう】

      こんにちは、フローです。 今回は、トップ画面の画像などが切替わるやつを書いていきます。 目次 1 画像の切り替え 1.1 HTML 1.2 CSS 1.3 jQuery 2 まとめ 画像の切り替え画像の代わりに、色で表現しています。 切替わる時間も、自由に変えられます。 さっそくコードをみていきましょう。 HTML <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta

      フロー

      • 40代高卒者が製造業からIT転職する【jQueryを使おう】

        こんにちは、フローです。 今回は、ハンバーガーメニューで使うjQuery（ジェイクエリ）を使用して、 メニューが、開いたり閉じたりする機能を作っていきましょう。 目次 1 実装してみよう 2 ファイルの中身を書いてみよう 2.1 1行目: $(document).ready(function() { 2.2 2行目: $(‘.hamburger’).click(function(){ 2.3 3行目: $(this).toggleClass(‘active’)

        フロー

        • 40代高卒者が製造業からIT転職する【ハンバーガーメニュー3】

          こんにちは、フローです。 前回の続きで、ハンバーガーメニューをやっていきましょう。 目次 1 🍔ハンバーガーアイコン🍔 1.1 hamburger 1.2 .hamburger .bar 1.3 .hamburger.active 1.4 レスポンシブデザイン 1.5 768pxの理由 2 まとめ 🍔ハンバーガーアイコン🍔あの3本線の作り方を詳しく書いていきましょう。 対象となるHTMLはこちらです。 <div class="hamburger">

          フロー

        40代高卒者が製造業からIT転職する【フェードイン】

        フロー

          40代高卒者が製造業からIT転職する【ハンバーガーメニュー2】

          こんにちは、フローです。 今回もハンバーガーメニューについて書いていきたいと思います。 目次 1 ハンバーガーメニュー 2 <span>タグで線を作る 3 まとめ ハンバーガーメニュー前回の例はこちら。 美味しそうな名前ですが、食べ物ではありません。 ウェブデザインでよく使用されるナビゲーションメニューの一種で、 小さなスクリーン（スマートフォンやタブレットなど）での使用が一般的です。 メニューアイテムを隠し、トグル機能を提供することで、スペースを節約します

          フロー

          40代高卒者が製造業からIT転職する【ハンバーガーメニュー2】

          フロー

          40代高卒者が製造業からIT転職する【ハンバーガーメニュー】

          こんにちは、フローです。 今回は、前回紹介したサンプルページがスマホ対応していなかったので、 ハンバーガーメニューを追加したサンプルページを作りました。 私もそうでしたが、初心者が一番初めに挫折するのが、このハンバーガーメニューだと思います。 目次 1 ハンバーガーメニューの例 1.1 CSS の例 1.2 jQueryの例 2 まとめ ハンバーガーメニューの例まずは、完成したものを載せておきます では、早速書いて聞きましょう HTML <!DOCTY

          フロー

          40代高卒者が製造業からIT転職する【ハンバーガーメニュー】

          フロー

          40代高卒者が製造業からIT転職する【サンプルページ】

          こんにちは、フローです。 今回もHTMLの記述例を書いていきたいと思います。 目次 1 製品ページの例 1.1 HTMLの例 1.2 CSSの例 製品ページの例今回は製品を紹介するページの記述例を書いていきたいと思います。 CSSでは、positionを使った記述例を使ってみました。 この、positionは色々なサイトに使われているCSSなので、是非覚えておきましょう。 私も何度もハマりました笑 HTMLの例 <!DOCTYPE html><html l

          フロー

          40代高卒者が製造業からIT転職する【サンプルページ】

          フロー

          40代高卒者が製造業からIT転職する【HTML3】

          こんにちは、フローです。 前回は、HTMLの記述例を書きました。 今回はその例を使って、ひとつづつ詳しくみていきましょう。 目次 1 <head>タグ 1.1 <meta charset=”UTF-8″> 1.2 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 1.3 <title>デモサイト</title> 1.4 <link rel=”stylesheet” hr

          フロー

          40代高卒者が製造業からIT転職する【HTML3】

          フロー

          40代高卒者が製造業からIT転職する【HTML2】

          こんにちは、フローです。 今回もHTMLについて書いていきたいと思います。 目次 1 HTMLの記述例 2 まとめ HTMLの記述例私もそうでしたが、初心者のうちはとにかく、何度も何度も繰り返しHTMLやCSSを書いて覚えるのが早いです。 書いているうちに、色々なパターンを覚えていくので、他のサイトでも使い回しが効くようになっていきます。 では、記述例をみていきましょう。 <!DOCTYPE html><html lang="ja"><head> <me

          フロー

          40代高卒者が製造業からIT転職する【HTML2】

          フロー

          40代高卒者が製造業からIT転職する【HTML】

          こんにちは、フローです。 今回は、HTMLのタグについて書いて行きたいと思います。 最初によく迷うのが、このタグの種類や使い方などではないでしょうか。 私も迷いました。 タグの種類も、ものすごく沢山あるので、とりあえずよく使いそうなものを書いていきます。 目次 1 HTMLのタグ 1.1 簡単な記述例 2 まとめ HTMLのタグHTMLで使用されているタグは非常に多岐にわたりますが、 ここでは代表的なタグの使い分けについて説明します。 h1〜h6タグ 見出しを

          フロー

          40代高卒者が製造業からIT転職する【HTML】

          フロー

          40代高卒者が製造業からIT転職する【idと class】

          こんにちは、フローです。 今回はまたHTMLに戻り、”id”タグと、”class”タグの使い分けの事を書きたいと思います。 私も最初は、「えっ、どっち使えばいいの？」でしたが、 慣れるとそこまで考えずに使っています。 目次 1 HTMLの”id”と”class”とは 2 “id”と”class”の例 2.1 Classの例 3 まとめ HTMLの”id”と”class”とは要素を特定するための属性ですが、それぞれ異なる使い方があります。 “ID”属性は、一意の要

          フロー

          40代高卒者が製造業からIT転職する【idと class】

          フロー

          40代高卒者が製造業からIT転職する【リセットCSS】

          こんにちは、フローです。 今回はリセットCSSについて書いていきたいと思います。 目次 1 リセットCSSとは 1.1 CDNで読み込む方法 2 まとめ リセットCSSとは Webページ制作において、 ブラウザ間の要素のデフォルトスタイルを統一するために使われるCSSのことです。 各ブラウザには、HTML要素のデフォルトのスタイルが異なっています。 例えば、見出し要素のフォントサイズや色、リストのマーキングなどが異なります。 このため、Webページを制作

          フロー

          40代高卒者が製造業からIT転職する【リセットCSS】

          フロー

          40代高卒者が製造業からIT転職する【jQuery】

          こんにちは、フローです。 今回はWEBサイトに動きなどをつけるjQueryとJavaScriptの事を書きたいと思います。 ちょっと難しくなるので、私も勉強しながら書いて行きたいと思います。 目次 1 jQueryとJavaScript 1.1 JavaScript 1.2 jQuery 2 記述例 2.1 JavaScriptの記述例 2.2 jQueryの例 3 まとめ jQueryとJavaScriptWebページに動的な動作を与えることができるプログ

          フロー

          40代高卒者が製造業からIT転職する【jQuery】

          フロー

          40代高卒者が製造業からIT転職する【カードレイアウト2】

          こんにちは、フローです。 今回もカードレイアウトについて書いていきます。 目次 1 カードレイアウトを作ろう2 1.1 カード同士の間隔を均等にする 2 ユーザーがクリックすることで、詳細な情報が見られるようにする 3 レスポンシブデザインに対応し、異なるデバイスで見栄えがよくなるように調整する 3.1 メディアクエリを使用する方法 3.2 フレキシブルボックスを使用する方法 4 まとめ カードレイアウトを作ろう2前回書けなかった、残りの部分を書いて行こうと

          フロー

          40代高卒者が製造業からIT転職する【カードレイアウト2】

          フロー

          40代高卒者が製造業からIT転職する【カードレイアウト】

          こんにちは、フローです。 今回は、カードレイアウトを作ろうって事で書いていきたいと思います。 目次 1 カードレイアウト 1.1 注意点は？ 2 まとめ カードレイアウトウェブサイトのコンテンツを小さなブロック（カード）にまとめ、 それらを横並びや縦並びに配置して表示するレイアウトのことです。 カードは、テキスト、画像、アイコンなどの要素を含んでおり、 ユーザーはそれらをクリックして、詳細な情報を閲覧することができます。 カードレイアウトの特徴として、以下

          フロー

          40代高卒者が製造業からIT転職する【カードレイアウト】

          フロー

          40代高卒者が製造業からIT転職する【レイアウト】

          こんにちは、フローです。 今回も、レイアウトについて書いて行こうと思います。 目次 1 グリッドシステム 2 Bootstrap 2.1 使用例 3 まとめ グリッドシステムWEBサイト制作において、 ページのデザインやレイアウトを統一的に整えるために、枠組みを設けた基盤のことを指します。 この基盤は、横方向に均等に分割されたカラム（列）と、 縦方向に均等に分割されたロウ（行）から構成されています。 グリッドシステムを使用することで、 ページ内のコンテン

          フロー

          40代高卒者が製造業からIT転職する【レイアウト】

          フロー