本日はドロワーメニューを作っていきます。 本当はデータ属性について考えていたんですが、 ドロワーメニューは ハンバーガーアイコン等をクリックすると「にゅるっ」と出てくるあれです。 スマホ表示など表示領域が狭い時などに重宝します。 こんな感じのや…

昨日に引き続きJavaScriptライブラリを使って、スクロールしてきた時に要素にアニメーションをつけます。 今回使うのは「WOW.js」 商用利用無料のMIT版を使用します。 MIT版とは 「ライセンスの表記をコード内に記述しておく等のルールを守れば、使用に制限…

さあ、やってきました。 久しぶりのJavaScript。 JavaScriptって、なんだ？という方はこちら。 manablo.hatenablog.jp ではスライダー作成、やっていきましょう。 スライダーって何？ 言葉から予想できるかもしれませんが、 画像を複数枚配置して、時間でス…

自分でコーディングをした後、正しいかどうかチェックする。 特に自分で書いたものは、どうしても正しいと思い込んでしまいますよね。 主観にとらわれず、チェックするにはどうしたら良いのでしょうか。 それではやっていきましょう。 チェックするポイント …

フォントファミリーって何となく決めていませんか？ 私は最初に教わったフォントファミリーを後生大事に温めていた口です。 でも、それも今回でおさらば。 何故、そうやって指定しているのかを知れば 自分で決めることができるようになります。 本日はWebフ…

今日はCSSで動きをつけるtransitionについて、まとめていきます。 CSSで動きをつけるってどういうこと？ 早速やっていきましょう。 transitionプロパティとは そもそも「transition」ってどんな意味なんでしょうか。 調べると「遷移」とか「移り変わり」とか…

思い通りにCSSが適用されない！ 学び始めた頃よりは回数が減りましたが、それでもまだま出会います。 そんな失敗談を集めれば誰かのつまづき改善になるのでは？ と思い記事にすることに。 一応、CSSの書き方だけ最初におさらいして、この後の記事内で使う 言…

上下中央に配置したい。 コーディングをしていると、中央揃えしたい場面に良く出くわします。 今回は上下中央配置するやり方を確認していきます。 上下中央？簡単でしょ？ ホントにそうでしょうか？ margin : 0 auto;やtext-align : centerは左右中央にはし…

え、疑似クラスと疑似要素違うの？ 擬似クラスを調べた時に初めて知りました。 擬似クラスは、指定した要素の状態に対してスタイルを適用するもの。 それに対して、疑似要素はどんなものでしょうか。 では、早速やっていきましょう。 疑似要素とは 「指定し…

CSSのショートハンド使いこなしてますか？ 私はイマイチ覚えきれていません。 読むのにも、書くのにも ある程度知らないと「この指定なんだっけ？」となってしまいます。 今回は頻出のものを中心に、自分で使えることを目標にやっていきます。 ショートハン…

本日は位置疑似クラスについて。 では早速やっていきましょう。 位置疑似クラスって？ 主にリンク（href属性）と、hrefで設定された要素に対して様々なスタイルを適用できるクラスです。 参考ページのリンクは下記に 擬似クラス - CSS: カスケーディン…

予想外に数が多いことが判明し、このシリーズを続けようか悩まされます。 とはいえ、よく使うものとその周辺（仲間）については調べたいので、 ひとまず進めていきます。 本日はツリー構造疑似クラスについて。 では早速やっていきましょう。 ツリー構造疑似…

CSSの擬似クラスってご存知ですか。 私は「使っているが、名前は抜け落ちている」そんな状態です。 「これ、そういう名前だったのね。」という感じです。 まず、擬似クラスについて概要を確認して、 それから各疑似クラスを見ていこうと思います。 それでは…

backgroundプロパティ使いこなしています。 って言ってみたいですね。 昨日に引き続き、やっていきます。 昨日の記事は以下から 47.実は色々出来る。backgroundプロパティ ～多様な背景指定でデザインの幅を広げる～ - web制作のしおり 各プロパティを確認す…

何気なく使っているbackgroundプロパティ。 実は一括指定のプロパティで、私は普段 background-colorやbackground-imageぐらいしか使用していませんでした。 今回はその他にどのようなプロパティがあるのかや、新しく得た知識などをアウトプットしていきます…

昨日やりたかったpositionプロパティについて 試しながら整理してみました。 では、さっそくやっていきましょう。 positionプロパティとは 一言でいえば、「要素を望んだ場所に配置する」プロパティです。 通常の配置では、 要素同士を重ねる 並び順を無視し…

フレックスボックスを使うようになって、あまりfloatにお世話になる機会が減りました。 ただ、positionプロパティを指定したり、floatプロパティを指定した時の要素の挙動について、よくわかってないなと感じることがありました。 ですので、今一度確認して…

本日はflex-basisについて掘り下げて行きたいと思います。 昨日までのフレックスアイテムのプロパティに関する記事はこちら 42.フレックスアイテムを知る ～ボックスとは違うアイテムのプロパティ～ - web制作のしおり 43.フレックスアイテムを知る② ～flex-…

昨日に引き続き、本日もフレックスアイテムのプロパティについてまとめて行きたいと思います。 因みに昨日の記事は以下 42.フレックスアイテムを知る ～ボックスとは違うアイテムのプロパティ～ - web制作のしおり では早速やっていきましょう。 アイテムの…

フレックスボックスに対して設定するプロパティを昨日までまとめてきました。 本日からフレックスボックスの子要素、「フレックスアイテム」に対して設定するプロパティについてまとめていきます。 フレックスボックス内の子要素をフレックスアイテムといい…

さてさて、昨日に引き続きフレックスボックスをまとめていきます。 本日の内容でフレックスボックスが半分、一段落といった所でしょうか。 参考までに前日までのリンクを貼っておきます。 39.フレックスボックスを使う ～レイアウトの大きな手助け～ - web制…

本日も昨日に引き続き、フレックスボックスについて学習していきます。 参考までに昨日の記事です。 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等でも扱っているので、さらっと確認する程度で済ませます。 配列は変数の中に複数の値を持っていて、 インデックスと呼ばれる値の並び…