HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。

モバイルファースト（スマホンシブ・スマポンシブ）のWEBデザインだけを集めたギャラリーサイトです。

こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像

Posted by NAGAYA on Sep 7th, 2017 こんにちは。めぐたんです。 今回からCSSのborderプロパティだけで作る三角形について、全2回に渡ってお届けします。 「borderプロパティだけ」、つまりブラウザの種類やバージョンに依存しないのでもしかすると前々から使われていた手法なのかもしれませんが、CSS3の登場以降CSSだけで色々な表現に挑戦する方も増えたのではないでしょうか？私も最近使う機会がよくあると感じるのでまとめてみました。 .triangle{ border-right: 50px solid transparent; border-bottom: 86.6025px solid #b2ce54; border-left: 50px solid transparent; } なぜこのように「borderだけで三角形ができるのか」を理解するには、bor

フリーCGIやJavascript、EPSなどのWeb制作やホームページ制作で役に立つ素材を無料で配布しております。

日清食品HDによる一連のDX施策の中で、特に力を注いできたのが「業務部門のデジタル活用支援」である。2021年10月に新設したデジタル化推進室が主導する。RPA（ロボティック・プロセス・オートメーション）やモバイルデバイスの活用拡大による業務効率化を進め、これまでに年間10万時間超に及ぶ作業工数の削減を達成。2024年度には18万時間以上の削減を見込んでいる。 経営トップが入社式で「ChatGPT」を活用 成果の一段の引き上げを目指し、日清食品HDが2023年から加速させているのが生成AIの活用である。日清食品グループの専用環境で米OpenAI（オープンAI）の「ChatGPT」を全社規模で活用し、飛躍的な生産性向上を目指す。きっかけは同年4月3日の入社式だ。安藤宏基代表取締役社長・CEO（最高経営責任者）自身がChatGPTを操作し、複数のキーワードを用いて生成したメッセージを新入社員に

・PageSpeed Insightsで表示される「レンダリングを妨げるリソースの除外」を解決したい！ ・「レンダリングを妨げるリソースの除外」の意味や原因・仕組みも知りたい ・プラグインで解決したい ・プラグインなしで解決したい ・他のサイトでやり方を調べたけど解決できなかった ・画像付きでわかりやすく手順を知りたい サイト速度を計測するツールであるPageSpeed Insightsで、 上の画像のように「レンダリングを妨げるリソースの除外」という項目が表示されて速度がなかなか改善できない方も多いはず。 対処してみたものの改善されなかったり、ややこしそうなイメージで手をつけていない方もいると思いますが、 本記事を読めば「レンダリングを妨げるリソースの除外」はしっかり改善できます。

Powered by Nucleo: Icon Manager for Mac/Windows SVG Flag Icons Explore over 200 optimized SVG country flag icons — Perfectly crafted on a 32px grid No results found. Suggest missing flag. SVG Flag of Aaland Islands SVG Flag of Afghanistan SVG Flag of Albania SVG Flag of Algeria SVG Flag of Andorra SVG Flag of Angola SVG Flag of Antigua Barbuda SVG Flag of Argentina SVG Flag of Armenia SVG Flag of

私はCloudflare Registrar＆さくらのメールボックスでメールを運用しています。 合わせて年間2000円くらいとかなり安いです。 ただしさくらのレンタルサーバ含め、さくらはDKIM/DMARCに対応していなかったのでGmailをお使いの方にメールがちゃんと届くかちょっと不安という問題がありました。 2023年12月19日、X（Twitter）を見ていたところ下記のお知らせが流れてきました。 【さくらのレンタルサーバ / マネージドサーバ】DKIMおよびDMARC対応予定に関するお知らせ（2024年1月23日 10:00更新） | さくらインターネット さくらのメールボックスも対象です。 長い間さくらはDKIM/DMARC対応をしていなかったのですが、2024年2月1日からGmailのガイドラインが変わることを受けて対応することとなったようです。 2024年2月より Gmail

決済方法 全ての決済方法 日本、韓国、中国、ヨーロッパの決済方法を提供しています VISA Mastercard Konbini Toss Alipay

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

先日、個人事業のサイトが完成しました。 たくさんの方にいろいろと教えていただき、なんとか思ったとおりのサイトを作ることができました。 屋号はアカリホノカニと言います。 http://akarihonokani.com/ 今後、このサイトの作り方を、テーマ編・プラグイン編などとして投稿していこうかと思います。 今回はピックアップした感じになりますが、とても感動した「特定のタームにパスワードをかける方法」をポストします。たぶん、困ってる方いるんじゃないかと思うので…。 ［公開一時間後 追記：記事を見てここはこうしたほうがいいよーといった意見をいただきました。今後調べて追記していきます。 ・フィードに対応していない、・リダイレクトはwp_redirectまたはauth_redirectを使ったほうがいい、などです。］ ［2014/08/12 追記：いろいろなご指摘・ご意見をいただきましたので、t

Generate. Refine. Ship.Generate UI with shadcn/ui from simple text prompts and images.

TOP プラグインMW WP FormへのreCAPTCHA設定方法を解説【図解】 プラグイン 2023.07.10 2023.07.26 MW WP FormへのreCAPTCHA設定方法を解説【図解】 WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO 1985年北海道生まれ。 200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。 【 展開しているサービス一覧 】 ■WordPress開発サービス「wp.make」 ■WordPress保守/運用サービス「wp.support」 ■WordPressハッキング/緊急復旧対応サービス「wp.rescue」 ■WordPressバージョンアップ代行サービス「wp.versionup」 「MW WP Form」は、かんたんに確認画面や完了画面付きのフォームが作れるWo

WordPressでWebP形式を使用するメリット 通常のWebサイトと同様に、WordPressサイトでも画像をWebP形式にすることで、画像ファイルの容量を削減できることや、ページの表示速度が改善してSEOに貢献できるといったメリットが期待できます。 画像サイズを小さくできる WebPは、写真画像でよく使用されるJPEGと比較して20％〜30％ファイルサイズを圧縮できます。JPEGの場合は圧縮率を上げると画質が劣化しますが、WebPであれば品質を下げずに画像を軽量化できます。 WebP画像に切り替えることでストレージコストの削減にも繋がります。 ただし、詳しくは後述しますが、非対応ブラウザへの対応を行う場合、JPEG等の従来の画像形式の画像も必要になるため、ストレージ容量の削減効果はありません。 ページの表示速度が改善する WebPを使用することで画像サイズが小さくなるため、ページの表

「pic-background」クラスに「background-image」を制定し背景を設定。「background-size: cover;」で画像を全体を覆うように縮小させます。 <div class="container pic-background"></div> .pic-background { background-image: url(...); background-size: cover; background-position: center; } .container { position: relative; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; z-index: 0; }