【詳説】Swiperの導入方法を懇切丁寧に説明してみた。公式ホームページの日本語訳含【画像・図解あり】

こんにちは、りさです。

ちょいとSwiperを導入してみたい、という方のために導入方法を手短、でも丁寧に解説してみました。

公式ホームページを見れば大体できるんですが、どうしても英語ムリ！という方は続きを読んでいただければ、5分以内に導入できます。

【2020/12/21】jQuery標準デザイン講座ひととおりやってみた【記録】

2020/12/21

• jQuery標準デザイン講座　Lesson30
• UI部品のプラグイン（Slick）

【詳説】FTPソフト（ファイル転送ソフト）の導入方法を懇切丁寧に説明してみた【画像・図解あり】

【詳説】Slick導入方法を懇切丁寧に説明してみた【画像・図解あり】

こんにちは、りさです。

Slickをちょいと導入してみたい、と思っている方に向けて手短、でもわかりやすく説明したつもりです。

使用しているパソコンはWindowsです。

あと、GitHubからダウンロードする方法もあると思うんですが、ファイルをダウンロードする方が直感的だと思うのでファイルダウンロードの方でやろうと思います。

【2020/12/20】jQueryとEmmet記法【記録】

 2020/12/20

• jQuery標準デザイン講座　Lesson27-29
• Emmet記法　ドットインストール　Lesson9-12

jQuery標準デザイン講座

最終章で、難易度MAXです。さすがに難しかったです。

でも、それまでのLessonで非常に丁寧な説明があって、自分自身の経験値が上がってきていたので、やりごたえのある内容でした。

ただ、演算や要素を配置する設計など、あらかじめ準備してもらっている分ハードルは下がっていたと思います。

自分ひとりでどのような要素を用意して、どう操作するかというところまで考えなければならないとなると、まだまだ実践練習が必要だと実感しました。

Emmet記法　ドットインストール

これで一通りEmmetは勉強しました。

あとは、使うのに慣れていくだけだと思います。

ぶっちゃけVSCodeを使っていると、標準でEmmet自動変換・補完機能が使えるので多少は使い慣れていますが、もっと効率化できるところは残っているので実践していきたいと思います。

講義ごとのリンクを貼っておきます↓↓

＃０１：Emmetを使ってみよう

• 公式サイト
• index.htmlの作成
• !
• チートシート

＃０２：HTMLのタグを展開してみよう

• div
• a
• タブストップ

＃０３：タグの属性を指定してみよう

• #id
• .class
• []
• {}

＃０４：複数の要素を展開してみよう

• *
• 連番の指定

＃０５：階層を表現してみよう

• >
• +
• ^
• ()

＃０６：暗黙的な補完機能を活用しよう

• divの補完
• liの補完
• tr､tdの補完

＃０７：formに関するタグを展開してみよう

• form:post
• input:t
• input:c
• input:r
• select

＃０８：margin､paddingを展開してみよう

• m
• p
• m10
• p10
• m10p
• m10r
• m10p20p
• m10-20-30
• mb10

＃０９：CSSのプロパティを展開してみよう

• font-size: 20px;
• cursor: pointer;
• font-weight: bold;
• position: absolute;
• position: relative;

＃１０：Emmet記法でテキストを囲ってみよう

• Wrap with Abbreviation
• Wrap Indivisual Lines with Abbreviation

＃１１：画像に関する情報を取得してみよう

• Update Image Size
• Evaluate Math Expression

＃１２：Emmet記法をカスタマイズしよう

• snippets.json
• Emmetの設定
• 動作確認

<ではまた、Salut!!>

プログラミング学習の経過・全容はこちらにまとめてあります！

興味がありましたら、チェックしてみてください（＾＾）

lifeblogs.hatenablog.com

教材

jQuery

jQuery標準デザイン講座