こんにちは。もやし（@moyashi3333）です。 フリーランスとして、主にWeb制作・コーディング業をして生活しています。 コーディング中の悩み web制作のコーディングができるようになったけど、cssがごちゃごちゃしていて管理しづらい。 いつもcssの書き方・まとめ方で迷っている。 cssの上書きに !important を使いまくり、よくわからなくなっている。 上記の悩みを解決するには、CSS設計を取り入れるのがおすすめです。 本記事では、css設計の考え方をわかりやすく解説し、おすすめのcss設計である「FLOCSS」を紹介します。 css設計（FLOCSS）を導入すれば、メンテナンスしやすいcssを書くことができ、結果としてコーディングスピードも上がります。 css設計手法は、cssの書き方・管理方法におけるルールを設けること 「css設計」とは、どうすれば効率的にコーディング

吉本式BEM設計（BEM設計ベース）とは、より美しいソースコードにするためのマークアップエンジニア向けの技術コンテンツです。

Web Storageの概要 Webアプリケーション開発におけるWeb Storageの概要と活用について説明する。 今回は、概要について説明を行う。 Webアプリケーションにおけるローカルストレージの課題 Webアプリケーションを構築するにあたり、課題となる項目の一つにローカル ストレージが挙げられる。 ローカル ストレージは、アプリケーションに関連する設定や状態などの保存や取り出しを行うために使用される。 ネイティブアプリケーションであれば、プラットフォームに従い、iniファイル 、XMLファイル、レジストリ等、いろいろな手段があるが、Webアプリの場合に 用意されている選択肢は、少なく主にCookieが使用されてきた。 だが、Cookieには以下のような制限があり、使い勝手がいいとは言いがたい。 HTTPリクエストが発生する都度、Cookieも必ず一緒に送信されるので、場合によっては

アクセスしてきたユーザーの情報を保存する時によく使われるCookie（クッキー）やSession（セッション）。 ユーザーの情報を保存するにはいいんですが、サーバアクセスするたびに自動送信するのでセキュリティは低いと言えるでしょう。 また、サーバが同じコンピュータに対して発行できるCookieの数が20個となっていて、制限があると膨大なデータを扱いたい時には少々使いづらいです。 それに比べてWeb Storageは、サーバの通信が発生しません。なのでセキュリティ面でも少し安全、データ保存量もCookieよりも多いです。 でも100％安全というわけではありません。 クロスサイトスクリプティング（XSS）などの対策をしていないとデータを盗まれる可能性があるので、個人情報レベルの大事な情報はむやみにWeb Storageに保存しまくらないように。 Cookieでは、ユーザーがアクセスする度にデー

こんにちは、WEBマーケティング部の杉尾です。 今回は枠内で文章（単語）の折り返しを指定するプロパティword-wrap と word-breakの使い分けを紹介します。 文章の折り返しを指定する 文字、文章の折り返しの指定をするプロパティはword-wrap と word-breakで、それらに値もいくつかありますが、現実に使用頻度が高いのは2つだけだと思います。 それが、『word-wrap:break-word;』と『word-break:break-all;』です。 word-wrap と word-breakとは どちらもCSS3のTextモジュールに属するプロパティです。 紛らわしい２つのプロパティですが、違いはというと、 ・word-wrap …… 単語の途中で改行するかどうかを指定する ・word-break …… 行の改行方法を指定する ということです。 word-wra

HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ

JavaScriptでcookieを扱うのは、値のエンコード・デコードや書き込む際の文字列結合、値を取り出す実装など、意外に面倒です。しかし、「jquery.cookie.js」を利用すれば、cookieを簡単に扱えるようになり、シンプルなコードで実装できます。 まずはjQueryとjquery.cookie.jsを読み込みます。 ※jquery.cookie.js は GitHub（https://github.com/carhartl/jquery-cookie）からダウンロードすることができます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> ■cookieの設定 cookieを保存するには

今日は、Twitterが本格的に展開を進めている「Twitter Cards（ツイッターカード）」を表示するための、サイトの変更方法を解説します。Facebookでシェアされたときの表示を指定する「OGP」を設定しているサイトなら、10分で完了するような内容です。 2012-09-06：　申請後しばらくしたら、自分のアカウントでカードが表示されるようになり、Web担のサイトのURLでカードが表示されるようになりました。 Twitter Cards（カード）とは？Twitter Cardとは、Twitterが進めているツイート表示のリッチ化の仕組みのこと。ツイート内にURLが含まれている場合に、ツイートの詳細表示でそのページのタイトルや概要、アイコン写真などを表示するものです。 このカード表示は6月にスタートしたのですが、まだすべてのTwitterアカウントで有効になっているわけではなく、カ

メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要

HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ

こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています！ 2015年度の JavaScript 研修は、Web アプリケーションの部品（モジュール）をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS

お世話になります、フロントエンド担当をしている小原正大です。Webページの表示を監視して差異があった場合、どのページで表示の変化が起きているかを知ることが出来るプログラムを実装したのでそのことについて書こうと思います。 何につかったの？ 僕がフロントエンドを担当しているサービス『料理サプリ』で大規模なフロントエンドコードのリファクタリング行う際に表示テストを自動化するために作成しました。『料理サプリ』はPC・スマホ合わせて大体350-400ページの表示パターンが存在する比較的規模の大きいサイトです。全ページに影響を与えるような作業は大規模な回収となり、今回のリファクタリングでは表示テストの計画などの段取りが必要でした。従来の人手によるQAでは細かいバグを見過ごしたり時間がかかり効率が悪いので、可能な限り自動化しようと考え実装しました。 実装の概要 この監視のシステムは以下の２つ実装を組合わ

HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低

最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。

Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.