デイトラ– category –

前置きが長いのでコードだけコピペしたい方は目次よりジャンプして下さい。 作ろうと思ったきっかけなど ※ベースとなるHTMLとCSSはデイトラの「TF-30」というテーマを使用しています。別テーマを使用されている方は適宜読み替えてください。ちなみにSWELL...

見ての通りテーマを変更しました。これからリアルタイムで作り替えていく予定です。表示がおかしい部分がありますが、随時修正していきます。年内にはポートフォリオのページも作りますので出来たらご覧ください。 復習が追いついてないですが、また中級編...

長い戦いだった 今回はレッスン内容の解説ではなくほとんど感想文です。 期限は5日だったのですが、大幅にオーバーして16日もかかりました。(中3日間は体調不良でダウン)これがもし実案件だったら完全アウトです。8割ぐらいは数日で仕上がったのですが最後...

ただいま中級編の最終課題の最後、ドロワーメニューの作成に取り組んでいます。ここでかなり長い時間ハマりました。drawer.jsでハンバーガーアイコンをクリックした時、背景よりヘッダーが前にきてしまい困りました。 細かい部分ですが、ヘッダーの方が前...

00:59 コード内のjQueryという文字列は$(ドルマーク)に置き換え可能 ⇨タイトルの通りです。 01:10 スムーススクロールでheader分の高さを引く書き方(DAY26とは別の書き方) ⇨headerにIDをつける。以下のようにscript.jsに追加する。 $("html, body&quo...

ひとつ前のエントリーでチャプターのタイムスタンプをリストアップしましたが、今回は初出の情報をピンポイントでピックアップしていきます。もう出てきている情報もあると思いますがあしからず。 00:58 メディアクエリタグでの囲み方 ⇨flexboxの記述など...

前回CSS編(PC)の初出の情報を抜き出しましたが、YouTubeみたいにチャプターごとに頭出しできたら便利かなと思いまして、チャプターごとにタイムスタンプをリストアップしました。大雑把だったり細かかったりうまく分けられてないかもしれないですがご参考...

前回と同じく、初出となる情報をピックアップしています。デイトラ生しか閲覧できませんが、該当箇所をダイレクトに観られるように動画のタイムスタンプをリストアップしておきます。個別の動画にはリンクが貼れないみたいなのでテキストだけですがご容赦...

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

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