基本的には今までの知識を総動員すれば作れます。動画で初出のTipsのみ書きます。 SPのみでCSSが読み込まれるようにする(media属性) linkタグの中にmedia="screen and (max-width:767px)"のように書くことにより、SPのみでCSSが読み込まれるようにできます...

デイトラにはない項目ですが、大切な部分なので記事にします。面倒ですがここをきちんと設定しておくと後々コーディングがだいぶ楽になります。 各種CSS/JSファイルの読み込み 動画ではhead内にまとめられていましたが、私はheadにCSS、bodyの閉じタグ直前...

今回は特筆することがないですが、手順をテキストに起こしておきます。 パスワードを入力し、XDでカンプを開く2ページ目(PC)、3ページ目(SP)のアセットからzipファイルをDL上記を解凍し、PCフォルダの中身をpracticeに作ったimgに移し替えSPフォルダはspと...

いよいよ中級総復習編に差し掛かりました！これで終わりと思いきやこの後に最終課題が待っているんですけどね。笑 構造を考える（ブロック分け） まずはiPadを使ってカンプをブロック分けしてみました。大体こんな感じかと思います。動画見てみたらクラス...

モーダルとは、コンピューター用語で「〔ダイアログ・ボックスが〕モーダルな◆ユーザーが応答しない限り、そのプログラムの他のコントロールは入力を受け付けない。別のプログラムには切替可能」という意味らしいです。 良く見かけるもので言うと、ニュー...

前回のものと似ていますが別パターンです。デイトラのサイドバーがまさにこの形式ですね！ブログの月別アーカイブなど、汎用的で色々なところに使えそうです。下準備として、上下のアローアイコン画像をカンプからDL⇨imgフォルダに入れておきます。 Q and ...

ボタンをクリックすると、ビヨーンとテキストが出てくるアレですね。よくQandA(FAQ)に使われています。下準備として、プラスとマイナスのアイコン画像をカンプからDL⇨imgフォルダに入れておきます。 Q and Aをアコーディオンでコーディングqa編 jQuery コ...

今回はタブをクリックで切り替わるパネルを作ります。一昔前はAjaxと呼ばれ流行しましたね。 クリックイベントの処理 tab編 jQuery jQueryは結構簡単で、今までの応用で出来ます。前回のjQueryの大枠の中に入れ子で書きます。 // クリック（タブ） jQuery(...

ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理) jQuery とても分かりやすいコードのため今回はコードをそのまま貼ります。前回のコードの親要素の中に書きます。 実は、アクションイベントの多くは「◯◯したら□□のクラスをつける」...

スムーススクロールとフローティングアイテムを作る jQuery jQueryの読み込みにはCDNを利用しました。コードは回答例に倣っています。今回もコードを色分けしましたのでご参考に。間違っている箇所がありましたらコメントで教えていただければ幸いです。 ...