(Wikipediaより) ハンガリアン記法のメリット 論理型であるbFlagと、文字列型であるsNameが bFlag + sName となっていれば誤りであることがわかる。 型の記述が2文字程度で済むので、変数名が短く済む。 ハンガリアン記法のデメリット 暗黙の型変換ができない。変数の型を変更するごとに変数名まで変更しなくてはならず、命名法に添って名前を付けるのが面倒。 (同じユーザーIDでも使い方によってはsUserid、iUseridなど) キャメル記法 文字のラインが凸凹になる様をラクダのこぶになぞらえてキャメル記法と名付けられた。 大文字小文字を区別する言語と区別しない言語があるので使う場合は全体を統一すること。 先頭の文字を大文字にするか小文字にするかで2つのパターンがある。 アッパーキャメルケースまたはパスカルケース(1単語目から大文字) 悪い例 $userparamete
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass(scss記法)を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開(2016年1月14日に改定)されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
WEBディレクターにおすすめするWEBサイト11選!日々の情報収集に役立つサイトを集めました。WEBディレクターや制作に関わる方は是非参考にしてみてください。マークアップからWebディレクターへジョブチェンジをしたばかりの身ですが、正直、圧倒的な知識不足を感じています。 そんな私ですが、日々勉強のためお世話になっているサイトをいくつか集めてみました。同じような立場の方やこれからWebディレクターを目指している方にも是非使っていただきたいです。 |企画・ディレクション 1.Webディレクターズマニュアル http://web-d.navigater.info/ ∟現役のWebディレクターが、必要な知識や技術など幅広く紹介してくれているサイトです。作業効率化のためのテクニックや「Webディレクター」に必要な考え方なども載っているのでよく参考にしています。 |UI・デザイン 2.I-O-30
新デザイン ・ 北欧風 ブルーグリーンのかわいいカレンダー A4サイズ(1ヶ月ごと)、祝日・六曜入り、日曜始まり・月曜始まり 予定を書き込みやすいように、マス目を大きめにしています。 ※ うまく印刷できない時 お使いのブラウザが、グーグルクロームの場合、用紙サイズ通りに正しく印刷されない不具合が出ることがあります。 その際はお手数ですが、インターネットエクスプローラーなど別のブラウザで表示して印刷してください。 2016年 カレンダー
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
particles.js is a lightweight JavaScript library for creating particles.
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ
Website color schemes: The palettes of 50 visually impactful websites to inspire you Did you know that Facebook is blue because Mark Zuckerberg is red-green color blind? “Blue is the richest color for me; I can see all of blue” says Zuckerberg. While this choice of color doesn’t seem very scientific, it still proves that a lot of thought is put into the choice of color. As Buffer writes, over 90%
◆Width $(window).width(); = px window.innerWidth; = px window.matchMedia; = ◆Height $(window).height(); = px window.innerHeight; = px window.matchMedia; =
Mac OSでファイルやフォルダ、アプリケーションのエイリアス(ショートカット)を作成できる方法を10個ほど、思いつく限り紹介してみます。 アプリやファイル、フォルダ共通のエイリアス作成方法 エイリアスとは、Windowsで言えばショートカットのようなもので、ダブルクリックをすると結びついている本体を開くことができます。 まず、アプリケーションやファイル、フォルダ共通に使用できるエイリアス作成方法を紹介します。 メニューバーの「ファイル」より「エイリアスを作成」 アプリケーションやファイル、フォルダを選択して、メニューバーの「ファイル」メニューより「エイリアスを作成」を実行するとエイリアスを作成することができます。 キーボードショートカットよりエイリアスを作成 アプリケーションやファイル、フォルダを選択して、「Command」+「L」を押すとエイリアスを作成することができます。 ちなみに、
この記事は、Mountain Lion に最初から入っている Apache と OpenSSL を使って SSL(https) 通信する環境を整えたときのメモです。ブラウザから https://localhost にアクセスして、「It Works!」のページを表示するまでを紹介します。 動作確認環境 OS X Mountain Lion 目次 サーバ秘密鍵を作成する 証明書署名要求(CSR)を作成する 自己署名証明書(CRT)を作成する 秘密鍵と証明書を Apache から参照できる場所に設置 Apache が SSL 設定ファイルを読み込めるようにする Apache を再起動して動作確認 サーバ秘密鍵を作成する 乱数ファイルを MD5 で作成します。この後、サーバ秘密鍵を作る時に使います。 $ openssl dgst -md5 /var/log/system.log > rand.d
「どうやってコーディングをして組み立てていこうか?」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub(個人のアカウント)を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く