WhatTheFont : MyFonts
To identify a font from an image, use a font finder or font identifier. These tools are great for finding the name of a font or similar alternatives. All you need to do is upload an image of the text by having it readily available on your device or taking a photo. Yes, WhatTheFont is a simple and easy font finder that can help you identify fonts. Just upload an image of the font you need identifie
初心者でも簡単にWordPressのローカル環境を構築する方法（Localを使用）
WordPressサイトを運営している中で、以下のような悩みを持つ方は多いだろう。 「違うテーマやプラグインを試してみたいけど、表示が崩れてしまったら嫌だ」 「テーマをカスタマイズしたいけど、本番環境でテストするのは怖い」 そこでチャレンジしてほしいのが、ローカル環境の活用である。 WordPressサイトは、サーバー上だけでなくローカル環境（デスクトップ上）でも動かすことができる。そして、ローカル環境は初心者でも誰でも簡単に作ることができる。 「ローカル環境だなんて難しそう…」と思う方も多いだろうが、Localというツールを使えば、びっくりするほど簡単に構築可能なので安心してほしい。ソフトをダウンロード・インストールし、画面の指示に従って進めるだけで、誰でも簡単に設定が完了してしまう。
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free and open source mobile touch slider with hardware accelerated transitions and amazing native behavior. Use it on websites, web apps, and mobile native/hybrid apps. Swiper, along with other great components, is a part of Framework7 and Ionic Framework - a fully-featured frameworks for building iOS & Android apps.
placehold.jp | 簡単！ダミー画像作成
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり) | creive【クリーブ】
「Flexboxは、どんなことができるのか、いまいち分かっていない。」 「Flexboxって、横並び機能のfloatやdisplayとどう違うの?」 CSSの学習を始めた人の中には、こう思う人もいるでしょう。Flexboxは、従来、javascriptや他のCSSプロパティを駆使しながら実現していた複雑なレイアウト設計を簡単に実現します。今後、設計の主流になる可能性が高く、確実に理解し、使いこなせるようにしておきたいものです。Flexboxの守備範囲は、ほかのCSSプロパティに比べて広いため、最初の学習コストはかかりますが、それだけの価値があります。これまでmarginやpaddingでの調整に苦労してきた方は、これを学ぶことで大きな安心感がうまれるはずです。 今回は、CSS3で導入されたFlexboxを初心者の方でもわかりやすいように説明します。 Flexboxとは? Flexboxとは
Convert PNG, JPG files to SVG vectors online - Vectorizer.AI
PICK Pick a bitmap image that you want to vectorize and drag and drop it onto the page. Bitmap images, such as JPEGs and PNGs, are represented as a grid of little squares called 'pixels', each with its own color. PROCESS We analyze, process, and convert your image from pixels to geometric shapes. The resulting vector image can be scaled to any resolution without getting blurry, and can be used to
Online StyleSheet Generator | OneClickCSS
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
Stable Diffusion 2-1 - a Hugging Face Space by stabilityai
Discover amazing ML apps made by the community
【画像で解説】Google Analytics 4（GA4）とは？基本的な導入設定と使い方を紹介 | サクラサクのSEO【SEO対策・コンテンツ制作なら】 あっ！サクラサクに相談しよう
2020年10月にGoogle Analytics 4（GA4）が正式公開され、2023年7月をもって従来のユニバーサルアナリティクスのデータ取得とサポートが終了しました。 GA4は、ユーザーの検索手段の多様化を踏まえ、測定ツールの将来を見据えて刷新されています。そのため、ユニバーサルアナリティクスに比べ、詳細かつ高度なデータ分析が行なえるようになりました。自社サイトの改善や向上のためにも、GA4の導入は必須といえるでしょう。 この記事では、GA4の基本仕様と導入方法のほか、初期設定や分析レポートの作り方などについて詳しく解説します。 GA4の導入方法や使い方を理解したい方は、ぜひ最後までお読みください。 サクラサクラボのYouTubeチャンネル、サクラサクラボチャンネルではGoogle Analytics 4（GA4）の最新活用方法を動画で解説しています。 ぜひ動画をチェックしてみてくだ
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
Webページのレイアウトに役立つ20のデザインテクニック
ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました!
WordPressでスクリプトファイルを読み込むときはwp_enqueue_script関数を使う | 埼玉のWebコンサルタント ColdSleep Works
例：jQueryのスライダー（jquery.bxSlider.min.js）を使うとき function my_scripts_method() { wp_enqueue_script('bxSlider', get_settings('site_url').'/wp-content/themes/your-theme/js/jquery.bxslider.min.js', array('jquery'), '4.1.2', true); add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 複数のスクリプトを読み込むときはwp_enqueue_script()を併記します。 WordPress本体とは違うバージョンのjQueryを指定したいとき WordPress本体に含まれるjQueryのバージョンはバージョンアップとともに変
【知識】WordPressの画像のパスの書き方教えて(投稿、固定ページ、テーマファイル) | わかるWeb
WordPressで管理する画像へのパスって何？ WordPressで画像を管理するフォルダ WordPressのサイトで使われる画像は、主に以下の2つのフォルダ（ディレクトリ）で管理されます。 WordPressにあるメディアフォルダ（/wp-content/uploadsフォルダ） テーマフォルダの中の任意の画像フォルダ 投稿や固定ページなどで画像を使いたい場合には、「1.メディアフォルダ」にアップロード（保存）することが一般的です。 その理由は、以下の通りです。 「メディア」には、パソコン上の画像をWordPressの機能で簡単にアップロードすることができる 「メディア」にアップロードした画像は、WordPressが認識できる（WordPressが認識できると、投稿や固定ページなどで、すぐに使用することができる） 「メディア」にアップロードした画像は、WordPress上で簡単な編集
テーマにJavaScript（jsファイル）を正しい方法で読み込む
たとえば、jsフォルダに保存されたmain.jsというスクリプトファイルを読み込むには、functions.phpに次のように記載します。 function twpp_enqueue_scripts() { wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js' ); } add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );wp_enqueue_script()の第1引数にはスクリプトの名前を、第2引数にはjsファイルまでのURLを渡します。get_template_directory_uri()はテーマのディレクトリまでのURLを返す関数です。 これにより、<head>タグ内に次のようなコードが出力されます。 <scrip
HTML, CSS and JavaScript playground - Liveweave
Initializing Liveweave Web expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward outbox_alt Generative AI arrow_outward frame_source Python Playground New arrow_outward build Tools expand_more restart_alt Load "Hello Weaver!" post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format
CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント
CSSのclip-pathプロパティは、非常に便利です。 セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり、最近のWebページやスマホアプリで見かけるエフェクトはclip-pathプロパティを使用すると、簡単に実装できます。 clip-pathプロパティの基礎知識と便利な使い方、実装のポイントなどを詳しく解説します。 Understanding Clip Path in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに clip-pathプロパティにおける座標 clip-pathプロパティに使用できる値 clip-pathプロパティを使用した実装 終わりに はじめに clip-pathプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Neumorphism/Soft UI CSS shadow generator
