低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

コーディングノウハウコラム

RWD(レスポンシブ・ウェブ・デザイン)で要素の表示・非表示を操作するときのNGコード

RWDってコンテンツ設計もデザインもコーディングも難しいなと常々思う今日このごろです。さて今回はそんなRWDでよくある、解像度ごとに表示するコンテンツを切り替えるときに注意したいことについてまたまた古川がお送りします。小ネタなのでサクっと2分くらいで読み終えることができますよ。NGコード[codepen_embedheight="265"theme_id="0"slug_hash="pwYxZq"...続きを読む

GulpでSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと

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

jQueryとjQuery PluginからはじめるGulpとWebpack3の使い方

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

RWD(レスポンシブ・ウェブ・デザイン)におけるイベント登録について

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

jQueryを使うなら知っておきたいjQueryプラグインの作り方

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

フロントエンドエンジニアとは?HTMLコーダーとの違いや役割

ここ数年でフロントエンドエンジニアという言葉を聞くことが多くなったと感じますが、フロントエンドエンジニアの定義は会社によって異なるものです。ただ多くの場合、「JavaScriptやHTML5/CSS3、PHPといったプログラム言語など、高度なWeb制作スキルを持った人」を指しており、それらのスキルを活かしてWebサイトを構築する仕事内容がほとんどです。(アプリ制作会社の場合アプリ開発のフロントエン...続きを読む

【比較】覚えておきたいロールオーバー画像切替え 5つの手法(CSS?JS?onmouseover?)

Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのもの...続きを読む

新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]

新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。この記事では、それぞれの命名規則やコツについてまとめたいと思います。少しでも皆様の参考となれば幸いです。共通事項ファイル名、id・class名を付ける際の注意点まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。難しいことはありません。下記に注意して名前を付けるようにましょう。1.半角英数...続きを読む

「WPAlchemy MetaBox PHP Class」を用いたカスタムフィールドの実装(1)

WPAlchemyMetaBoxPHPClassとはWordPressでカスタムフィールドを利用するときは、デフォルトのままだと使いづらいので、「CustomFieldTemplate」や「CustomFieldGUIUtility」を利用する方も多いと思います。大抵のことはこれらのプラグインで思い通りに作成することが出来ると思うのですが、カスタムフィールドの入力フォームのデザインに手を加えようと...続きを読む

CSSで三角形を作る&使用例(スマホ編)

皆さんは、CSSだけで三角形のような図形を表現出来ることを知っていますか?調べてみると、三角形の作り方を解説している記事が沢山あります。普通の三角形を作る方法は多くありますが、実際どのような場面で使うのかを解説しているものは、少ないような気がしました。そのため、私が個人的にこんな場面で使えるのでは?といったものをまとめてみましたので、ご紹介したいと思います。~この記事の対象ブラウザ~iOS5、iO...続きを読む
1 2 3 9