ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
Turret
A library of Documentation, Elements, Components, Icons, and a Grid for rapid responsive website development.Simple and Stylish Create accessible, semantic, and responsive websites easily with Turret. Turret is a front-end styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites. Responsive Turret has a simple and intuitive grid system and re
BEMが失敗しているパターンとその問題点
思いついたら足していく 名前にとらわれすぎ BAD1 「コンポーネントのエレメントのエレメントのエレメントの...」として定義している <div class="v1-news"> <div class="v1-news__header">NEWS</div> <div class="v1-news__body"> <div class="v1-news__body__item"> <div class="v1-news__body__item__date">2014/12/10</div> <div class="v1-news__body__item__text">【お知らせ】2014年12月25日（木）19：00から20：00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div> </div> <div class="v1-n
» GulpでSassのコンパイルとlivereloadをやってみる | isee ウェブに関するブログ
Gruntと同じくタスクランナーのGulp。Gruntよりもビルドファイルが読みやすく、スピードも軽快な気がします。GulpとGrunt Gruntに関しては前回の記事で(タスクランナーGrunt導入メモ)導入方法と簡単な使い方を紹介しましたが、今回はGruntと同じタスクランナーのGulpでSassのコンパイルとブラウザを自動で更新するlivereloadを使ってみたいと思います。 Gulpのいいところ Gruntと大きく違う部分は以下になります。 ・Gruntよりもビルドファイルの可読性が良く、短いコードで済む ・なるべくタスクを並列で実行しようとするので、スピードが早い Gruntもとても優秀ですが、GulpはGruntの良い部分を引き継ぎ、短所を改善したツールだそうです。そのためビルドファイルの書き方や導入方法はGruntと似ているので、Gruntを使ったことのある人は、使いや
0行から始めるクライアントサイドJavaScript入門 - Qiita
0行〜 準備すること Modernizr.js ブラウザの機能判定プラグイン。 読み込むだけでhtmlタグにブラウザの機能クラス名がつけられる。↓ <html lang="en" class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls download formdata"> クラス名の最初にno-がつくと非対応、そうでないものは対応。 no-touch: タッチイベント非対応 postmessage: postMessa
Bootstrap 3 徹底解説！
いよいよ公開されたBootstrap3。このサイトでは、Bootstrap3を徹底的に解説していきます。ついに登場した「Bootstrap 3」。このサイトでは、Bootstrap3を徹底的に解説していこうと思います。 Bootstrap 公式サイト(英語) Ver. 3.0.3 が最新版のようです(2014/01/02 現在) お問い合わせはコチラ Menu はじめに Bootstrap とは？ Bootstrap3 導入の仕方 基本のHTMLコード CSS グリッドシステム タイポグラフィ(見出し、段落、文字サイズなど) コードの表示 テーブル(表) フォーム ボタン ヘルパークラス レスポンシブWebデザインで使えるコード Components アイコン ドロップダウン Coming Soon ... About どうもこんにちは、SofPyon(そふぴょん)です。最近、Bootst
BEM とは - CHROMA
メンテナンスブルな CSS の設計の話で OOCSS や SMACSS ってのがあるけど、そのうちの一つで BEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳 を見てみると XJST とか BEMHTML とかいうテンプレートエンジンに関する内容（よくわかってない）も書かれてるんだけど、日本ではこの中の BEM を CSS 用に使いやすくした MindBEMding （日本語訳はこっち ）の命名規則が良いってことで流行ってるみたい。 また、今 BEM っていったら大体は MindBEMding のことを指してるみたい。 BEM-Methodology Definitions の内容全部をこれから理解しようとすると自分が知らない知識が多くてちょっとアレなので.. 、MindBEMding の内容を先に抑えておきたいと思
Online StyleSheet Generator | OneClickCSS
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
BEM スタートガイド ― これからのWEB フロントエンド開発に必要な方法論に触れてみる | zerokara web
今年ぐらいからか、BEM というキーワードが国内外のフロントエンドな人達の間で使われたり議論されているのをよく見かけるようになりました。 私自身も何度か調べたりbem-tools に触れてみたりとしていたのですが、最近になってようやくBEM が何なのかが少しずつ掴めてきたような気がします。 そこで今回はまず第一弾として、これまで私がBEM について調べてきたこと、実際に試してみた上で理解したこと等を分かりやすくまとめたいと思います。 BEM について聞き慣れない方、ゼロから始めてみようという方々のスタートガイドとなれば幸いです。 BEM とは？ BEM とは、WEB サイト・アプリケーション等の開発において… ・メンテナンス性の高いものを短期間で開発すること ・チームでの作業効率を上げ、メンバーの追加・変更による影響を最小限に抑えること ・UI の質を保ち、変更に労力をかけないこと な
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
Sublime Text の習得に役立つショートカットキーのチートシートを作ってみた (Mac OS X / Windows)【15日目】 | DevelopersIO
“世界的ですもんね 乗るしかない このビッグウェーブに” はじめに そんな訳で、IT業界で話題沸騰中のテキストエディタ、Sublime Text。弊社でも続々と利用者が増えている今日この頃です。 基本的にビッグウェーブに鈍感な僕らしく、先日あたりからようやく使い始めてみました。長い間eclipseを使い続けていたので、色々と戸惑う箇所も多く、まだまだSublime(卓越した)に使いこなせていませんが、徐々に慣れていけたらなと考えています。 ショートカットキーのチートシートを作ってみた 少し前に弊社のとあるスタッフから「ショートカットキーのチートシートでナウいデザインのものがあったら、超捗るぜ。」とあおられ、僕自身まだまだ不慣れなこともあって、操作の習得も兼ねて作ってみました。 Sublime Text | Periodic table of the Keyboard Shortcuts.
Webサイトで全角英数字ではなく、半角英数字を採用する理由
Webで文章を掲載する際、英数字は半角表記で統一するのが「常識」です。ですが、なぜ全角英数字はダメで半角英数字に統一するべきなのでしょう。改めて聞かれるとついつい「そういうものだから」と答えてしまいがちではないですか？ また、検索してみても、ちゃんとまとめられた記事がなかなか見つけられません。ということで、全角英数字ではなく、半角英数字を採用する理由をまとめてみました。 ※本記事は技術的な検証が十分に行われておらず、誤った情報である可能性があります。あらかじめご了承ください。 全角英数字は再利用性できません たとえば、電話番号やURLが全角で表記されていると、Office製品やメーラーでリンクとして認識されません。ブラウザのアドレスバーにコピーアンドペーストしても開けず大変不便です。 全角英数字は禁則処理が行われません ブラウザでは英単語が途中で改行されないよう折り返しが行われます（禁則処
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
❤️ Best adult photos at 03log.me
CSS設計パターンに BEM を取り入れてみる | SK2 +620 DESIGNING
AGENTOTO88 🎱 Link Situs Toto #1 Agen Toto Togel Online Terpercaya
BEM Advent Calendar 2013 - Adventar
CodePen - Front End Developer Playground & Code Editor in the Browser
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier
Sublime Text | Periodic table of the Keyboard Shortcuts.
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか