タグ

Codingに関するherakuresのブックマーク (8)

  • 【企業サイト構築用】Webページコーディングガイドライン

    参考 Device Metrics レスポンシブ対応時に知っていると得する(かもしれない)知識 アニメーション指定 アニメーションがどのように動くかの指示を具体的に行ってください。よくコーダーになんとなく任せてしまうケースがありますが、仕様を明確に伝えることで、良い成果物が生まれます。 指示・指定が必要な例 メインビジュアルなどのキーとなるエリア、スライダーの動き パララックス効果を入れるか ページスクロール時 メニュー表示時 ページ遷移時 アニメーション参考 アニメーション指示を行う上で役立つ参考サイト集です。 Hover States Use Your Interface Best Animation Websites | Web Design Inspiration 開発情報の確認 今でも極稀に「PHPが動かないサーバで、納品直前までPHPで作っていた」など、「?」とリアクションして

    【企業サイト構築用】Webページコーディングガイドライン
  • コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita

    普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの1つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO

    コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
  • 不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想

    今話題(?)の CSS 設計のメモ。 この「ある程度の規模」というのは、肌感覚としてテンプレートの枚数( ≠ Webサイトのページ総数)が 20P〜50P くらいのイメージ。 また、コーディング完了後に自分以外の人間による断続的な更新が入るという前提。 そして一番重要なのは「更新する人のスキルは定義しない。」ということ。つまり HTML の知識が乏しい人が更新する可能性があることを前提とする。 きっと1ヶ月くらいすれば変わると思うけど、自分の思想のログとして残しておく。 今ぼくは以下のことに気をつけながら CSS を書いている。 コードが長くなることを気にしない セレクタが長くなることを気にしない セマンティクスの実現の難しさを理解し、妥協する 再利用性より保守性 拡張しやすい設計 最初から最適化しようとしない ゴールは目先のパフォーマンス向上ではなく誰が触っても問題が起きにくい設計 ひと

    不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想
  • FICC | デジタルエージェンシー

    LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。 消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。

    FICC | デジタルエージェンシー
  • レスポンシブWebデザインでの改行位置の変更方法 | CodePlus

    HTMLの文章中にて<br>で改行位置を指定していると、Media Query等でスタイルが切り替わった際に改行が残ってしまい、デバイスによっては見た目上いいとは言いがたい状態になってしまいます。 CSSを使用しての2つの対策方法を紹介します。 参考サイト:“Responsive Line Breaks,” an article by Dan Mall br要素にdisplay:noneを指定 まず、1つ目はbr要素にスタイルを充てる方法です。「display:none」を指定することで改行をなくします。例文では、スクリーンのwidthが480px以下になると改行がなくなるイメージです。 HTML <p>これはbr要素を使用した際の例文です。<br class="br-sp">まず一つ目の改行位置の変更方法を紹介しています。</p> CSS @media screen and (max-w

  • Brush up your Coding

    2013/10/23に開催されたHTML5BeginnersのBrush up your Codingのセッションの資料です。

    Brush up your Coding
  • コーディングが上達するコツ

    悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)

    コーディングが上達するコツ
  • コーディング規約を作ろう

    コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ

    コーディング規約を作ろう
  • 1