web制作のしおり

日々の学習をアウトプットします。

40.フレックスボックスを使う② ~できることはたくさん~

本日も昨日に引き続き、フレックスボックスについて学習していきます。 参考までに昨日の記事です。 39.フレックスボックスを使う ~レイアウトの大きな手助け~ - web制作のしおり では早速やっていきましょう。 ボックスの中がいっぱいになったら、どうす…

39.フレックスボックスを使う ~レイアウトの大きな手助け~

今までfloatを使ってレイアウトをしていた部分を 教材ではフレックスボックスを使ってササッと仕上げていたのに驚愕しました。 いい意味で情報感度を高めて置くべきだと反省しました。 ということで、今回は時間を割いてフレックスボックスについて学習しま…

38.Webカンプからコーディングをする ~Adobe XDからデータを拾う~

本日からwebカンプを見ながら実際にコーディングしていきます。 適宜必要な知識を補充しながら進行していくので、いつも通りゆっくりです。 まずはWebカンプを確認する Adobe XDのデータは共有するとブラウザで確認できるようになります。 非常に優しい。 と…

37.CSS設計の考え方 ~ルールに則って書く~

本日はCSSの設計について学習しました。 CSSの書き方やクラスのつけ方等の「道しるべ」的なものを先人たちが体系化し、共有してくれています。 これをCSS設計と呼んでいるそうです。 この考え方を押さえておくことで、良いCSSを作ることができるそうです。 …

36.復習とAdobe XD ~jQuery復習とデザインカンプ作成~

本日はAdobe XDの使い方とjQueryの復習です。 早速やっていきましょう。 Adobe XDをどう使う? コーディング業務に必要なWebカンプを作るのに使います。 Webカンプは「コーディングの設計図」のようなもので、見た目だけではなく、そこからコーディングに必…

35.実践課題 ~Sassを使って作り直す~

昨日まではSassについて学習してきました。 本日はSassを用いて以前作ったサイトを作り直してみようという 実践スタイルの学習です。 ですので、Sassに限らず 作り直すにあたって見直したところや、気づきを書き留めておきたいと思います。 では、やっていき…

34.Sassを小分けにして管理する ~役割でファイルを分ける~

昨日までSassの書き方について学習してきました。 本日はSassのファイル管理面でのお話です。 具体的には 「scss※ファイルを分割して、メインのscssで読み込んで管理してみようよ」 というお話です。 ※「scss」というのはSassファイルの拡張子のことです。 …

33.Sassの便利な書き方を知る③ ~mixin~

本日は昨日書ききれなかったmixinについて学習していきます。 読み方が統一されていなく、ミクシン、ミックスイン、ミキシンなど人によって様々です。 mixinとは CSSのプロパティやバリュー、関数、引数などを予め定義しておいて、 それを色々な場所で使い回…

32.Sassの便利な書き方を知る② ~配列、map型変数、mixin~

本日はSassの目玉、mixinを学習します。 昨日触れなかったmap型変数についてもやっていきます。 配列とは こちらはjQuery等でも扱っているので、さらっと確認する程度で済ませます。 配列は変数の中に複数の値を持っていて、 インデックスと呼ばれる値の並び…

31.Sassの便利な書き方を知る ~変数、関数~

昨日は SassがCSSの拡張言語であること CSSを入れ子構造でかけること(HTMLの親子関係に似ている) 疑似要素も入れ子でかけること を学びました。 本日は変数、関数について学習していきます。 CSSなのに変数? Sassでは変数が使えます。 先に具体例を書くと…

30.Sassって何だ? ~イカしたスタイルシート、CSSの上位互換~

本日からSassの学習に入っていきます。 どうやら楽しそうな内容です。 まず、Sassとは何なのでしょうか? Sassとは お決まりの略語説明から入っていきます。 Sassとは「Syntactically Awesome Style Sheets」の頭文字です。 構造的にイカしたスタイルシート…

29.jQuery実践課題④ ~モーダルで画像拡大表示-2~

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…

28.jQuery実践課題③ ~モーダルで画像拡大表示-1~

昨日に引き続きjQueryの実践課題③と言うことで、 モーダルで画像拡大表示 をやっていきたいと思います。 プラグイン?は使用禁止だそうなので、jQuery単品での実装です。 実装の条件 画像をクリックすると 縦横画面いっぱいに薄いグレーの背景ボックスを表示…

27.jQuery実践課題② ~調べながら実装する~

昨日に引き続きjQueryの実践課題②と言うことで、 ページトップへ戻るボタンを付ける をやっていきたいと思います。 実装の条件 トップから80pxスクロールしたら 300ms(0.3秒)かけて フェードイン・フェードアウトで表示 表示してる間はボタンはページ右下…

26.jQuery実践課題① ~調べながら実装する~

本日からjQueryの実践課題と言うことで、 ドロワーメニューの実装 をやっていきたいと思います。 色々な情報を自分で拾い集めて、実装できる…解決力を養うことが目的の課題ですね。 本題に入る前に、「実装」について調べたので書いておきます。 「実装」と…

25.jQueryの使い方 ~イベント監視とアニメーション~

引き続きjQueryについて学習しましたので、整理します。 中でも「イベント監視」と「アニメーション」についてやっていきます。 イベント監視 JavaScriptの所でもやりました、イベント監視。 状態の変化があった時に何らかの処理をさせたい 時に使うものでし…

24.jQueryってなんだ?② ~書き方と使い方~

昨日に引き続きjQueryについて整理していきます。 jQueryがどんなものか、どんなメリットがあるかという事を昨日はまとめました。 本日は書き方のルールと、使い方についてまとめていきます。 jQueryの書き方 JavaScriptを使いやすく簡単にしたものがjQuery…

23.jQueryってなんだ? ~JavaScriptをより簡単に~

jQueryとは JavaScriptのライブラリ1つで JavaScriptをより簡単に記述できるようにしたもの ということだそうです。 ライブラリとは ライブラリって何でしょうか。 プログラムでよく利用される機能を切り出して、再利用しやすく纏めたものとのこと。 まず、…

22.DOM操作とは③ ~ボタンの操作とイベント監視~

昨日に引き続きDOM操作について整理していきたいと思います。 JavaScriptからボタンの操作 早速コードから書いていきます。 document.getById('test').click(); では1つずつ見ていきましょう documentで、ブラウザで読み込んだHTMLファイルを取得します。 …

21.DOM操作とは② ~JavaScriptでHTMLを自由に操作~

昨日に引き続き、DOM操作について整理していきます。 HTML要素の追加 JavaScriptでHTMLの要素を追加することもできます。 コードを書きながら整理していきます。 今回の流れは以下のようになります。 login_btnというオブジェクトを作成する そこへaタグ要素…

20.DOM操作とは ~JavaScriptでHTMLを自由に操作~

DOMとは DOMとはDocument Object Modelの略で、文書を操作する為の取り決め。 JavaScript(プログラム)でHTMLを参照したり、操作したりする為の仕組みと言えます。 ようやく、「JavaScriptでwebサイトに動きをつける」と「今までの基本学習」が繋がった感じが…

19.JavaScriptって何?③ ~基本もようやく大詰め~

基本も大詰め 変数や関数、条件分岐についていままで進めてきました。 配列、オブジェクト、繰り返し処理について今日は進めていきます。 配列 配列でできることは「複数のデータを管理する」こと。 その方法は インデックスという0からスタートする数字 複…

18..JavaScriptって何?② ~基本文法をとりあえず知る、話はそれからのようだ~

まずは基本文法から 昨日の学習で、全容がつかめないという話をしましたが 基本文法のお話だったので、当たり前でした。 まずは、基本を知ってそれからどう使うかを学んでいくという事なのでしょう。 というわけで、引き続き基本文法についてまとめてみます …

17.JavaScriptって何?① ~デイトラ中級編スタート~

JavaScriptとは フロントエンド言語、HTMLやCSSと違い「サイトに動きをつけるもの」 ブラウザ上で動く、プログラミング言語と考えて良さそうです。 中級編初日に学んだことと、追加で調べたことについてまとめていきます。 早速使ってみる jsconsoleというサ…

16.初級編まとめ と 当時の思い ~HTMLからBootstrapまで~

復習も兼ねての「まとめ」 本日は初級編の終わりに差し掛かったので、 復習も兼ねて「初級編」で学んだ事をおさらいしていきます。 ただ書くだけでは面白くないので、当時の自分の感想も含めて書いていきます。 初級編の内容 デイトラではweb制作コース初級…

15.ポートフォリオを作る ~自分のできることを伝える手段~

ポートフォリオとは? まず、人によってイメージするものが違う。 ポートフォリオとは?と聞かれて何をイメージしますか。 調べてみると、業界によって「ポートフォリオ」が指す意味が異なります。 みなさんはどんなイメージをしましたか。 私は現金・株式・…

14.Bootstrapってなんだろう? ~CSSフレームワーク~

Bootstrapとは CSSフレームワークの1つです。 フレームワーク?? 一言でいうと、 「デザインのテンプレート集」 です。 テンプレート集? 普段、CSSを用いてデザインをする場合、 CSSでクラスに対して、プロパティ、バリューを設定して HTMLタグにクラスを…

13.Emmet入力候補が出てこない!? ~大抵自分がミスってた。見直しが大事~

便利に慣れすぎた 快適に入力していたのに、突然絶望の淵に立たされたような感覚。 Emmetで思った入力が出きずに、非常に不便になった。 最初は壊れたのかと思ったが、結論そんなことはなかった。 CSSの入力でそれは起きた 前触れもなく、入力候補が出てこな…

12.私のデイトラ体験記 ~初級編:3歩進んで2歩下がる~

デイトラを始めて 予備知識無しで、デイトラの学習を始めた私。 現在の学習の進捗と、普段気をつけている事を書いていきたいと思います。 初日にぶつかった壁 HTMLとかCSSとか、そういった専門用語を使った説明についていけない。 デイトラの説明は簡潔でわ…

11.「float」は浮かせて寄せる ~平面なのに立体的~

floatって? 要素を横並びにしたい時に、使うCSSプロパティの1つです。 ・・・ そっとページを閉じようとしている、そこのあなた! 大丈夫です。 噛み砕いて、書きますので見ていきましょう。 要素を横並びに?最初からなるんじゃないの? 要素のある性質に…