けけ丸

けけ丸

デイトラ中級Day5~6 : jQuery実践編

今回はjQuery実践編ということで、デイトラから下された指令通りに実装していくカリキュラムでした。 ※ちなみに、僕が超絶初学者だった頃「実装」という言葉がいまいちピンと来なかったので似たような境遇の方のために説明しておくと、「実装」とは【機能をつける】みたいな意味合いです。 デイトラから下された指令は3つ。 (今回に限ってはjQueryライブラリの使用は禁止で、自力で書くものとする) ①メニューバーにドロワーメニューを表示する 【条件】 ・コース一覧をクリックすると

けけ丸

    • デイトラ中級Day4 : jQueryの基礎

      chapter1 : jQueryとはjQueryとは、JavaScriptでできることをより簡単な記法で実現できように設計されたJavaScriptライブラリです。 jQueryのおかげで、プログラミングの初心者でもフロントエンド開発に参加しやすくなったそうです(昔を知らんからなんとも言えない)。 とにかくjQueryは初心者にやさしい、とても有用なJavaScriptライブラリだそうです。 僕も実際に使ってみましたが、やさしいかどうかは置いといて初心者ながらとても便利

      けけ丸

      • デイトラ中級Day3 : DOM操作

        chapter1 : DOM操作とはDOM(Document Object Model)操作とは、HTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのことを言います。 Webブラウザは、Webサーバから受け取ったHTMLを解析し、DOMと呼ばれるデータ構造に変換。そしてCSSを解析して得られたスタイルをDOMに紐づけてレイアウトが計算され、最終的にユーザーの画面に表示されます。 簡単に表現するとこんな感じ。 HTML ↓ DOM ↓ 画面に表示

        けけ丸

        • デイトラ中級Day2：JavaScriptの基本文法②

          chapter1 : 配列配列とは複数のデータを管理する時の考え方です。 例えば複数の点数を管理する時にはこのような書き方をします。 const scores = [89, 56, 72, 91, 90] ・ひとつひとつの点数のことを「要素」という。 ・左から順にインデックスという番号が振られている。 89→0, 56→1, 72→2, 91→3, 90→4 ※1からスタートではなく、0からスタートすることに注意 この中からある要素を取り出したいときは、console

          けけ丸

        デイトラ中級Day5~6 : jQuery実践編

        けけ丸

          デイトラ中級Day1：JavaScriptの基本文法

          chapter1 : JavaScriptとはJavaScript(以下JS)はフロントエンドで使う言語の一つで、HTMLやCSSに動きをつけたりすることができます。 最近ではJSを使ってアプリケーションを作ったりも出来るそうです。 「フロントエンドって何？」という方は以下の記事を見てみてください。 JSを実際に書いて練習したい方は以下のURLに飛ぶだけで記述できます。 ※コードがいっぱいになってきたら「cmd + R」を押してリロードすればリセットすることができます。

          けけ丸

          デイトラ中級Day1：JavaScriptの基本文法

          けけ丸

          【Day15〜20】自分のポートフォリオを作ってみる

          ポートフォリオといえるほど大それたものではありませんが、デイトラを受講し始めてたった14カリキュラム(11日間)で簡易的ながらも自分でWebページを作れるようになるのは感動です。 ちなみに今回作ったのはこんな感じのやつです。 本当はもっと全体的なデザインや・トップの部分・画像・動き等にこだわりたかったんですけど、デイトラにはスピード感を持って取り組みたいので、11日間で学んだことを容量だけ抑えてざっと取り組んでみました。 ちなみに制作時間は4時間くらいでした。 例や答

          けけ丸

          【Day15〜20】自分のポートフォリオを作ってみる

          けけ丸

          【Day14】またまた簡単なWebサイトをBootstrapで作ってみた(画像あり)

          今回もBootstrapで簡単なWebサイトを作ってみました。 だいたい2時間くらいかかりましたね。 慣れてる人だったら1時間とかで作っちゃうんでしょうけど僕の場合はまだまだ未熟なので時間がかかってしまいます、、 3日前に初めてBootstrapに触れたときは 「かなり使いづらいなこれ、、」 と思っていたのですが少し慣れてきて1番実感してることがあります。 それはエディタを使ってるときに「index.html」と「style.css」を行き来しなくていいことです。 こ

          けけ丸

          【Day14】またまた簡単なWebサイトをBootstrapで作ってみた(画像あり)

          けけ丸

          【Day13】Day12で作ったページを解説なしで作ってみた感想

          明けましておめでとうございます。 2022年も引き続きよろしくお願いいたします。 さて、今日のカリキュラムはきのう解説付きで作ったWebページを自分の力で作ってみようという内容でした。 なので本日もカリキュラムで学んだことのアウトプットというよりも感想寄りの記事になります。 正直なところBootstrapはまだまだ使いこなせません。 そのためBootstrapを使えば通常よりもスピーディにWebサイトを作れるとはいってもまだまだ時間がかかってしまいます。 それどころか

          けけ丸

          【Day13】Day12で作ったページを解説なしで作ってみた感想

          けけ丸

          【Day12】Bootstrapを使って簡単なWebページを作ってみた感想

          今日はBootstrapを使って簡単なWebページを作ってみました。 アウトプットというより感想を述べたいと思います。 どんなWebページを作ったのか気になる方もいるかもしれませんが、規約的に多分公開したらだめなので割愛させていただきます。 Bootstrapを使ってみた感想なんですけど、たしかに便利なんですよね。 便利なんですけど初心者ながら、Bootstrapを使うことにそんなにメリットを感じなかったんです。 なのでいろいろと調べてみた結果このQ&Aのベストアンサー

          けけ丸

          【Day12】Bootstrapを使って簡単なWebページを作ってみた感想

          けけ丸

          【Day10】【Day11】Bootstrap

          chapter1 : BootstrapとはBootstrapはCSSのフレームワークです。 「フレームワーク」が初耳の人は書きブログを読んでみてください。 今までBootstrapの存在は知ってたんですけど特に勉強したことなかったんですよね。 でも実際に使ってみるとまあ凄い。 通常だとコーディングするときはCSSに書かないといけないですよね。 でもBootstrapを使えばHTMLに直接コードを書くだけでデザインできちゃうんです。 使い方はとっても簡単。 chrome

          けけ丸

          【Day10】【Day11】Bootstrap

          けけ丸

          【Day8】【Day9】実際にWebページを作ってみた感想

          chapter1 : Webページを作ってみた感想Day8〜Day9にかけて4時間くらいで簡単なWebページを作ってみようという課題だったのですが、今日はたんまりと時間があったので2日分進めました。 やってみた感想としては 「もっとコードを書いて慣れるしかない。」 ですね。 いきなり何も見らずには作れなかったので一度声に出しながら模写コーディングをしました。 「これを書いたらこうなる」 「ここでfloatを使ったからここにclearを付けなきゃいけない」 「ん？なんでこ

          けけ丸

          【Day8】【Day9】実際にWebページを作ってみた感想

          けけ丸

          【Day7】レスポンシブデザイン

          chapter1 : レスポンシブデザインまずはレスポンシブデザインについて説明します。 「なんか聞いたことある言葉だけどよくわかんないや」という人も一定数いるのではないでしょうか。 めっちゃ噛み砕いていうと 『端末に合わせて表示が変わるようにデザインする』ということです。 あなたももしかすると経験があるかもしれませんが、スマホでWebサイトを見ているときにスクロールしたら左右にブレるページに遭遇したことはありませんか？ それはレスポンシブデザインに対応できていないペ

          けけ丸

          【Day7】レスポンシブデザイン

          けけ丸

          【Day6】Flexbox / Emmet / クラス名

          chapter1 : FlexboxWebデザインを勉強している初学者がどうしてもぶち当たりがちな壁が、横並びの鬼門「float」の概念です。 僕も以前、某プログラミングスクールで学習していた際に理解するのに時間がかかりました。周りの受講生も理解に苦しむ人は多々いましたね。 ここで初学者には難解なfloatの概念を打ち砕いてくれるのが「Flexbox」という便利な概念。 floatで躓いている人は下記サイトを見てみてください。 chapter 2 :Emmetあなたはコ

          けけ丸

          【Day6】Flexbox / Emmet / クラス名

          けけ丸

          【Day5】ヘッダーを作る

          chapter1 : 実際にコードを書き始める前の注意点index.htmlの書き始めは「!」からの「tab」を押して以下のコードを表示させるお話をDay3でしました。 ただこれだけだとCSSを反映させることができないので以下のようなコードを追記する。 どこにある何を反映させるのか階層を示す感じです。 ちなみに僕のエディタの階層はこんな感じになってます。 なんかうまい感じに説明できないので階層の考え方については以下の記事を参照してみてください。 追記した下記のコードに

          けけ丸

          【Day5】ヘッダーを作る

          けけ丸

          【Day4】環境構築

          プログラミングをするにあたって環境構築は避けては通れない道なんですけど、HTML/CSSの環境構築に関してはさほど難しいものではないのでさくっと構築しちゃいましょう。 chapter1 : VS Codeをインストールまずはコードを書くためのエディタと呼ばれるツールをインストールしましょう。 macとwindowsでやり方がやや異なるみたいなのでそれぞれ下記の記事を参照してみてください。 macの方↓ windowsの方↓ インストールできたら自分が見やすいように設定

          けけ丸

          【Day4】環境構築

          けけ丸

          【Day3】CSS

          chapter1 : まずはCSSが反映されるように準備エディタ(僕はVScode使ってます)に index.html / style.css / あとついでにimgのファイルをそれぞれ作る。 『vscodeって何？』の方はこの蟹みそハゲ太郎さんの解説をご覧ください。 chapter2 : HTMLからCSSを読み込めるようにするエディタのindex.htmlで「！(半角)」を入力し、Tabキーまたはエンターキーを押してみてください。 <!DOCTYPE html><h

          けけ丸

          【Day3】CSS

          けけ丸