実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]
コーディングする際に、何気なく重宝するコードがtableです。 そんなtableですが、コーディングしていると乱雑になってしまったり少し凝ったデザインにしようしても、いまいちと感じてしまうことが多々あります。 今回は、オシャレなtableが簡単に実装できるCSS3のサンプルコードをご紹介します。 コピーペーストで簡単に使えますので、ぜひホームページのデザインに取り入れてみてください。 コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。 以前のCSS1、2の場合だと背景色を変えるのは結構手間がかかっ
![意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca6debb0b5ba0d5e0ad9cd8ecd16e993b6da81a8/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F2250%2Fog_image%2Fdefault-e58901a600c33a043330366875957445.jpg)
New 3DSブラウザのゲーム開発向けJavaScript API対応具合チェック - ABAの日誌
Newニンテンドー3DS インターネットブラウザーの主な仕様を見ると HTML4.01/HTML5/XHTML1.1/Fullscreen/Gamepad/SVG/WebSocket/Video Subtitle/ WOFF/Web Messaging/Server-Sent/Web Storageの一部/XMLHttpRequest/ canvas/Video/DOM1-3/ECMAScript/CSS1/CSS2.1/CSS3 の一部 のウェブ標準に対応していると書いてある。旧3DSの仕様と比べるとだいぶリッチに見える。特にFullscreenとGamepadに対応しているならゲーム開発向けに使えるんじゃないのかね、と思って少し調べた。 Fullscreen これ本当に対応しているの？ document.documentElement.webkitRequestFullScreen()
Bootstrap File Input - © Kartik
Thankful to Krajee! BUY A COFFEEor DONATE to get more out of us. Learn We strive hard in creating high quality JQuery plugins and Bootstrap extensions for the community as free open source code, and maintaining this demonstration site. Any donation would help us maintain our resources better and help improve our plugins or create new ones. Even, if it does not fulfil our resource needs, it will st
CSS3を使ったちょっと便利なテクニックシリーズ - Qiita
CSS3プロパティを使った、便利な実装テクニックを随時追加していきます。 1. 並んでいる要素の最後だけスタイルを適用しない ★対応ブラウザ → 確認 リストなどでマージンを調整する際、通常は:last-childで最後の要素のスタイルを上書きすると思いますが、:not()を使うことでもっとスマートに記述できます。
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
Bootstrap4の主な更新点 - Qiita
こうして見てみると、一段階上のサイズが追加されたというよりも、xs と sm の間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一 コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs
Bootstrap 4 alpha
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア
【CSS】Googleが公開したUI/UXライブラリ「Material Design Lite」を試してみた | unitopi - ユニトピ -
Androidをはじめ、Googleサービスで導入されているMaterial Design（マテリアルデザイン）のUI/UXを簡単に使うことができるライブラリが公開されました。 配布元はGoogleで、Material Design Liteと呼ばれるライブラリです。 CSS font Javascript のライブラリです。 早速使い方と使用例を見て行きたいと思います。 ダウンロード Material Design Lite 上記URLからどうぞ。 DLが済んだら配置し、以下のように指定してあげます。 <link rel="stylesheet" href="./material.min.css"> <script src="./material.min.js"></script> <link rel="stylesheet" href="//fonts.googleapis.com/i
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
レンタルサーバーナレッジ
Twitter CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。 Follow @cpiadjp Tweets by cpiadjp 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jp.techcrunch.com/2015/09/02/20150901mozilla-relaunches-its-thimble-online-code-editor-for-teaching-html-css-and-javascript/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
PostCSS とは何か
https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP
CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ
