この記事について BEMを使ってコーディングしていくとき、 コンテンツ量の多いサイトになると毎回のように混乱してうわあああああああああ三(卍^o^)卍ﾄﾞｩﾙﾙﾙﾙ ってなるので 自分の頭の中をまとめる意味で簡単なワイヤーフレームを使って解説するぞ〜〜〜！！！！！！ BEMって何？って人は先にこっちを読んでな↓ [HTML/SCSS]BEM設計を図を使って解説してみる さて、今回は下のワイヤーフレームを見ながらBEMるぞ。 なんか全部について解説してたらはちゃめちゃな長さになってしまったので、2回にわけてお送りします。 今回はheaderとfooterをいざBEMる。 かかってこ〜〜〜〜い 想定としてはコーポレイトサイトっぽい感じ。 いくつかページが存在してて、ヘッダーとフッターは共通化してなって言われてるていでやってみるぞい。 headerってBlockつくるぞい ヘッダーに関してはhe

作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ

CSSで対話形式のフキダシデザイン 今日はフキダシデザインの作り方を書きます あ。前にも使っておきながら説明しなかったやつですね？ あ、覚えてたか（笑）前に記事の中で使ったことあるね。 →みんなまだ意外とやってないブログの見せ方。pinterestやinstagramを貼り付ける方法 - AIUEO Lab2 ケチだなーと思いました（笑） 今日説明するから許して…。以下がCSSとHTMLです。 スポンサーリンク CSSとHTML CSS /*============================================================ フキダシデザイン ============================================================*/ .arrow_answer, .arrow_question { position: r

ページネーションなどのlistをfloatさせた要素をセンタリングするときのメモです。 ナビゲーションやページネーションなどでliタグをfloatさせて横並びにすることがよくあると思います。 しかし、センタリングしようと思っても「margin:0 auto;」も「text-align:center;」も効きませんよね？ こんなとき、「position:relative;」を使うと上手くいくようです。 コード HTMLコード <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> </div> CSSコード div#menu { position: relative; overflow: hidden; } div#menu ul { float

ページャーなどでよく使うCSSテクニックです。 横並びしつつ、そのブロック全体は左右中央にセンター揃え。 inline要素なら簡単に中央揃えできますが、block要素の横並び中央揃えは若干面倒でして、text-align:center;は使えないし、幅が決まっていなければmargin: 0 auto;も使えません。 CMSなどでliの個数が増減するタイプは幅が可変するので面倒です。 なんかいい方法ないかなぁと探していると良記事にめぐり合えました。 positionを使う方法 floatで並べたリストのセンタリング http://hail2u.net/blog/webdesign/centering-floated-list.html ポジションを使って中央揃えにするとのこと。 引用 .centered { position: relative; overflow: hidden; } .c