JavaScriptで実装！理想の「うにょうにょ動く円」を求めて… | 株式会社ニジボックス
[markdown] こんにちは、新人フロントエンドエンジニアの坂本です。 もうすぐ11月なんですね！早いですね！もう…入社から半年もたってしまいましたね.. 2回目の投稿となります今回は、最近気になってしょうがない「うにょうにょ動く円」を作って遊びたいと思います。 今回の投稿は、理想の「うにょうにょ動く円」をどうやったら作れるのかについて追究していく内容となっています。 ##うにょうにょ動く円とは イメージこんな感じですね。 このように円が何かしらの力によって揺らいだり、動いていたりする様を「うにょうにょ動く円」定義します。 きっとcanvasやSVG、webGLとかを使って再現するんだろうなと思います。 最近、写真がうにょうにょ動いていたり、ボタンがうにょうにょ動いていたりというのを見かけて、すごく気になっていました。 ##作り方 作り方はさっぱりなので、ググります。 今回、参考にさせ
【2016年版】ウェブ制作を快適にする、知っておきたい無料オンラインツール50選
2016年にリリースされた、ウェブデザインの制作時間を節約できる無料ウェブツールやアプリをまとめてご紹介します。インストールなどする必要もなく、ブックマークしておけばいざという時にも便利です。 今回は、デザインツールを以下のカテゴリーごとに分けています。お気に入りのツールを見つけてみてはいかがでしょう。 コンテンツ目次 1. Web タイポグラフィー関連ツール 2. 配色カラー関連ツール 3. Web ベース CSS 関連ツール 4. レスポンシブ・ウェブデザイン関連ツール 5. ウェブパフォーマンス関連ツール 6. オンラインチェックリスト、ガイド、参考リファレンス 7. 画像イメージ関連ツール & 編集エディター 8. ウェブデザイナー向けお役立ちディレクトリ 8. その他ツール Web タイポグラフィー関連ツール Type Anything ウェブサイトで利用したいフォントを試すこと
Family.scss
Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way. The goal of this project is to unleash the power of the nth-child property, in an easy way. The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three Each and every mixin is really easy to use, proceed li
WordPressテーマの作成方法 | kigiroku
WordPress（ワードプレス）テーマの作成方法 WordPress（ワードプレス）のテーマを作成するには、htmlとcssの他に、phpとWordPress（ワードプレス）のテンプレートタグの知識が必要になります。phpとテンプレートタグは、htmlやcssに比べると難易度が高く、コーディングが苦手なWebデザイナーとっては、壁となることがあります。Javascriptを触れる方であれば、phpやテンプレートタグの学習は難しくないでしょう。 WordPress（ワードプレス）のテーマは、一から自作しようとするとかなりの工数が掛かります。インターネット上には、たくさんのWordPress（ワードプレス）テーマが公開されていますので、それらテーマを利用し開発を進めるのが合理的でしょう。 ここでは、WordPress（ワードプレス）テーマがダウンロードできるサイトをご紹介します。 WordP
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
inline-blockの隙間をなくす方法 - Qiita
display:inline-blockで要素を並べると余計な隙間ができてしまうので、 簡単に隙間をなくす方法を紹介します。 親要素にfont-size:0;を指定する 横並びにしたい<li>タグを1行で書いたり、letter-spacingを調整したりなど、 いくつかの解決方法がありましたがこの方法が一番楽でした。 display:inline-blockの隙間問題はテキストの改行が原因で起こるので、 inline-blockを使った要素の親要素にfont-size:0;を指定すると改善されます。 <ul class="wrap"> <li class="inline-block"> テキストテキストテキストテキスト </li> <li class="inline-block"> テキストテキストテキストテキスト </li> <li class="inline-block"> テキストテ
CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法 | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
【CSS】スマホで Media Queries が効かないときの対処法 - Qiita
Media Queries とは Media Queries はCSS3から追加された機能で、レスポンシブデザインを行うのに利用されます。 レスポンシブデザインとは レスポンシブデザインとは、PCやスマホ、タブレットなどの画面サイズが異なる複数のデバイスに対して、それぞれの画面サイズに適したデザインを、それぞれ全く別のCSSファイルで書くのではなく一つのCSSファイルでまとめて行うものです。 Media Queries の使い方 Media Queries の使い方はとっても簡単です。 このブロック内にスマホのみに対応させたいCSSを書くだけでスマホの画面のスタイルを適用することができます。 ⚠️ 厳密にはスマホではなく横幅500px以下の画面に対して適用されます。PCでも、ブラウザのウィンドウ幅を500px以下にすればこのブロック内のスタイルが適用されますし、逆に500px以上の画面サイ
CSSだけで画像トリミングできたよ ｜ Tips Note by TAM
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。 CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。 やり方 HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。 例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。 CSSのトリミングは、パターンによ
知っておくと便利なcssの小技 part4
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part4をご紹介します。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 display:inline-blockで要素を並べた時に隙間を作らない 以前の記事でさらっと説明してしまったので、改めてご紹介です。 display:inline-blockで要素を横に並べると『text-align』や『vertical-align』の要素が使えて実はfloatよりも便利だなあと思っています。 が、1つ問題があってどうしても要素同士に隙間ができてしまいます。 今回はそれを解決するための、個人的に一番簡単な方法をご紹介します。 DEMO /*特に何も指定していないリスト*/ ul.incorrectList li{ display:inli
キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる | doop
Webサイトを開発させる上で、キャッシュのせいでcssやJavascriptがうまく反映されないと言う事はよくある話。 私が作っているサイトでも、サイトのレスポンス向上のためにキャッシュを利用しているが、 修正がうまく反映されず、「あれ？」と思う事がしばしば。 特に、開発環境では頻繁にファイルを更新するため、.htaccessでキャッシュを抑止しているけれど、 本番環境と開発環境で異なるファイルを管理するのも若干ストレスだったりする。 そんな訳で、回避策を検討してみた。 条件としてはこちら。 サイトはphpで開発している 対象はcssファイル、js（javascript）ファイル レスポンス向上のため、キャッシュは利用する ファイルを修正した際、ユーザにキャッシュクリアをさせなくても、修正した内容は確実に反映される 対象ファイル（この場合css、jsファイル）以外の修正は行わない では、実
404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集
作成：2016/12/26 更新：2016/12/26 Webデザイン > ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。 デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャラリーやエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 404ページとは 404ページとは、ページが存在しない旨を伝えるエラーページのことです。ステータスコード200 OKは「リソースが正常」という意味で、ページが正常に表示されていることを示し、300番台はリダイレクト、400~500番台はエラーであり、404は「リソースが存在しない、探したけ
bouncejs.com - bouncejs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
border-top, border-right, border-bottom, border-left｜プロパティ｜CSS HappyLife ZERO
トップページ プロパティ Bのプロパティ一覧 border-top, border-right, border-bottom, border-left border-top, border-right, border-bottom, border-left 最終更新：2009年11月 9日 13:34 border-top, border-right, border-bottom, border-leftプロパティは、各辺のボーダーの幅（border-width）、種類（border-style）、色（border-color）を一括で指定できるショートハンドです。 各値は、任意の順番で半角スペースなどの空白類文字で区切って書き、指定をしなかった値に関しては初期値にリセットされます。尚、種類（border-style）は省略してしまうと、初期値がnoneになっているため、ボーダーが表示され
The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSレイアウトを学ぶ
https://blog.mismithportfolio.com/web/20150320drawer
http://webnonotes.com/design/word/
#
http://crowd-logic.com/blog/archives/33427