CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオンラインサービスを紹介します。 こういったコード生成は探せば見つかるかもしれませんが、まとまってると便利ですね。
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
"The best driver WIKI ever! I wil keep coming back for sure."Eric Smalter, Boston, MA Our main support OS are: Windows 7, Windows 7 64 bit, Windows 7 32 bit, Windows 10, Windows 10 64 bit, Windows 10 32 bit, and Windows 8. Most Popular Drivers for 2022We have been receiving a lot of driver updates this year, and many of our users have been asking what drivers should be their top priority for insta
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
iPhoneやandroidの案件ばっかりの今日この頃。 HTML5を使用することが多くなってきましたが、文書論理構造となると少しうやむやなところがありました。 <header>や<footer>などは特に違和感なく使えますが、<section>や<article>になると少し自信がなかったりするので、改めて見直してみます。 HTML5 Element Flowchart 『HTML5 文書論理構造』で探してみると、「HTML5 Element Flowchart 」なる画像が公開されていました。これがすごくわかりやすい。 HTML5で使用するタグを、消去法でマークアップしてます。 ではさっそくスタート。 1. それは、主要なナビゲーションブロックですか? Yes <nav> で囲む グローバルナビゲーションやフッターナビゲーションなどに使用。 No 2へ 2. それは、自分自身だ
以前何かの案件でIE8での表示がIE7チックになってるって事があったので、meta要素を追加して難を逃れたわけですが、このmeta要素の記述について詳しく調べていなかったので、自分なりにまとめてみました。ちなみにその時に追記したmeta要素は以下。 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> 上記meta要素はIE8以上のブラウザの時にレンダリングモードを指定するものなんですが、他にもレンダリングモードを決定する条件があるんですが、これを書けばCSSで言う「!important」みたいな感じで確実に指定されるので他の条件は省きます(というか把握してません・・)。 レンダリングモード指定の種類 content属性の値はいくつか指定があります。 <meta http-equiv="X-UA-Compatible
結論*1 metaタグでページ毎にドキュメントモードを設定したい場合、 <meta http-equiv="X-UA-Compatible" content="IE=8" /> はheadタグの直後に書け。 The page could not be displayed - Microsoft Windows IE8 の互換表示について - Windows 開発統括部 Blog - Site Home - MSDN Blogs 事件は会議室で起きてるんじゃない、ブラウザで起きてるんだ! 先日、社内イントラネットサイトが完成したんです。 私「テストとか、よろしくお願いします!」(本当は「ご確認お願い致します」と言っています) 先輩「ちょっとちょっとぉ。なんか表が一行しかないのに縦のスクロールバーがでててウザいんだけどー。」(本当は「なんでこうなってるのかな?どう?」とかいう優しい感じでした)
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
How often do you find that images in a website load gracefully; the kind where a loading icon first appears, and the image then fades in, once loaded? This technique can greatly boost the performance of your website. If you're not already familiar with this method, you're in luck! Today, we'll create a preloader plugin for your projects. Intrigued? Let's get started! Step 1: Setting Up Your Worksp
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」! HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します! まずは王道!縦に長い高級ペライチ
「DreamweaverのためのZenCoding インストール編」の続編です。 今回はZenCodingの基本的な使い方について、色々なブログに同じ様なエントリーがた多々あるので、割愛しようとも思ったのですが、Dreamweaverユーザー向けのZenCoding解説エントリーとして外せない要素になりますので、一応書いていきたいと思います。 まず、まだZenCodingのインストールを行っていない方はこちらのエントリーをご覧ください。 DreamweaverのためのZenCoding インストール編 Zen Coding 基本的な使い方 まずは基本!コードの展開方法 色々なブログでCodaやApatanaなどのエディタで「Ctrl」+「E」でコードを展開と書かれていますが、DreamweaverでのZenCodingの展開は「Ctrl」+「,」の同時押しになります。 下記のソースを
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く