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

Css適用編 前回作成した、「初めてのコーディング実践編」で作成したHTMLデータを元にCSSを適用していきます!! 前回のデザイン内容 下記の画像の内容を元にCssを調整していきます!! サンプル画...

初めてのコーディング実践編 初めて1からコーディングをする時の手順を公開します!! 今回のコーディング内容 下記の画像の内容をコーディングしていきます。 サンプル画像 samole02 HTMLを作成...

初めてのコーディング 初めて1からコーディングをする時によく使うCssの記述を紹介します。 whidth 「whidth」とは要素の横幅を設定するCss [crayon-5c18cefe8210576...

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

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

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

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-5c18cefe...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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