サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius GeneratorCSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy –CSS clip-path makerCSSのclip-pa
All Day Hey! A curated conference for developers, designers, andtechnology leaders in the heart of Leeds, UK — Checkit out I know I also have a terrible record with open source maintenance, so I thought I’d archive the original andjust post this instead. Do withit what you want! To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, tha
CSS3アニメーションに挑戦！色が移り変わる背景を実装しようフラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScript により色の移り変わりを実装しているようですが、CSS3 のキーフレームアニメーションだけでも表現できます！CSS3 キーフレームアニメーションの基本まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3 のanimation プロパティでは、キーフレームを設定して細かい動きを描画
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたいHTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 PureCSS Cinema Effe
In the realm of web design, lists are fundamental for organizing content.Bootstrap, a popular front-end framework, offers powerful tools forcreating and styling lists. In this article, we’ll dive into the world ofBootstrap list styles enhanced withCSS3. We’ll explore varioustechniques to make your lists more visually appealing and engaging. TheBootstrap List FoundationBootstrap provides a s
印刷する メールで送る テキストHTML電子書籍PDF ダウンロード テキスト電子書籍PDF クリップした記事をMyページから読むことができます 日本IBMは、モバイルアプリを起点としたビジネス戦略「IBMインタラクティブエクスペリエンス事業」を報道関係者に公開した。（1）顧客一人ひとりの体験をデザインする「体験をデザインする」、（2）顧客に体験の素晴らしさを伝える「つながる」、（3）いつでもどこでも顧客に取引を提供する「取引する」、（4）膨大なデータから新たな発見を導き出す「洞察し、発見する」――という4つのサイクルによって顧客体験を向上させ続けるプラットフォームが重要になると位置付ける。 「ペルソナ、カスタマージャーニーマップの作成は他社でも行っているところはあるが、戦略コンサルタント、人間工学の専門家、グラフィックデザイナー、数理学者といった多彩なメンバーで体験をデザインす
作成：2014/06/2 更新：2014/11/01Web制作 >WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。エンジニア速報はTwitter の@commteで配信しています。 もくじマスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
Now apply basic layout styles. Let’s give each cell 20px gaps between one another, done here with left: 10px. The effective width of each panel remains 210px. .scene { width: 210px; height: 140px; position: relative; perspective: 1000px; } .carousel { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } .carousel__cell { position: absolute; width: 190px; height: 120px; le
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
