【CSSだけで出来る】transitionでWebページにちょっとした動きをつける
こんにちは。
JavascriptやjQueryを使わなくてもcssのtransitionで動きが付けられることを知り、よさげな使い方をピックアップしました。
·
4.背景がじんわりと色づく
See the Pen
box by rika (@rikarin987)
on CodePen.
transitonやtransformを使えば、
CSSだけでも動きがあるページが作れそうですね。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/24ad0736.a03ae0c7.24ad0737.f1eaac44/?me_id=1349190&item_id=10000006&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Foiwaizen%2Fcabinet%2Fproduct%2Foku-ise%2Franran400g.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/24ad0736.a03ae0c7.24ad0737.f1eaac44/?me_id=1349190&item_id=10000006&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Foiwaizen%2Fcabinet%2Fproduct%2Foku-ise%2Franran400g.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
Sassで数式に/を使うのは非推薦らしいという話
Sassを使ってcloud9でコーディングしていたらこんな警告が。
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($size, 375) or calc($size / 375) More info and automated migrator: https://sass-lang.com/d/slash-div ╷ 32 │ font-size: ($size / 375) * 100vw; │ ^^^^^^^^^^^ ╵
なんだろうと思って調べたらSassでは割り算に/を使うのは非推薦らしい。
何故かというとグリッドレイアウトなどで区切り線として/を使うことがあり、意図しないところで割り算してしまう可能性があるからとのこと。
解決法としてmath.div またはcalcを使えばOK。
早速コードを変更してみると、今度はエラーが出た。
Error: There is no module with the namespace "math". ╷ 32 │ font-size: (math.div($size, 375)) * 100vw; │ ^^^^^^^^^^^^^^^^^^^^
@use 'sass:math';をスタイルシートの最初に書かないと出るエラーらしい。
ということで、スタイルシートの最初に書いたらエラーがなくなりました。
テックアカデミー/はじめての副業コース受けてみた感想。
こんにちは。
2021/12月~2022/2月にテックアカデミーの「はじめての副業コース」を受講しましたので、講座の内容と感想について書いていきたいと思います！
1.テックアカデミーとは
キラメックス株式会社が運営するオンラインプログラミングスクールです。
企業の研修にも使われている会社なので、実績があり安心して受講できます。
もともとPC初心者でもプログラミングが始められるようにと作られたスクールなのでPC操作にあまり自信がなくても始められます。
ネットサーフィンができるレベルなら、メンターサポート付きで十分やっていける内容だと思います。
2.はじめての副業コースについて
私は今回、はじめての副業コース を受講しました。
このコースでは、Web制作について学べます。
Webデザインについてはサラッとしか学べませんが、誰かがデザインしたWebページをプログラミングして作成する技術が身に付きます。
3.入金後
申し込み→決済後に受講期間前でもすぐにカリキュラムが見れるようになります。
受講開始日まではマンツーマンメンタリングが受けられませんが、受講開始前からテキストが見れるので、自分でどんどん先に進めることもできます。
ちなみに、受講終了後もテキストはずっと見ることができます。
4.受講開始
受講開始後はマンツーマンメンタリング、課題の提出ができるようになります。
ここで、受講期間前に自習していてわからなかったところを質問すると良いです。
5.講座の内容について
課題が7つあり、受講期間中にすべて完了するのが目標です。
課題1~6まではボリュームも多くなく、テキストを見たり、メンターサポートを受ければそこまで時間はかからずクリアできると感じました。
問題は7つめの最終課題で、デザインカンプからWebページを作る課題なのですが、課題内容を見た時点で
「？？？」
ってなりますw
最終課題で難易度が跳ね上がります。課題1~6はそれぞれ１日かからずにできますが、最終課題は３週間程度かかりました。
受講期間中は最終課題にじっくり時間が取れるよう、メンターさんと相談しながらスケジュール調整して、時間を作っていくと良いと思います！
6.メンタリング＆チャットサポートについて
チャットサポートは毎日15:00~23:00の間に回答が来ます。
この時間の間なら、質問を送ると3分以内に反応があるので非常に対応が早くて助かりました。
メンタリングについては、週に２回ほど25分のビデオ通話を行い、わからないところの質問や勉強の進め方について相談できます。特に聞くことがないときはキャンセル＆別の日に振り替えることも可能です。
受講前にアンケートがあって、優しく教えてほしいか or はっきり指摘してほしいか、結論を簡潔に教えてほしいか or 基礎から丁寧に教えてほしいか といった感じの希望を聞かれます。
私は豆腐メンタルなので優しく教えてほしいほうに希望を出したら、とっても優しいメンターさんが付きました。
カリキュラムのこと以外にもおススメの本や学習サイト、副業を始める流れなども相談できるのが良かったです。
7.感想
テックアカデミーの「はじめての副業コース」で、副業でWeb制作をするための最低限のスキルを得ることができました。
授業料は少々しますが、独学で勉強しているより何倍も効率よくスキルの習得ができると感じます。
私自身も初めはHTML？CSS?という感じでしたが、1~2か月学べばホームページが作れるレベルに成長しました！
副業目的で受講しましたが、教養や習い事としてプログラミング勉強を始めるのにも十分有意義な講座だと思いますよ。
以下記事で安く学べるプログラミングスクールまとめました。
【JavaScript】$0で移動した選択対象を確認しよう
こんにちは。
JQueryでは.next()や.parent()で選択対象を移動することができますね。
実際にコードを書いていると思った通りに対象を選択できず、うまく実装されないことはありませんか？
そのようなときのためにディベロッパーツールでどこを選択しているか確認する方法があります。
$0で移動した選択対象を確認しよう
以下のようなHtmlを用意しました。
Html
<div id="mother"> 親要素 <div id="child"> 子要素 <div id="grandchild"> 孫要素 </div> </div> </div> <div id="mother-next"> 親要素の次の要素 </div>
ディベロッパーツールを開きましょう。
①ディベロッパーツールの左上のアイコンをクリック
②子要素をクリック
③id="child"のdiv要素が選択される
次にコンソールに$0と記載します。
すると、$0の下に今選択されている要素、つまりdiv#childが表示されます。
$0から選択対象を移動させてみましょう。
$0.parentElement.nextElementSiblingと記載すると、今度は下にdiv#mother-nextが表示されます。
$0で移動した選択対象をディベロッパーツールで確認する方法について説明しました。
選択対象の移動が複雑なときに便利だと思います。
【jQuery】選択対象が何かをディベロッパーツールで確認する方法
jQueryではオブジェクトとして選択した対象を、親や子、次の要素などに選択対象を移動させることができます。
例えば、
Html
<div id="mother"> 親要素 <div id="child"> 子要素 </div> </div>
Js
$('#mother') .children() .css({ 'color': 'red' });
この場合、初めに選択したmotherから、その子要素のchildに選択対象が移動しています。
これだけで十分便利な機能ですが、Htmlが複雑で初めに選択したオブジェクトから移動させたい目的のオブジェクトまで遠いと、Javascriptのコードが長くなって目的のオブジェクトを指定したいのに迷子になってしまうことがあります。
そこで、console.logをつかってディベロッパーツールで移動先の選択対象が何かを確認する方法について紹介します。
選択対象が何かをディベロッパーツールで確認する方法
以下のようなHtmlを用意しました。
Html
<div id="mother"> 親要素 <div id="child"> 子要素 <div id="grandchild"> 孫要素 </div> </div> </div> <div id="mother-next"> 親要素の次の要素 </div>
子要素をはじめに選択して「親要素の次の要素」に選択対象を移動させたいと思います。
その場合は、Javascriptに次のように記載します。
$('#child') .parent() .next() .css({ 'color': 'red' });
そうすると、親要素の次の要素が選択されます。
ここで、わざと選択対象の移動を間違えてみます。
$('#child') .parent() .parent() .css({ 'color': 'red' });
このときに、あれ？今の選択対象はいったい何になってしまったんだ？と思いますよね。
その場合、ディベロッパーツールで今何を選択しているかを確認することができます。
まずはJavascriptに以下のように記載し、ディベロッパーツールを開きます。
console.log( $('#child') .parent() .parent());
childの親要素の親要素(このときはbody)が選択されていることを確認できます。
Bootstrapの導入方法と特徴
こんにちは。
最近Bootstrapを勉強し始めたので、自分の頭の整理のためにも書いていこうと思います。
1.Bootstrapとは
Twitter社が開発したWebフレームワークで、楽に見栄えの良いWebページを作ることができます。
Bootstrapを使用することによりコーディングの時間が短縮できます。
デメリットとしてはだれが作っても同じような単調なページになってしまいます。
とはいえ、そこはWebデザイナーやコーダーの腕の見せ所でいくらでもなんとかなると思います。
こんなWebページが作れますので、デザインやコーディングのやり方によっては十分美しいWebページが作れます。
2.Bootstrapの導入方法
Bootstrapの導入方法はとても簡単です。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
上記のコードをhtmlファイルの
