【jQuery】slick slideをメインビジュアル部分にwidth:100%で組み込む

#

“`html:index.html

“`
どうやら``のようにonclick属性からformをsubmitするとonsubmitが実行されないぽい。

以下のように素直に`

コンポーネント単位の設計をしたらデザインガイドラインをつくろう

こんにちは、しがないwebデザイナーです。
去年の11月に、[Spotlight](https://spotlight.soy/)という仮想通貨を使ったCtoCメディアサービスをリリースしました。（担当箇所はデザインと画面コーディングです。）

そして、2019年5月31日に可決された改正資金決済法に含まれる「暗号資産カストディ業務に対する規制」に伴って1月31日のサービス内容変更と同時にデザインの改修も行いました。

そのときに、**デザインガイドライン**なるものを作成したので、つくりかたと重要性とか作ってからどう変わったかとかお話しします。

## デザインガイドラインとは

カタカナで書くとあまりにダサい。
ロゴとか、ホームページとかいろいろあると思いますが、今回はCSSフレームワークのDocみたいなもの、と捉えてください。

– [Bootstrap](https://getbootstrap.com/docs/4.4/components/alerts/)
– [BULMA](https://bulma.io/documentation/)
– [Pure.css](ht

overflow-wrap(word-wrap)、word-breakやら、結局どれがいいの？について検証

#経緯

この検証をする前は、
こんな感じの知識で仕事をしてました。

「うわっ文章、枠からはみ出ててもうてるやん。」
「とりあえずword-wrapとかword-breakいれといたらええんちゃうか。」

しばらくすると、やっぱ問題が「こんにちは」(^o^)/
本件、一時的には解決。

でも、

やっぱちゃんと知識入れやなあかんなーと思い、この記事を書くことにしました。

ちなみにword-wrapは古い名称で、今はoverflow-wrapを使うといいみたい。

#やってみたこと
親要素に500pxの幅を設定。
それぞれの子要素（各文章）にCSSを当てた時、
折り返されずに「はみ出るのか」「はみ出ないのか」を検証しました。
（もちろん文章の長さは500px以上あります。）

###環境
PCはMAC、
ブラウザは Firefox、Safari、Chrome、
Edge、IE（どちらもMAC内バーチャルボックスのwindows）

###displayの値はこの3つ
・block
・inline-block
・flex

###overflow-wrapの値
・break-wo

備忘録

画面の幅に合わせて中央寄せ
親要素のwidthを最小の画面幅以下にしてmargin:o auto;

楽天スマホ商品ページにiframeを入れる

# 対象読者

* 楽天市場に開店したての人
* 楽天GOLD（FTP）を契約している人
* スマホの商品ページ上部を自由にレイアウトしたい人

# つまり

スマホの見た目をこんな風にしたい方向けです。


# 読み終わった後に得られるもの

* 楽天GOLDでできることが少し分かる
* 楽天商品ページにおいて、CSSのどこをいじれば何がどう変わるかがチョットワカル
* 次のステップに進む準備ができるヒントを得るカモ（バナー以外にも、いろいろ自由にレイアウトを作れる）

# 説明しないこと

* 楽天GOLDの契約手順
* FTPへのアップロード方法
* HTMLやCSSの基礎

# 手順

早速説明していきます。
手順と同時に、ソースコードの説明なども適宜挟んでいきます。

あ、ちなみに楽天禁止タグを含む内容なので実施については自己責任でお願いし

27歳、未経験です あっ・・・（察し）

#はじめに

なんだこのオッサン！？（驚愕）

近年半導体業界が不景気になり業界丸ごとタイタニック並みに沈没しました。

請負先も「クビだクビだクビだ」ということで27歳にしてお仕事がなくなってしまったので

学生時代に興味があったWebエンジニアとして働きたく転職活動を始めました。

インプットした事を忘れないようにする為Qiitaでサボらずアウトプットして行きます。

あっ! 遅れましたがQiita初投稿になります。

今後は生暖かく見守もってください!

##本日のアウトプット
####目的はprogateで理解できなかったdivタグとfloatの仕組みを理解すること。
######divタグ
divタグは、ブロック要素であるため表示される要素は縦並びになる。
【JavaScript】グループ分けアプリを作って護廷十三隊を分けてみた

##はじめに
– 結構な人数で懇親会をしたい
– テーブルが別れている店を予約してしまった
– 同じ部署の人は離れて座ってほしい

こんな条件が揃った時に使うグループ分けアプリを作りました。
試しに最近はまったBLEACHに出てくる護廷十三隊をグループ分けしてみます。（まだ全巻読んでいないので初期メンバーで）

##デモ
4ステップでグループ分けしていきます
1. 氏名と部署を入れたCSVファイルを読み込む → csvの内容が下に表示される
2. グループ数を入力 ＋ [表を作成]をクリック → グループの数だけ表が作成される
3. [START]をクリック → ビンゴっぽく動く
4. [STOP]をクリック → 各グループに振り分けられる


##CSVを読み込んで画面に表示する
[こちらの記事](https://www.sejuku.net/b

【jQuery】サムネイル2段のメイン画像切り替え機能の実装

# はじめに
　プログラミングスクールでのECサイトの開発で商品の画像をサムネイル2段の画像切り替えで表示する機能を
　自作しました。

# 開発環境
　jQuery:3.4.1

# 実装手順

## 完成イメージ

# HTMLサンプルファイル
HTMLファイルを作成します。Railsを使っている場合は、最初に表示する画像をメイン画像に表示して、サムネイルは配列に入れた複数画像をeach文で表示すると同様に実装できます。

“`sample.html