GulpでSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと｜クロノドライブ

2017/10/12 38 users Gulp Sass Autoprefixer map 最低限

はじめに この記事はGulpを使ってSassをコンパイルしているけど、なんだかよくわかってないという人に向けた記事です。Sassをただコンパイルするだけではなく、AutoprefixerやMinify・Source mapなどあると便利だと思う必要最低限の構成の作り方とそれぞれの使い方を解説していきます。 前提 npmコマンドをなんとなく使ったことがある gulpfile.jsというものは知ってい... 続きを読む

jQueryとjQuery PluginからはじめるGulpとWebpack3の使い方｜クロノドライブ

2017/10/03 44 users Gulp jQuery Webpack こーぼ フレームワーク

はじめに この記事はWebpackという言葉を耳にしつつもWebサイトのコーディングにどう導入していけばよいかイマイチわからない・メリットを感じない人に とりあえず 馴染み深いjQueryとjQuery PluginをWebpackで扱って慣れようというものです。 背景 Vue.js・React・AngularなどのフレームワークはそのビルドにWebpackを使うことも多いのですが、一般的なコーポ... 続きを読む

RWD（レスポンシブ・ウェブ・デザイン）におけるイベント登録について｜クロノドライブ

2017/07/03 13 users RWD パソコ 古川 解像度 アコーディオンメニュー

久しぶりの更新はようやく梅雨模様になってきた仙台事務所の古川がお送りします。 今回は社内チャットワークで新人さんの質問をきっかけに話題に挙がっていた「RWDにおけるイベント登録」についてのお話しです。 はじめに RWDのページではブレークポイントごとに異なる動作をすることがあります。例えばスマートフォン向けの解像度ではコンテンツ領域が狭いため、アコーディオンメニューを使用して一覧性を良くし、パソコ... 続きを読む

jQueryを使うなら知っておきたいjQueryプラグインの作り方 | コーディングの代行・外注はクロノドライブ

2015/07/01 70 users jQuery コーディング 外注 ライブラリ 関数

現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。 そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めし... 続きを読む

今さら人に聞けない！WordPressで使われているmod_rewriteの説明書 | ノウハウコラム | HTMLコーディングのクロノドライブ

2013/12/02 107 users mod_rewrite HTMLコーディング Apache

WordPressのmod_rewriteコードを参考にmod_rewriteについてまとめてみました。 mod_rewriteとは、何かご存知でしょうか？ これは、Apacheというhttpサーバで利用されいてるモジュールと言われるもので、URLの書き換え・リダイレクト処理を行なってくれるものです。 主に「.htaccess」というファイルに任意の処理を記述して使用します。 mod_rewrit... 続きを読む

新人コーダーに知っておいて欲しいリダイレクトの基本 : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2013/10/29 952 users XHTML HTMLコーディング HTML ノウハウ 基本

サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの... 続きを読む

画像を使わない擬似フォームUIの作り方 第02回 「jQueryを使った擬似フォームUIの操作」 : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2013/01/17 46 users jQuery XHTML CSS HTMLコーディング 操作

前回はCSSを使って擬似フォームUIのデザインを整えるところまでを紹介してきましたが、今回からは擬似フォームUIの肝となる、jQueryを使ったフォーム操作の方法を紹介していきます。 STEP05 jQueryでチェックボックスのチェック状態を操作する この時点でのサンプルを表示する 擬似フォームUIでは、実際のチェックボックスは隠れた状態になるため、jQueryでチェック/未チェックの切り替えを... 続きを読む

画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」 : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2012/12/19 100 users XHTML HTMLコーディング 装飾 HTML ノウハウ

■完成イメージ ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUI... 続きを読む

高さの異なるボックス要素を揃えるテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2010/12/01 885 users XHTML HTMLコーディング HTML テクニック

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキス... 続きを読む

たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2010/11/30 174 users clearfix XHTML float overflow

.sampleBox { overflow: hidden ; } .boxLeft { float: left; width: 150px; } .boxRight { float: right; width: 150px; } サンプルページ ポイントとしては、floatする要素をdivで囲み、そのdivにoverflow: hiddenを適用させることです。たったこれだけで、floatによる... 続きを読む