Category: コーディング

jQuery画像の周りが動く

Posted on Tuesday May 15th, 2018Thursday May 17th, 2018 by 小清水和真

jQueryで画像を動かす「jquery」でおしゃれな画像の見せ方にしたい!! 寒川神社を目標にまずは簡単にできる部分から設定していきます。「jquery.min.js」をダウンロード致します。ダウンロード先 cssを記載下記のソースを追加してください。 * { padding: 0; margin: 0; } body { font-size: 13px; line-height: 1.4;

jQuery背景で雲が動く

Posted on Tuesday May 15th, 2018Tuesday February 5th, 2019 by 小清水和真

jQueryでおしゃれな背景アニメーションを使いたい「jquery」でおしゃれな背景が動くエフェクトを作りたい!! 寒川神社を目標にまずは簡単にできる部分から設定していきます。「jquery.min.js」をダウンロード致します。ダウンロード先 cssを記載下記のソースを追加してください。 * { padding: 0; margin: 0; } body { font-size: 13px; line-height: 1.4;

.htaccessMac で編集する方法

Posted on Monday May 14th, 2018Tuesday May 15th, 2018 by 小清水和真

Macで.htaccess編集 Macでリダイレクトの設定など「.htaccess」に記載したい場合編集できなかったらいするので記載いたします。ターミナルを開きます defaults write com.apple.finder AppleShowAllFiles true killall Finder でエンター押してもらうと「.htaccess」のファイルが表示されます。修正したい内容を記載で登録完了です。元に戻す defaults write com.apple.finder AppleShowAllFiles false killall Finder

Gitのコマンド

Posted on Sunday May 6th, 2018Sunday May 20th, 2018 by 小清水和真

Gitの色々なコマンド Gitのコマンドを忘れてしまった場合の参考になればと思い記載しております。ローカルの以前のデータを戻したい場合特定のファイルではなく、全て元に戻したい場合 $　git checkout . 前回のコミットと比較したい場合前回の「コミット」と比較してどの「ファイル」が変更されたかを表示するためのコマンド $ git status GitHubからデータをダウンロードダウンロードしたい場所へ移動して頂き。 $ git clone リモートリポジトリのURLを入れる Gitでログファイルを見る方法今までのログの内容が表示されます。

フォントサイズの指定方法

Posted on Sunday May 6th, 2018Tuesday May 8th, 2018 by 小清水和真

フォントの初期設定フォントサイズをbodyで初期設定10pxに変換。 body { font-size:62.5%; } /* 10px */ 100%は通常16pxがデフォルト設定。フォントの計算を楽にするデフォルトのフォントサイズを、10pxに変更したので、「1rem=10px / 1em=10px」となります。「1.6rem=16px / 1.6em=16px」と小数点以降でフォントの数値を判断できるため!! Favorite

Gitの使い方

Posted on Sunday May 6th, 2018Tuesday May 8th, 2018 by 小清水和真

Gitの仕組み？ Gitは、共有リポジトリを使い作業を行います。共有リポジトリとは、「複数人で共有しているフォルダ」の事を指します。「リポジトリ」とは、ファイル(複数のプロジェクトフォルダ)のデータが入っている「大元のフォルダ」だと思ってください。ワーキングツリー「ワーキングツリー」とは、ローカルで作業しているフォルダの事を指します。インデックス「インデックス」とは、「ローカルリポジトリ」に変更ファイルを上げる(コミットする)前に変更したデータを一時てきにまとめておく場所の事を指します。ローカルリポジトリ「ローカルリポジトリ」とは、「ファイル」や「ディレクトリ」の内容の変更履歴として格納されている場所。「ファイル」や「ディレクトリ」の変更履歴を記録することができる場所です。自分のパソコン上に配置するのが、「ローカルリポジトリ」です。リモートリポジトリ「リモートリポジトリ」とは、「ファイル」や「ディレクトリ」の内容の変更履歴として格納されている場所。「ファイル」や「ディレクトリ」の変更履歴を記録することができる場所です。専用のサーバなどに配置するのが、「リモートリポジトリ」です。実際にGitを使ってみようそれではGitを使って作業してみましょう!! 今回は「Git

.htaccessでクローラー拒否

Posted on Sunday May 6th, 2018Tuesday May 8th, 2018 by 小清水和真

.htaccessでフォルダ内のクロールを拒否テストサイトをサーバーにアップして作業している際に、検索に引っかかったり、オフィシャルのサイトに影響してしまったりするので、クロール拒否をしたい際に、ヘッダーに記述を入れたりしたりして、消すのを忘れてた….. って結構問題になりますので、「.htaccess」で一括管理すると楽です。テストフォルダにアップロード「.htaccess」を作成致します。そしてその中に下記の記述を記載致します。 SetEnvIf User-Agent “Googlebot” shutout SetEnvIf User-Agent “Slurp” shutout SetEnvIf User-Agent “msnbot” shutout order

GitとGithubとは？

Posted on Saturday May 5th, 2018Sunday May 6th, 2018 by 小清水和真

gitとは？ Gitは、ファイルの更新履歴を保存しておくことができるツールです。そのため、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることができます。また、古いファイルを元に編集したファイルで、他人の編集した最新ファイルを上書きしようとすると、サーバにアップロードした時に警告が出ます。そのため、知らず知らずのうちに他人の編集内容を上書きしてしまうといった失敗は起こりません。 Githubとは？「共有ウェブサービス」であり、Gitでバージョン管理した情報を上げる提供サービスです。登録が必要です。無料プランの場合は、原則全て公開されます。有料版の場合は、非公開にすることが可能です。 Github登録はこちらから「https://github.co.jp/」 Git系サービス一覧 GitHubが一番有名ですが、「Git=GitHub」ではなく、「GitHub」は、「Git」を使って、使用できるサービスです。 BitBucket Webサービス型「BitBucket」詳細はこちらhttps://bitbucket.org/ 「BitBucket」は、無料登録で「プライベートリポジトリ」を作成する事が可能です。またリポジトリの数も無制限で作成できます。しかし、無料の場合は、ユーザー権限が、「5名」までしか、「コミット権」がないです。

jQueryタブメニュー

Posted on Tuesday April 24th, 2018Tuesday May 1st, 2018 by 小清水和真

タブメニュー作成方法「jquery.min.js」をダウンロード致します。ダウンロード先 jQueryタブメニュー下記のソースを追加してください。 body{ font-family: Arial, sans-serif; -webkit-font-smoothing: antialiased; background:#E46E6E; } ul li { float: left; list-style-type: none;

jQueryアコーディオン

Posted on Tuesday April 24th, 2018Tuesday April 24th, 2018 by 小清水和真

アコーディオン作成方法「jquery.min.js」をダウンロード致します。ダウンロード先 jQueryアコーディオン下記のソースを追加してください。 #sample { width: 500px; } #sample > dt { border-bottom: solid 1px white; background-color: #00BCD4;

Bootstrapの使い方

Posted on Thursday April 19th, 2018Saturday April 28th, 2018 by 小清水和真

ブレイクポイントスマホ:767px以下タブレット:768px〜991px PC:992px〜1119px PC大画面:1200px以上クラスの設定スマホ:.col-xs-1(カラム数) タブレット:.col-sm-1(カラム数) PC:.col-md-1(カラム数) PC大画面:.col-lg-1(カラム数) 表示幅スマホ:自動タブレット:750px PC:970px PC大画面: 1170px 設定方法「container」で枠を決めていき、「row」で行を設定 .col-sm-3 .col-xs-6

Atomのショートカットキー

Posted on Sunday April 15th, 2018 by 小清水和真

Atomのショートカットキー一覧 Atomでコーディングする時の効率化できるようにショートカットキー掲載しました Mac Command + クリックマルチカーソルの追加 Command + ] / [ 選択行のインデント追加／削除 Command + / 行をコメントアウト Command + Shift

正直しんどいコーディングを快適に〈フレームワーク〉

Posted on Monday March 26th, 2018Monday August 27th, 2018 by 小清水和真

CSSフレームワーク Bootstrapや、Foundation/Pure/など色々な「フレームワーク」が配布されています。 CSSフレームワークは、コーディングの際に、簡略化するという「フレームワーク」です。 CSSフレームワークは、ビジュアルに関する事前定義が指定されています。グリッドいくつかボックスのパターンが定義されています。ボタン専用のフレームワーク cssで作成されたボタンのパターンが多くあり、フリーでダウンロードできます!! Buttons サイト詳細はこちらから「http://unicorn-ui.com/buttons/builder/」フレームークの紹介では実際に配布されている「フレームワーク」のご紹介をしていきます!! Bootstrap 「BootstrapはレスポンシブかつモバイルファーストなWebプロジェクトのための、一番人気のHTML、CSS、JavaScriptフレームワークです」 Bootstrapサイト詳細はこちらから「https://getbootstrap.com/」開発者：Mark Otto、Jacob Thornton リリース：2011年

cssでリンクカラーを変更する方法

Posted on Thursday March 22nd, 2018Friday April 13th, 2018 by 小清水和真

CSSでリンクのカラー設定リンクのカラー設定について記載いたします。基本的な設定 a{/*リンクされた文字*/ color:#000; text-decoration:none; } a:link {/*未訪問のリンク*/ color:#000; text-decoration:none; } a:visited {/*訪問後のリンク*/ color:#000; text-decoration:none; } a:hover {/*マウスをのせたとき*/ color:#ff0000;

CSS3「transform」のまとめ

Posted on Sunday January 21st, 2018Tuesday March 13th, 2018 by 小清水和真

CSS3のtransformでテキストや画像を動かします!! ベンダープレフィックスは省略しています。要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); #txt01 { animation: animation01 2s infinite ease 1s both; } @keyframes

Atomテキストエディタ日本語化

Posted on Saturday January 20th, 2018Thursday March 22nd, 2018 by 小清水和真

Atomを使いやすくカスタマイズ使いやすいテキストエディタの拡張機能を紹介致します!! メニューバーにあるHelp→WelComeGuideをクリック「Install a Package」をクリック「Open Installer」をクリック左側の上の方にフォーム左側の上の方にフォームがあるのでそこに「japanese」と入力し、「Packages」をクリックします。パッケージが表示パッケージが表示されるので、「japanese-menu」の「Install」をクリック Favorite

list-style-typeのサンプル

Posted on Sunday January 7th, 2018Thursday April 19th, 2018 by 小清水和真

list-style list-styleで数字や、ドットはどれだっけ？てなりますので備忘録として記載いたします。黒丸 li.hoge{ list-style-type: disc; } サンプルサンプルサンプル白丸 li.hoge{ list-style-type: circle; } サンプルサンプルサンプル黒四角 li.hoge{

アイコン（ファビコン）を指定してブラウザのアドレスバーなどに表示させる方法

Posted on Wednesday December 20th, 2017Sunday February 24th, 2019 by マカデミア納豆

はじめに自分のサイトにアイコンを表示させたいと思ったことはありませんか？実はあのブラウザのアドレスバーなどに小さく表示されるアイコンのことをファビコン（Favicon）といいます。今回はファビコンをHTMLで指定して自身のサイトのブラウザのアドレスバーなどに表示させる方法をご紹介いたします。設定方法記述はたった一文で簡単です。 headタグ内に <link rel=”icon” type=”image/vnd.microsoft.icon” href=”自身が作成したアイコンのURL”> link要素で指定するだけでいいのです。 typeには.ico形式であるimage/vnd.microsoft.iconの他に、 .gif形式であるimage/gif、.png形式であるimage/pngを使用することができます。ファビコンで使用する画像は、.ico形式で作成するのが一般的ですが、近年では.gif形式、.png形式に対応したブラウザも増えてきているようです。

jQueryもっと見るボタンを追加方法

Posted on Wednesday December 13th, 2017Monday August 27th, 2018 by 小清水和真

CSS3からの変更点「jquery.min.js」をダウンロード致します。ダウンロード先 cssを記載下記のソースを追加してください。 .js-load { display: none } .js-load.active { display: block } .is_comp.js-load:after { display: none }

オススメテキストエディタ

Posted on Sunday December 10th, 2017Saturday January 20th, 2018 by 小清水和真

テキストエディタテキストエディタを使えば、HTMLを作成する際にとても便利にタグの情報を記載する事が可能になります。現在無料のテキストエディタでもとても便利なものが多くあります。 Atom 2015年に登場した比較的新しいエディタ!! 作業を効率化するために、Web開発者が作ったエディター!! 様々な機能を網羅しているので、優れてます!! Atomダウンロードサクラエディタ Windowsのパソコンを使用している人はインストール可能です。色々と改善、改良が加えられているため使いやすいソフトとなっています。サクラエディタダウンロード mi とてもシンプルな見た目で、Mac ユーザーに長いあいだ使用されております。動作も軽く、C言語やHTMLにも対応しています。 miダウンロード Favorite

Javascript・Jqueryに挑戦してみよう

Posted on Friday December 8th, 2017Friday December 8th, 2017 by 小清水和真

Javascriptって何文字や画像，ページ等に種々の自動的な「バリエーション」や「動き」が与える事ができ，計算や情報の検索も可能な仕組みに変化させることができます。 JavaScriptは，補助言語で，文字や画像，ページ等を動かす仕掛けを作るものです。 HTML＆JavaScriptで書かれたページは，ほとんどの場合， Windowsパソコン備え付けのソフトInternet Explorer上で動かすことができるので，改めて特別のソフトを求めなくても，これを実行することができます。ＪＡＶＡとＪａｖａＳｃｒｉｐｔは全く違うモノ JavaとJavaScriptはどれだけ違うか？ JavaとJavaScriptはまったく違うプログラミング言語です。似ているのは名前だけなので、インドとインドネシアくらい違う中国と中国地方くらい違うココナッツとナッツくらい違うメロンとメロンパンくらい違うってくらい名前が似ているだけなのです。下記を参考に https://eng-entrance.com/java-javascript#JavaJavaScript

カルーセルスライダーslick

Posted on Sunday November 19th, 2017Sunday November 26th, 2017 by 小清水和真

レスポンシブコーディングの際に簡単に使えるカルーセルスライダーは今コーディングする際に必須のアイテムとなってます。レスポンシブしないとSEO的にも上がりません。基本の使い方 slick配布元からファイルをダウンロードし、コーディングしているフォルダへ組み込みます。コーディングの際に使用するのは、ダウンロードしたファイルの中に入ってる以下のファイルです。ダウンロード後、ヘッダー部分に下記のソースを入れ込みます。表示させたい部分に下記のHTMLを記載いたします。共通に使えるCSS /*左右の矢印の色を変える*/ .slick-prev:before, .slick-next:before { color: #000; } /*左右の矢印の位置を変える*/ .slick-next { right: 20px;

CSS3とは

Posted on Thursday November 16th, 2017 by 小清水和真

CSS (Cascading Style Sheets)とは CSS とは、ホームページの見た目や構造などのスタイルを構築するための言語です。 HTML やXHTMLでWebサイト内の各要素の意味や情報の構造を定義し、 CSS で色や文字サイズなどでそれらを装飾することで、普段目にするホームページがブラウザ上で表示されます。 CSS のバージョン CSS には、 CSS 1、 CSS 2、 CSS

css3 Flexboxの使い方

Posted on Thursday November 16th, 2017Tuesday December 12th, 2017 by 小清水和真

Flexboxの使い方まとめですレスポンシブのコーディングをする際に参考になるように記事書きます!! 基本の使い方クラスに、【display: flex;】を追加します。 .sample{ display: flex; } サンプル BOX01 BOX02 BOX03 flex-directionの設定方法基本的な使い方の、【display: flex;】の指定に対して、並び方の指定を【flex-direction:任意の指定;】で指定します。 row(初期設定横並びになります) row-reverse(右から) column(縦並び)

Youtube動画Z-indexの対処法

Posted on Thursday November 2nd, 2017Thursday November 2nd, 2017 by 小清水和真

ユーチューブ動画にZ-indexを当てるユーチューブをサイトに埋め込んでZ-indexが効かないときがありませんか？そんな時には下記の対処法が必要となります。動画の上に載せたい要素に、position ユーチューブの上に載せたい要素に、「position: relative;」を入れるだけで問題解決です。色々試しても無理だった方一度お試しあれ!! position: relative; Favorite

CSS3に変わってできるようになった事

Posted on Tuesday October 24th, 2017Thursday November 16th, 2017 by 小清水和真

CSS3からの変更点 CSS3に変わってから、色々な表現を手軽にcssで実装できるようになりました。 CSS3の前から画像などで実装していた部分もcssのみで実装可能になりました。またどのような機能が追加されたかを紹介させて頂きます。基本の使い方クラスに、【display: flex;】を追加します。 .sample{ display: flex; } サンプル BOX01 box sizing .boxsizing { width: 100%; padding:

HTML4とHTML5の違い

Posted on Sunday October 22nd, 2017Wednesday November 1st, 2017 by 小清水和真

HTML5からの変更点新しい要素や属性の追加 HTML4以前では使えた要素や属性の廃止マークアップにより明確に文書構造を構成フォームの入力補助やチェック機能などが充実動画や音声データをHTMLでシンプルに扱える HTML5で廃止された要素マークアップにより明確に文書構造を構成今までは適切な要素(マークアップ)が無い時には、でくくってしまう事が多かったです。 HTML5になり、文書構造を表す新しい要素(マークアップ)が加わった事で、明確に文書構造を書く事ができ、「ブラウザ」や「検索エンジン」に対してどのような文章なのかが、伝えられるようになりました。例をあげますと、ヘッダー(header)、フッター(footer)、一つのセクションを示す(section)、記事を示す(article)、ナビゲーションを示す(nav)などの要素が追加され、役割に応じてそれぞれ適切な要素(マークアップ)を割り当てる事ができます。フォームの入力補助やチェック機能などが充実フォーム関連の新しい属性が多数追加され、「入力補助」や「入力チェック」などの機能が充実しました。 JavaScriptで作成したいた内容が、

共通部分をPHPにて切り分け

Posted on Tuesday October 3rd, 2017Thursday October 5th, 2017 by 小清水和真

PHPにて切り分け現在WordPressが主流となっていますが、静的HTMLのコーディングもお願いされる事があると思います。そんな時に共通部分はまとめて変更や修正を行いたいですよね!!1そんな時に便利なPHPがございます。切り分け用サンプルソース PHPにて切り分けサンプルサイトヘッダーナビゲーション1 ナビゲーション2 ナビゲーション3 ナビゲーション4 ナビゲーション5 ナビゲーション6 サイドナビ左側メインコンテンツテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストサイドナビ右側 Copyright ©　フッター DEMO 読み込みタグ includeによるファイルの読み込み

カテゴリー