nomal note

新人Webデザイナーが個人的に覚えたり作ったりしたコードを投下していきます。検証用なので支離滅裂注意。

slick.js実装メモ

今日は、jQueryライブラリ「slick.js」の実装です。

相変わらずピヨってるので、自分のためにメモ。

執筆記事のように事細かに書きません。忘備録です。参考にもならないと思います。

あしからず。

 

【HTML内にscript定義】

◆読み込む順序

コンテンツの読み込みにラグがでるため、スクリプトは基本bodyの最後に記述します。

プラグインはhard内でOK。hard内の記述の甲乙は以下の通り。
hard内

  1. サニタイズ
  2. scriptのCSS
  3. jsファイル
  4. 自作のscript

f:id:nomal_f:20160921194932p:plain

f:id:nomal_f:20160921194925p:plain f:id:nomal_f:20160921194913p:plain

 

自作したものはどんどんいれこんでいくscript内に入れ込んでいく。

膨らんで構文が乱れるようであれば個別にファイルを生成し、そちらに格納したのちそのファイルを埋め込み治す。

 

◆基本、ダウンロードしたjsの装飾ファイルはいじらない。

色変えなどが必要な場合は別途ファイルを生成して、そのファイル内にスタイルを上書きする。どこに装飾が当たっているかはデベロッパーツールで検索すればOK。コピペして上書きする。


▶今回は_slider.scssを生成して、スタイルあてました。

f:id:nomal_f:20160921195002p:plain

忘れがちですが。中央寄せはこれです

 

◆バグの解消の仕方

Consoleやスタイルを駆使して
親要素をたどっていく。動的要素は親要素にかかっているので、Elementsからたどっていく。そう、ひたすらね

 

ディレクトリ管理のおさらい

  • layoutはユニークなコンテンツパーツ
  • モジュールは凡庸性のある部品パーツ

※その中にscriptのsassも格納する

※scriptのCSSはHTMLないにCSSで記述する

 

◆ライブラリのCSSCSS直下にいれたよ今回は

bowarで管理したほうがぐちゃぐちゃにならなくてすむけど、今回はいいって

ajax-loader.gif

・slick-theme.css

・slick.css

とかbowerで管理して欲しいって。はいごめんなさい。

f:id:nomal_f:20160921194327p:plain

◆error一覧

 

jquery.jsが重複している
※余計なファイルが入っている
※必要なファイルが格納されていないGET404notfound</>

 ちゃんと、errorについては読み取れるようにしなさい。

そしてどうすれば良いかも、ちゃんとおしえてくれるから。(社長)

おっしゃる通りでゲスゲス。

 

コンパイル失敗してるよ

f:id:nomal_f:20160921194906p:plain

社長に_つけてファイルgalpsassすればなおるっていわれたけど、全部CSSファイル生成してくれました!!!なんてこった!!!別に良いって…

 

【参考にした記事】

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

slick.jsの使い方まとめ | cly7796.net

 

 


広告を非表示にする

【DAI語感覚】学生もコーディング速度をあげたいなら、Emmet(省略記法)で書くのです( ˘ω˘ )

コーディングをするとき、SassやScss、Lessをつかわないで、CSSに直書きしてる方って結構いるんじゃないですか?コツコツ書いてたら、いくら時間があっても足りません。 爆速コーダーの第一歩として、省略記法Emmetでのコーディングをつよくオススメします。

f:id:nomal_f:20160707192704p:plain

 

■Emmetってなんだよ 

f:id:nomal_f:20160707142535p:plain

Emmet — the essential toolkit for web-developers

Emmetは、HTMLやCSSの編集を強化するプラグインのひとつです。
コーディングをする際に、タグやスタイルが長くなりますよね。
それを、数文字打つだけで自動的に補完してくれる便利なものです。

くだいてまとめると「DAI語」みたいなもんです。略して打てるんですよ。

【たとえば】

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

これ、チマチマ打ってませんか?

 

そんなめんどくさいこと、今日でおさらばです。

ul>li*5

を打った文末で【TAB】か【Control+E】をおして展開して終了です。

タグの閉じもれも解消してくれて一石二鳥ですね。
これが、省略記法ができるプラグイン、Emmetの力なのです。( ˘ω˘ )

続きを読む

画像を自動で反映してくれるスクリプト

画像更新が多いので、スクリプトをメモしておきます。

ディレクトリ内でファイルを数字で管理すれば、自動的に振り分けして反映してくれます。間違ってたらスミマセン。

 

f:id:nomal_f:20160623120201p:plain

 

 

こんな感じで整理しておくと、上記の条件をいれるだけで反映されます。

■20160416=ディレクトリの定義

■”1”=カテゴリ

■”3”=枚数

で組んでます。

 

ディレクトリの管理】

f:id:nomal_f:20160623120223p:plain

リネームを簡潔にすると、クライアントさまにも整理してもらいやすくなるので便利です。

スクリプトのソース】 

【3分share!】ソースをサイトに貼り付けてみよう。【GitHub Gist】

仕事がパタパタして、あまりブログが更新できず...

でもちゃんと勉強してるよ!ってことでup(・ω・)

 

 「アウトプットの練習で、ソースを綺麗に表示させたいな」と思ってる方向けに、投下します。ソースコードをメメッと貼りたい時は、Githabに登録して以下のアドレスにGO!

Octocatちゃんがお出迎えしてくれます。

かわいいですねえ^^*

Gitは簡単にいうと、データのログを蓄積して管理しておくものです。

メモリーカードみたいなもんですかね。

細かいことは今回割愛します。(詳しいことは後々書きます!)

 

【貼り付けるまでの流れ4ステップ】

1.ソースを書き込む

f:id:nomal_f:20160407164543p:plain

 

 

 2.「Create secret gist」のボタンをクリック
f:id:nomal_f:20160407164553p:plain
  3.「Create secret gist」のプレビュー画面が開くので...

f:id:nomal_f:20160407164603p:plain

 4.右上にある「Embed」のなかのタグを自分のブログソースに貼り付けます

 ※もちろんHTML編集でコピペだす。

f:id:nomal_f:20160407164621p:plain

【貼り付けてみました!】 

gist.github.com

サイトガツガツ作ってる人は、もう知ってるよ!

ってなってるかも知れませんが。私の防備録なので許してw

3分シェアタイムでした!ハピネスヽ|・ω・|ゞ

  

【参考サイト様】

fukafuka295.jp

 

BEMに基づいたCSS命名規則について考えてみた

 

皆さんこんにちはnomalです。

最近ブログをはじめたから余計にMacBook Airほしいなーなんて考えてます。MacBook Proを購入して五年目だけど、あと三年くらいは頑張ってくれそう。Mac貯金はじめようかな。

 

さて、今日はサイトをコーディングするにあたって必要なマークアップについてです。

マークアップエンジニアという役職があるくらい、マークアップって重要!と一本新規で1ページコーディングを経験した私は、心の底から作ってる最中に感じました。マークアップ構成をグダるとCSSがどんどん長くなってしまって、一ヶ月後に修正が入った時に「あれ?ここなんでこんなプロパティ入ってるんだっけ?」とか「そもそもどこを修正したら良いのか分からない!」なんて事態に作った本人が陥りがちです。

故に、他の人が代理修正するときに激しく時間をロスする可能性だってあるわけです。

自分だけじゃなく、他人の時間を奪うことなんて社会人としてNGですね。

 

と、いうわけでCSSのclassやidの命名規則BEMという定義を参考にしてまとめていきたいと思います。

 

続きを読む

時間がある限りストックはやめない!!

はじめましてこんにちはnomalです。

WordPressと平行して、はてなブログも使ってみます。

ここでは、Howto(考え方・まとめのまとめ)よりかは小技(スキル・連没型)よりなブログにしていこうかと。

(codepenをガシガシ使いたかったので、貼り付けがスマートにできる方にしたかったのもありますが。)

 

WordPress覚えればすっごく拡張性があって良いんだけど。

まだ翻弄されているのです。

 

 

一発で貼り付けられたΣ(ง `ω´)ง

 

入社してあっという間に1クオーターだけど、実作は1本しかできてないからなー。

毎日3本以上はstock投下できるように頑張ろ!