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

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

お見積もりフォーム

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

XSSの対策をひよっこエンジニアがまとめてみた

エンジニアリング部システムソリューション課のひよっこエンジニアKと申します。エンジニアになってまだ2ヶ月強の私は、課題や仕事に取り組む中でわからないことにぶち当たることが多いです。この記事では、わからないところについて調べた結果などをまとめています。今回のテーマはセキュリティ対策の中でも、XSS(クロスサイトスクリプティング)の対策についてです。 そもそも(XSS)クロスサイトスクリプテ...続きを読む

2秒で即時返信する僕は仕事が捗っている話

Webソリューション事業部システムソリューションユニットの冨士です。年明けぐらいから、密かに黙々と取り組んでいたことがあります。「即時返信」です。今では社内で一番返信が早いんじゃないかと自負しています。時には1分、時には2秒で返信を返します。加えて「即時タスク化」も「即時返信」と相性が良さそうだったので、試しに半年ぐらい「即時返信」「即時タスク化」を続けてみました。するとタスクの回りが明らかに良く...続きを読む

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.半角英数...続きを読む
1 2 3 4 10