Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"
TypeScriptで始めるNode.js入門 - ICS MEDIA
みなさんは普段Node.jsをどのように使っていますか？ サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。 Node.jsで大規模な開発をする場合、TypeScriptを採用して開発の生産効率性・保守性を上げるのもオススメです。WebStormやVisual Studio Codeを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。 今回はNode.jsをTypeScriptで記述する
facebook flowでHTML5 Canvasデモを作ってみた - ICS MEDIA
2014年11月にFacebookから発表された「flow」(以下「facebook flow」と記述します）ですが、皆さんは試されましたでしょうか？ facebook flowはJavaScriptの静的型付けチェックツールです。本記事では、facebook flowの採用によってWebコンテンツ制作にどのようなメリットがあるのか調べるために、インタラクションデモを作って検証しました。 ▲facebook flowの公式サイト flowで作成したコンテンツ HTML5 Canvasタグを使ったグラフィック表現で、約500行程度のJavaScript (flow code)で作成しました。タップやマウスしながら動かすと大量のパーティクルが拡散するような表現になっていますので、次をクリックしてブラウザで再生してみてください。 別ウインドウでデモを開く ▲ HTML5 Canvasで作成してい
SourceTreeの使い方 | コミットの取り消し方法まとめ（amend, reset, revert, cherry-pick） - ICS MEDIA
SourceTreeの使い方 | コミットの取り消し方法まとめ（amend, reset, revert, cherry-pick） 高機能Gitクライアントの「SourceTreeソースツリー」（無料）や「Tower」（有償）は導入しやすく機能が豊富なため人気があります。Gitにはコミットやプッシュだけではなくさまざまな機能が存在するので、使いこなすことで効率よく開発を進めていけるでしょう。本記事ではGitを使う上で必須となるcommitコミットの取り消し方法をテーマに、次の4つの機能を解説します。 コミットの修正・やり直し（amend） コミットの取り消し（reset） コミットの打ち消し（revert） 別ブランチからのコミットの取り込み（cherry-pick） 本記事では次の機能をSourceTreeとTowerの両方のソフトウェアの操作方法として解説します。 コミットの修正・や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
