本日も昨日に引き続き、フレックスボックスについて学習していきます。 参考までに昨日の記事です。 39.フレックスボックスを使う ~レイアウトの大きな手助け~ - web制作のしおり では早速やっていきましょう。 ボックスの中がいっぱいになったら、どうす…
今までfloatを使ってレイアウトをしていた部分を 教材ではフレックスボックスを使ってササッと仕上げていたのに驚愕しました。 いい意味で情報感度を高めて置くべきだと反省しました。 ということで、今回は時間を割いてフレックスボックスについて学習しま…
本日からwebカンプを見ながら実際にコーディングしていきます。 適宜必要な知識を補充しながら進行していくので、いつも通りゆっくりです。 まずはWebカンプを確認する Adobe XDのデータは共有するとブラウザで確認できるようになります。 非常に優しい。 と…
本日はCSSの設計について学習しました。 CSSの書き方やクラスのつけ方等の「道しるべ」的なものを先人たちが体系化し、共有してくれています。 これをCSS設計と呼んでいるそうです。 この考え方を押さえておくことで、良いCSSを作ることができるそうです。 …
本日はAdobe XDの使い方とjQueryの復習です。 早速やっていきましょう。 Adobe XDをどう使う? コーディング業務に必要なWebカンプを作るのに使います。 Webカンプは「コーディングの設計図」のようなもので、見た目だけではなく、そこからコーディングに必…
昨日まではSassについて学習してきました。 本日はSassを用いて以前作ったサイトを作り直してみようという 実践スタイルの学習です。 ですので、Sassに限らず 作り直すにあたって見直したところや、気づきを書き留めておきたいと思います。 では、やっていき…
昨日までSassの書き方について学習してきました。 本日はSassのファイル管理面でのお話です。 具体的には 「scss※ファイルを分割して、メインのscssで読み込んで管理してみようよ」 というお話です。 ※「scss」というのはSassファイルの拡張子のことです。 …
本日は昨日書ききれなかったmixinについて学習していきます。 読み方が統一されていなく、ミクシン、ミックスイン、ミキシンなど人によって様々です。 mixinとは CSSのプロパティやバリュー、関数、引数などを予め定義しておいて、 それを色々な場所で使い回…
本日はSassの目玉、mixinを学習します。 昨日触れなかったmap型変数についてもやっていきます。 配列とは こちらはjQuery等でも扱っているので、さらっと確認する程度で済ませます。 配列は変数の中に複数の値を持っていて、 インデックスと呼ばれる値の並び…
昨日は SassがCSSの拡張言語であること CSSを入れ子構造でかけること(HTMLの親子関係に似ている) 疑似要素も入れ子でかけること を学びました。 本日は変数、関数について学習していきます。 CSSなのに変数? Sassでは変数が使えます。 先に具体例を書くと…
本日からSassの学習に入っていきます。 どうやら楽しそうな内容です。 まず、Sassとは何なのでしょうか? Sassとは お決まりの略語説明から入っていきます。 Sassとは「Syntactically Awesome Style Sheets」の頭文字です。 構造的にイカしたスタイルシート…
jQueryで動きをつける こちらもまずはコードを $(function(){ const modal = $("#js-modal"); const overlay = $("#js-overlay"); const overImg =$('#open-img'); const miniImg =$('.js-open'); miniImg.click(function(){ const index = miniImg.index(th…
昨日に引き続きjQueryの実践課題③と言うことで、 モーダルで画像拡大表示 をやっていきたいと思います。 プラグイン?は使用禁止だそうなので、jQuery単品での実装です。 実装の条件 画像をクリックすると 縦横画面いっぱいに薄いグレーの背景ボックスを表示…
昨日に引き続きjQueryの実践課題②と言うことで、 ページトップへ戻るボタンを付ける をやっていきたいと思います。 実装の条件 トップから80pxスクロールしたら 300ms(0.3秒)かけて フェードイン・フェードアウトで表示 表示してる間はボタンはページ右下…
本日からjQueryの実践課題と言うことで、 ドロワーメニューの実装 をやっていきたいと思います。 色々な情報を自分で拾い集めて、実装できる…解決力を養うことが目的の課題ですね。 本題に入る前に、「実装」について調べたので書いておきます。 「実装」と…
引き続きjQueryについて学習しましたので、整理します。 中でも「イベント監視」と「アニメーション」についてやっていきます。 イベント監視 JavaScriptの所でもやりました、イベント監視。 状態の変化があった時に何らかの処理をさせたい 時に使うものでし…
昨日に引き続きjQueryについて整理していきます。 jQueryがどんなものか、どんなメリットがあるかという事を昨日はまとめました。 本日は書き方のルールと、使い方についてまとめていきます。 jQueryの書き方 JavaScriptを使いやすく簡単にしたものがjQuery…
jQueryとは JavaScriptのライブラリ1つで JavaScriptをより簡単に記述できるようにしたもの ということだそうです。 ライブラリとは ライブラリって何でしょうか。 プログラムでよく利用される機能を切り出して、再利用しやすく纏めたものとのこと。 まず、…
昨日に引き続きDOM操作について整理していきたいと思います。 JavaScriptからボタンの操作 早速コードから書いていきます。 document.getById('test').click(); では1つずつ見ていきましょう documentで、ブラウザで読み込んだHTMLファイルを取得します。 …
昨日に引き続き、DOM操作について整理していきます。 HTML要素の追加 JavaScriptでHTMLの要素を追加することもできます。 コードを書きながら整理していきます。 今回の流れは以下のようになります。 login_btnというオブジェクトを作成する そこへaタグ要素…
DOMとは DOMとはDocument Object Modelの略で、文書を操作する為の取り決め。 JavaScript(プログラム)でHTMLを参照したり、操作したりする為の仕組みと言えます。 ようやく、「JavaScriptでwebサイトに動きをつける」と「今までの基本学習」が繋がった感じが…
基本も大詰め 変数や関数、条件分岐についていままで進めてきました。 配列、オブジェクト、繰り返し処理について今日は進めていきます。 配列 配列でできることは「複数のデータを管理する」こと。 その方法は インデックスという0からスタートする数字 複…
まずは基本文法から 昨日の学習で、全容がつかめないという話をしましたが 基本文法のお話だったので、当たり前でした。 まずは、基本を知ってそれからどう使うかを学んでいくという事なのでしょう。 というわけで、引き続き基本文法についてまとめてみます …
JavaScriptとは フロントエンド言語、HTMLやCSSと違い「サイトに動きをつけるもの」 ブラウザ上で動く、プログラミング言語と考えて良さそうです。 中級編初日に学んだことと、追加で調べたことについてまとめていきます。 早速使ってみる jsconsoleというサ…
復習も兼ねての「まとめ」 本日は初級編の終わりに差し掛かったので、 復習も兼ねて「初級編」で学んだ事をおさらいしていきます。 ただ書くだけでは面白くないので、当時の自分の感想も含めて書いていきます。 初級編の内容 デイトラではweb制作コース初級…
ポートフォリオとは? まず、人によってイメージするものが違う。 ポートフォリオとは?と聞かれて何をイメージしますか。 調べてみると、業界によって「ポートフォリオ」が指す意味が異なります。 みなさんはどんなイメージをしましたか。 私は現金・株式・…
Bootstrapとは CSSフレームワークの1つです。 フレームワーク?? 一言でいうと、 「デザインのテンプレート集」 です。 テンプレート集? 普段、CSSを用いてデザインをする場合、 CSSでクラスに対して、プロパティ、バリューを設定して HTMLタグにクラスを…
便利に慣れすぎた 快適に入力していたのに、突然絶望の淵に立たされたような感覚。 Emmetで思った入力が出きずに、非常に不便になった。 最初は壊れたのかと思ったが、結論そんなことはなかった。 CSSの入力でそれは起きた 前触れもなく、入力候補が出てこな…
デイトラを始めて 予備知識無しで、デイトラの学習を始めた私。 現在の学習の進捗と、普段気をつけている事を書いていきたいと思います。 初日にぶつかった壁 HTMLとかCSSとか、そういった専門用語を使った説明についていけない。 デイトラの説明は簡潔でわ…
floatって? 要素を横並びにしたい時に、使うCSSプロパティの1つです。 ・・・ そっとページを閉じようとしている、そこのあなた! 大丈夫です。 噛み砕いて、書きますので見ていきましょう。 要素を横並びに?最初からなるんじゃないの? 要素のある性質に…