【CSS】あっという間に悩み解決！新常識な最新テクニック24選
この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。 コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。 ただし、実験段階のプロトタイプも含まれているので、一部ブラウザでは非表示のケースもあります。実装するときは、対応ブラウザの確認を行いましょう。 前回までのお役立ちCSSテクニック集がこちら、少しずつ増えてます。 よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 コンテンツ目次 1. background-imageによる実用アニメーションサンプル集 2. 無限
Facebook, Twitter, Instagram, TikTokなど、各ソーシャルメディアで最適な画像・動画サイズのまとめ -SocialSizes
Facebook, Twitter, LinkedIn, Instagram, Pinterest, TikTok, YouTube, AppStoreなど、各ソーシャルメディアで最適な画像のサイズ、最低限必要なサイズ、動画の長さなどをまとめてダウンロードできるSocialSizesを紹介します。 Adobe XD, Figma, Sketch, Photoshop用のファイルが用意されており、個別でも一括まとめてダウンロードもできるので非常に便利です。 SocialSizesでサポートされているソーシャルメディア Facebook Instagram LinkedIn Twitter Snapchat YouTube Pinterest Twitch Whatsapp AppStore TikTok ProductHunt Vk PlayStore 各ソーシャルメディアで最適な画像・動画
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」
Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーンは個人的に思いつきませんがなんとなくよく見かける気はしますね。 需要はさておき、clip-pathがわけあって使えない！主にIEが！って場合は代替となるか分かりませんがtransformでも一応可能です。 雑なサンプルで済みませんがclip-pathではなくtransformを使った実装例です。単純に親要素を斜めにして子だけ元の角度に戻してるだけです。親要素はpositionプロパティで位置調整しています。 clip-pathの方が当然応用しやすいので代替とは言えない方法ですが一応。 Angled edgesのライセンスはMITとなっています。 Angled edges
2018年流行カラー決定！すみれ色「Ultra Violet ウルトラ・バイオレット」を使った参考カラーパレット
色見本帳の作成で、世界的に知られているパントン（PANTONE）社が、2018年の流行カラー、すみれ色「ウルトラ・バイオレット」（Ultra Violet 18-3838）を発表しました。 2018年の流行カラーは、独創的で想像力豊かで、未来への道を切り開くカラーリングが特徴となっています。 PANTONE今年の色をまとめたカラー見本帳 2000〜2017年（CMYK・RBG・HEXコード収録） 2018年の流行カラー、すみれ色「Ultra Violet ウルトラ・バイオレット」 2018年の流行カラーに選ばれた「ウルトラ・バイオレット」は、日本でいうスミレ色で、ドラマチックでじっくり考えぬいた紫色の色合いで、独創性や創意工夫、先見性を伝えることができるカラーリングです。 これまでにも紫色は、芸術的な輝くを象徴するカラーリングとして、デヴィッド・ボウイやジミ・ヘンドリックスなどの音楽アーテ
背景画像を画面いっぱいにしてスライドショー化する
Result jQuery(function($) { $.fn.fullClip = function(options) { //デフォルト設定 var settings = $.extend({ current: 0, images: [], transitionTime: 1000, wait: 3000, static: false }, options); // 画像プリロード var i, end; for (i = 0, end = settings.images.length; i < end; ++i) { new Image().src = settings.images[i]; } // 背景指定するCSS $('.fullBackground') .css('background-image', 'url(' + settings.images[settings.c
WordPressのファイルアップロードでファイル名をリネームする方法
WordPressのファイルアップロードでファイル名をリネームする方法を紹介します。 １．問題点 WordPressのファイルをまとめてアップロードしたいのですが、ファイル名をアップロード時のタイムスタンプに統一したいと思ってます。 ということで、ファイルアップロードでファイル名をリネームする方法を紹介します。 参考までに、WordPressのアップロード先は、 wp-content/uploads/YYYY/MM です。 ２．ファイルアップロードでファイル名をリネームする ファイル名をリネームするには、function.phpに下記のコードを追加します。 function rename_file($filename) { $pathinfo = pathinfo($filename); return date("YmdHis") . "." . $pathinfo['extension'
画像のURLから、その画像のIDを取得する
画像のURLからその画像のアタッチメントIDを取得するコード。カスタムフィールドに格納した、どこにも紐付いてない画像の他のサイズのパスを取得する際にどうしても必要になった時に探してもなかなか方法が見つかりませんでしたので同じ内容で困ってる方用に。
イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ
ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。 今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ 垂直型イメージスライダー くるりと回転したり、スクリーン
アイコンのデザインって奥深い！最近のアイコンに使われている、シンプルなすごいデザインテクニック
アイコンは、非常に奥深いデザインです。 サイトやアプリのさまざまなアクションを示すためのビジュアルキューであり、プロダクトやサービスに固有のアイデンティティーを与えることができます。 無料のアイコンは確かに便利です。しかしあなた以外もダウンロードして、そのアイコンを利用しています。アイコンのデザインに少し手を加えて、視覚的な深みを与え、アイコンにオリジナリティをだすデザインのチュートリアルを紹介します。 How to Quickly Turn Boring Icons into Original Masterpieces アイコンの基本的な作り方は、前回の記事を参考にしてみてください。 シンプルな図形を組み合わせて作成する驚きのテクニックが満載です。 簡単なのにすごい、アイコンを作るテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを
Image Effects with CSS
Bennett Feely Twitter CodePenHow it worksUsing one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image. The unedited background-image manipulated using CSS. In most of these effects the single source background-image url is repeated one or more times and blended with itself using CSS blend
JavaScript不要、HTML/CSSコピペで実現するすごいスタイル10個まとめ - PhotoshopVIP
JavaScript不要、HTML/CSSコピペで実現するスタイル10個まとめ YOU MIGHT NOT NEED JAVASCRIPT JavaScriptはとても便利で、Webページを構成する機能的なUIコンポーネントを自由に作成できます。ほんの数行のコードを加えることで、ブラウザにさまざまな機能を追加できます。 今回は、JavaScript を使わずにHTMLとCSSのみで実現できる、ウェブサイトでもよく利用するコンポーネントを10個まとめてご紹介します。 参照元@ : YOU MIGHT NOT NEED JAVASCRIPT - youmightnotneedjs.com
デザインに自信がない人も大丈夫！無料UIキットでWeb制作スピードをアップしよう。
ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat
23 Beautiful Wireframe Sketches for Web Designers
Speed up your design process, build websites and apps faster and make the whole web/app developing process a lot easier with these beautiful wireframe sketches! In case you are not familiar with the differences between a prototype and a wireframe, here are some clarifications: A wireframe is a low-fidelity design depiction. It lacks fine detail, it’s static, and while it often defines shape, it la
Mockerie.io - Mockup your website or app
Royalty Free Use our images mocked up with your website for websites, designs or anything you want! We also promote websites and apps that improve the efficiency of bitcoin trading. Crypto superstar apps are highly popular in the market helping several traders to gain profits in their bitcoin trading. Hosted Mockups Choose a mockup, upload an image or animated GIF, generate an embed code and copy
プロカメラマン仕様のPhotoshopのトーンカーブのまとめ -写真画像の自然光とカラーを美しく印象的に仕上げる
シドニーを拠点に活躍しているプロのファッションカメラマン: Julia Trotti氏のトーンカーブのコレクションが無料でダウンロードできるので、紹介します。 まずは、トーンカーブファイルの利用方法を。 ダウンロードとインストールは簡単です。 各ページの左「download」からファイルをダウンロードし解凍、拡張子「.acv」がトーンカーブファイルです。 Photoshopのアプリケーションフォルダ内の「Presets/Curves」内にトーンカーブファイルを移動。これで準備は完了です。 トーンカーブを利用するのも簡単です。 Photoshopで画像を開きます。 メニューバーから「レイヤー: 新規調整レイヤー: トーンカーブ」を選択します。 トーンカーブのパネルの「プリセット」からトーンカーブを選択します。 ※ファイルがプリセットに無い場合 トーンカーブのパネルの右上のアイコンをクリックし
Magic Mockups • Free real-life mockup generator
Follow and get notified when new environments are added: Do you like this project? Tell your friends.
FractionSlider: jQuery parallax Slider Plugin | jacksbox.design
You want to give me general feedback, report a bug or have any questions about the implementaion? Just send me an eMail or leave a comment! jQuery parallax slider plugin FractionSlider 1.0 FractionSlider is a jQuery plugin for image/text-sliders. It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
