カテゴリー: コーディング の記事一覧

jQueryでローディングアニメーションの設定 「jquery」でローディングアニメーションの設定方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 HTMLを記載 下...

jQueryでグラフを設定 「jquery」で画像が震える方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 jRumble をダウンロード ダウンロード先 HTMLを...

aタグでボックス全体を囲いたい時 ボタンをcssで作成した際に、全体を囲いたい!! そんな時に使えるcssを記載します。 cssを記載 下記のソースを追加してください。 [crayon-5ba9a59...

jQueryでグラフを設定 「jquery」でグラフを作成する方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加してください。 ※読み...

jQueryでページトップを設定 「jquery」でページトップを設定する方法をのご紹介!! 「jquery.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加してくださ...

jQueryで画像を綺麗に配置 「jquery」でランダムな画像を綺麗に配置する方法をのご紹介!! 「Masonry.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加し...

Viewport 今までの％ではなく新しい単位があります。 vw viewport width ビューポートの幅に対する割合 vh viewport height ビューポートの高さに対する割合 vm...

jQueryでカレンダー作成 「jquery」でカスタマイズしやすいカレンダーのご紹介!! 「Calendar.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加してくだ...

jQueryで画像を動かす 「jquery」でおしゃれな画像の見せ方にしたい!! 寒川神社を目標にまずは簡単にできる部分から設定していきます。 「jquery.min.js」をダウンロード致します。 ...

jQueryでおしゃれな背景アニメーションを使いたい 「jquery」でおしゃれな背景が動くエフェクトを作りたい!! 寒川神社を目標にまずは簡単にできる部分から設定していきます。 「jquery.mi...

Macで.htaccess編集 Macでリダイレクトの設定など「.htaccess」に記載したい場合編集できなかったらいするので記載いたします。 ターミナルを開きます [crayon-5ba9a59e...

Gitの色々なコマンド Gitのコマンドを忘れてしまった場合の参考になればと思い記載しております。 ローカルの以前のデータを戻したい場合 特定のファイルではなく、全て元に戻したい場合 [crayon-...

フォントの初期設定 フォントサイズをbodyで初期設定10pxに変換。 [crayon-5ba9a59e99e62442534819/] 100%は通常16pxがデフォルト設定。 フォントの計算を楽に...

Gitの仕組み？ Gitは、共有リポジトリを使い作業を行います。 共有リポジトリとは、「複数人で共有しているフォルダ」の事を指します。 「リポジトリ」とは、ファイル(複数のプロジェクトフォルダ)のデー...

.htaccessでフォルダ内のクロールを拒否 テストサイトをサーバーにアップして作業している際に、検索に引っかかったり、オフィシャルのサイトに影響してしまったりするので、 クロール拒否をしたい際に、...

gitとは？ Gitは、ファイルの更新履歴を保存しておくことができるツールです。 そのため、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることができます。 また、古いファイ...

タブメニュー作成方法 「jquery.min.js」をダウンロード致します。 ダウンロード先 jQueryタブメニュー 下記のソースを追加してください。 [crayon-5ba9a59e9ab1e94...

アコーディオン作成方法 「jquery.min.js」をダウンロード致します。 ダウンロード先 jQueryアコーディオン 下記のソースを追加してください。 [crayon-5ba9a59e9b14a...

ブレイクポイント スマホ:767px以下 タブレット:768px〜991px PC:992px〜1119px PC大画面:1200px以上 クラスの設定 スマホ:.col-xs-1(カラム数) タブレ...

Atomのショートカットキー一覧 Atomでコーディングする時の効率化できるようにショートカットキー掲載しました Mac Command + クリック マルチカーソルの追加 Command + ] /...

CSSフレームワーク Bootstrapや、Foundation/Pure/など色々な「フレームワーク」が配布されています。 CSSフレームワークは、コーディングの際に、簡略化するという「フレームワー...

CSSでリンクのカラー設定 リンクのカラー設定について記載いたします。 基本的な設定 [crayon-5ba9a59e9bc8f510484499/] クラスで設定する際の指定 [crayon-5ba...

CSS3のtransformでテキストや画像を動かします!! ベンダープレフィックスは省略しています。 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 tr...

Atomを使いやすくカスタマイズ 使いやすいテキストエディタの拡張機能を紹介致します!! メニューバーにあるHelp→WelComeGuideをクリック 「Install a Package」をクリッ...

list-style list-styleで数字や、ドットはどれだっけ？てなりますので備忘録として記載いたします。 黒丸 [crayon-5ba9a59e9c8c2588669114/] サンプル サ...

はじめに 自分のサイトにアイコンを表示させたいと思ったことはありませんか？ 実はあのブラウザのアドレスバーなどに小さく表示されるアイコンのことをファビコン（Favicon）といいます。 今回はファビコ...

CSS3からの変更点 「jquery.min.js」をダウンロード致します。 ダウンロード先 cssを記載 下記のソースを追加してください。 [crayon-5ba9a59e9d6f959164848...

テキストエディタ テキストエディタを使えば、HTMLを作成する際にとても便利にタグの情報を記載する事が可能になります。 現在無料のテキストエディタでもとても便利なものが多くあります。 Atom 201...

Javascriptって何 文字や画像，ページ等に種々の自動的な「バリエーション」や「動き」が与える事ができ， 計算や情報の検索も可能な仕組みに変化させることができます。 JavaScriptは，補助...

レスポンシブコーディングの際に簡単に使えるカルーセル スライダーは今コーディングする際に必須のアイテムとなってます。レスポンシブしないとSEO的にも上がりません。 基本の使い方 slick配布元からフ...