You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Night sky with twinkling stars Have you noticed the beauty of the night sky? When lightly visible clouds slowly floating through the sky, and the stars twinkling behind them in the night sky. I think it’s a great show, so I decided to implement it by means of the Web technologies, without using javascript, all in pure CSS3. This article is intended more for beginners, but will also be useful for s
Background This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained. General General Style Rules Protocol Use HTTPS for embe
デザイナーの西田です。 弊社では目的に応じて、複数のデザインツールを使い分けてUIデザインを作成しています。 昔は各々好きなデザインツールを使っていたのですが、事業がどんどん拡大し、メンバーが増えていくと、チームで統一されたワークフローがないと回らない状況になっていきました。各ツールの長所&短所を何度も議論した結果、現在はSketch + InVision + Zeplin + Abstractの組み合わせで進めています(2018年9月時点) 今回の記事では、現状のデザインツール&フローに至った経緯を紹介していきます。 目次 1. プロダクト&チーム プロダクト チーム 2. ワイヤーフレーム:自由 3. モックアップ:Sketch vs AdobeXD vs Photoshop Zeplin連携 Sketch Librariesによるコンポーネント化 4. プロトタイプ:InVision
ハイブリッドとモバイルWebアプリ開発の決定版 開発環境のセットアップを一切することなく、JavaScript・HTML・CSSを用いたモバイルアプリ開発を始めましょう。クラウド上の開発環境Monacaと組み合わせることで、あなたの開発環境は常に最新の状態に保たれます。 クラウド上にすべてのツールを 強力なCLI(コマンドラインツール)やデスクトップ向けアプリ(WindowsとmacOSに対応)を通じて、Onsen UIアプリはとても簡単に制作できます。それ以外にも、Monacaが提供するライブリロード対応のデバッガーや、リモートビルド機能といったクラウドの機能にアクセスできます。 美しいUIコンポーネントと自動スタイル モバイルアプリに特化した、ネイティブのようなパフォーマンスに優れたUIコンポーネントが自慢です。タブ、サイドメニュー、ナビゲーションといった共通デザインだけでなく、リスト
Microsoftが「Sketch 2 Code」を公開!AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい!! 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub( https://github.com/Microsoft/ailab/tree/master/Sketch2Code )で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像(手書きワイヤーフレ
ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 まずはhtml 一般的な入れ子構造のリストです。 <header> <ul> <li><a href="">menu01</a> <ul> <li><a href="">menu01-01</a></li> <li><a href="">menu01-02</a></li> <li><a href="">menu01-03</a></li> <li><a href="">menu01-04</a></li> <li><a href="">menu01-05</a></li> </ul> </li> <li><a href="">menu02</a> <ul> <li><a href="">menu02-01</a></li> <li><a href="">me
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、「カスタマイズやメンテナンスが容易」「レスポンシブWebデザインとも相性が良い」「画像を読み込まないのでモバイルユーザーにも優しい」「Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次: 共通HTML&CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン(大) シンプルな太い矢印アイコン シンプルな太い矢印アイコン(大) 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン(大) 右下向きの矢印アイコン 右下向きの矢印アイコン
はじめに 本記事ではCSSのみを使って三角や矢印を作る方法をご紹介します。 すでに三角や矢印を作れる方でも、「実際にはコードの中身の仕組みがよくわかっていないんだよね〜」という方もいらっしゃるんではないでしょうか? 今回はそんな方に向けて細かい解説を交えながらご紹介します! 三角の作り方 こちらは実際にCSSで作成した三角です。 HTMLコード: <div class="triangle"> </div> <div class="triangle1"> </div> <div class="triangle2"> </div> <div class="triangle3"> </div> CSSコード: .triangle{ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid
プロジェクト推進室の服部 (@yhatt) です。現在は社内の福利厚生制度である Speee Library を筆頭とした社内システムを中心に担当しています。 今回は、遡ること 2 年前に公開した、今更聞けない Bootstrap のレスポンシブ の続編として、Bootstrap 4 正式対応版 に内容をアップデートしてお届けします。 『Bootstrap 4 を使って、"柔軟な" レスポンシブ Web を構築したい』という方は、是非この記事を読んで、Bootstrap 4 のレイアウトシステムの基本をおさえていただけると幸いです。また、『Bootstrap 3 から 4 に移行したい(移行した)』という方のために、v3 と v4 の違いを交えながら解説していきたいと思います。 前回の記事については、以下をご覧ください。 tech.speee.jp 以前公開していた記事は、Bootstra
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性!美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる!すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
村上福之です。ウェブ業界のはやりは普通の人にはクズだと思うことが、ここ数日ありました。 レスポンシブはクズ ヤフーも食べログもクックパッドも東洋経済もレスポンシブでないことが全てを物語っている。レスポンシブはWeb業界寄りな人には結構普通でした。なにより工数が大幅に削減できます。ぼくも今まで、結構普通だと思ってましたが、サイトの種類によっては普通の人には使いにくいようです。普通に何も考えずにレスポンシブにすると、やはりなんだか使いにくいし、デザインもよくないです。PCとスマホで同じ情報を掲載すると、スマホが縦長くなるか、PCがさみしくなるかどっちかです。ファーストビューもよくない。縦長になりやすい。レスポンシブよくない。まぁ、ペライチサイトとか、バイラルサイトなどはそれでもいいと思います。 とりあえず、ヤフーとか食べログとかクックパッドとか東洋経済っぽいのが大事だと思いました。最近。だって
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く