※気象庁の全球数値予報モデルGPV（GSM）を使用しています。 ※本サイト上の情報をご利用の上行われた活動において発生した、いかなる損害に対しても一切の 責任を負いかねますので、ご了承ください。
週間寒気予想
※気象庁の全球数値予報モデルGPV（GSM）を使用しています。 ※本サイト上の情報をご利用の上行われた活動において発生した、いかなる損害に対しても一切の 責任を負いかねますので、ご了承ください。
【完全保存版】Advanced Custom Fieldsの出力タグまとめ
ACF テキストフィールド <?php the_field('text'); ?> ACF テキストエリア <?php the_field('textarea'); ?> ACF ラジオボタン <?php // vars $field = get_field_object('color'); $value = $field['value']; $label = $field['choices'][ $value ]; ?> <p>Color: <span class="color-<?php echo $value; ?>"><?php echo $label; ?></span></p> ラジオボタンによる分岐 <?php if( get_field('ラジオボタンのフィールド名') == "選択肢名1"): ?> <p>処理1</p> <?php elseif( get_field('
2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ | Web Design Trends
IE11は注意が必要！ 何かと話題になりやすいInternet Explorerですが、最新のIE 11でもFlexboxに関するバグがいくつか報告されているため、Flexboxを使用する場合はIEでの動作確認を行った方がいいでしょう。 ただし、IEのサポートも2022年6月に終了することが発表されており、これから制作するWebサイトであればIEを最初からサポート外にしてしまう方がいいと思います。 Flexboxのベンダープレフィックス一覧 下記にFlexboxに関連するCSSのプロパティのベンダープレフィックスの記述方法をご紹介しておきます。 すでに、ベンダープレフィックスが必要なバージョンのブラウザはシェアがかなり少なくなってきており、基本的にはベンダープレフィックス無しでもほぼ100％に近いシェアをカバーできるものの、古いブラウザでの動作保証もしっかりケアしたいという場合は、ベンダー
【爆速】HTML5 + CSS3で簡単にWebデザインしよう！ - Qiita
お知らせ:レスポンシブ対応した2018年版の記事を書きました！合わせてご覧ください！ →https://qiita.com/Y_ASAMOTO/items/d5f33ecf5bfbb7f028a5 はじめに 趣味でWebサイトを作りたい方、会社でWebサイトを作らなければいけなくなってしまった方必見！ HTML5+CSS3で作成すれば簡単にシンプルでキレイめなWebサイトを作ることは可能です。 今回サンプルとして作成したWebサイトは約1時間で作成しました。 慣れてしまえば、もっとスピーディーな制作も可能ですよ！ サンプルサイトはこちら（GitHubでも公開中） 今回は基本的な作り方の部分も含めてご紹介しますので、わかっている方はその部分はスルーしてください。 HTMLの基本構造はテンプレート <!doctype html> <html lang="ja"> <head> <meta ch
jQuery＋CSS3で全画面表示するハンバーガーメニュー
Posted: 2019.01.31 / Category: HTML&CSS, javascript jQuery＋CSS3を使用して、ハンバーガーボタンをクリックすると全画面メニューが表示するやつをやってみます！ フェードで表示されるナビゲーション 一つ目はフェードで表示されるナビゲーションです。 See the Pen Full Screen Hamburger Menu 01 by webopixel (@webopixel) on CodePen. html <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="gloval-nav"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
EC-CUBE 4.0をカスタマイズしてみよう｜フロントエンドエンジニア黒ブタのWEB制作備忘録
どーも 黒ブタ です。 今までずっと避け続けてきたのですが、仕事でECサイトの構築案件が来そうな感じなので、嫌々ながらもEC-CUBEの勉強を始めた。 EC-CUBEはWordPressと違って独自のコードばかりで癖があってやりづらいけど仕方ない・・・。 とりあえず、デフォルトのテーマをカスタマイズするところから始めようと思う。 コードもさわって配置などもいじってみたいが、それは後回しでとりあえずCSSをいじるところから始めてみようと思う。 カスタマイズ用のCSSを追加読み込みする 元ファイルをガツガツいじっていくのはリスクがあるので、管理画面からデフォルトのテーマをコピーする。 管理画面にログインして、オーナーズストア → テンプレート → テンプレート一覧 → デフォルト デフォルトを選択してダウンロード そうすると「default.tar.gz」というファイルがダウンロードされるので
【2022最新】EC-CUBE4初心者のためのテンプレートカスタマイズ方法
EC-CUBE4は無料でネットショップを構築できるCMSですが、Wordpressに比べて情報量も少なく、Twigの書き方も覚える必要がるので難しいと感じる方が多いと思います。わかってしまえばそれほど難しくないのですが、分かるまでが結構つらいんですよね（僕も苦労しました）。 このページではEC-CUBE4初心者の方でも分かりやすく、テンプレートやデザインのカスタマイズ方法を具体的に解説していきます！ EC-CUBE4.2対応 一番安いデザインテンプレート EC-CUBE4.2対応に対応したレスポンシブテンプレートを公開しています。あらかじめデザインされたUIブロックを多数同梱しているので、面倒なコーディングなしに今すぐショップを構築したい方におすすめ。 -> 詳細はこちら EC-CUBE4 テンプレートカスタマイズの基礎 カスタマイズを始める前にEC-CUBE4のテンプレート構造と開発環境
Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ
2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W
AdobeXD Bootstrap4のグリッドの作り方(レスポンシブ対応)
AdobeXDのアートボードに設定できるグリッドで、iPadやSurfaceなどのアートボードのプリセットを使ってBootstrap4のグリッドを作る方を紹介します。 XDでBootstrapを使ったレスポンシブ対応サイトを作成する場合に便利です。 XDでBootstrap4のグリッドを作る方法 ここではXDのスタイルパネルにある「グリッド」設定を使ってBootstrap4のグリッドを作ってみます。 やり方はアートボードを選択した状態で、右側のスタイルパネルの下にある「レイアウト」にチェックをつけます。あとは「列」を12に、「段間幅」を30にして、左右のマージンを画面幅ごとに設定すれば完了です。 左右マージンの計算方法 左右マージンの計算方法は次の通りです。container幅に-30pxしているのは内側のpaddingを引くためです。
ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～SafariChromeFirefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。GitHubでファイルをダウンロードすることもできますが、CDNの方が楽なので今回はこちらを利用します。 公式サイト → http://git.blivesta.com/drawer/ 記載されているサンプルコードを元に解説していきます。 完成形のソース こちらを「index.html」などの拡張子.htmlで保存するとドロワーの動作が確認できるはずです。 <!DOCTYPE html> <html> <head> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer
EC-CUBE4 管理・運用マニュアル | shiro8
EC-CUBE4 フロント機能 EC-CUBE4の基本ページ お買い物の流れ概要 ブロック機能 マイページ機能 コンテンツページ EC-CUBE4 管理機能 ログイン ホーム 商品管理 商品一覧（Ver.4で名称変更） 商品登録 規格管理（Ver.4で名称変更） カテゴリ管理（Ver.4で名称変更） タグ管理（Ver.4で機能追加） 商品CSV登録 カテゴリCSV登録 受注管理 受注一覧（Ver.4で名称変更） 受注登録 出荷CSV登録（Ver.4で機能追加） 会員管理 会員一覧（Ver.4で名称変更） 会員登録 コンテンツ管理 新着情報管理 ファイル管理 レイアウト管理（Ver.4で機能追加※機能分離） ページ管理（Ver.4で名称変更） ブロック管理（Ver.4で名称変更） キャッシュ管理 設定 店舗設定 基本設定（Ver.4で名称変更） 特定商取引法設定（Ver.4で名称変更） 利用
X（旧Twitter）広告のターゲティング設定を管理画面を使ってご紹介！ | 株式会社PLAN-B
オーディエンスの特性では詳細なターゲティングが設定できます。ターゲティング例では新しいものが好きな若い男性をターゲットとする場合は、上記表のターゲティング例のように設定するのがおすすめです。 性別や年齢のターゲティングは、ユーザーのプロフィール情報が利用されます。プロフィールが未入力の場合は、ユーザーの興味関心やツイート内容を基に分類されるため、あくまでも参考程度に入力しましょう。 オーディエンスの条件 図5,オーディエンスの条件の全体像 オーディエンスの条件ではツイート内容やいいね、RTなど、X（旧Twitter）ユーザーがX（旧Twitter）上で行った行動を基に詳細なターゲティングが可能です。オーディエンスの条件では次のようなターゲティング設定ができます。 キーワードイベント興味関心フォロワーの類似オーディエンス映画、TV番組会話トピックおすすめさらに、リマーケティングやデモグラフィ
方程式 - 計算が簡単にできる電卓サイト
解を求める方程式を電卓に入力し「計算」ボタンを押してください。 小数や分数の方程式も解くことができます。 計算をやり直す場合は「クリア」ボタンを押すと電卓に入力された数値が削除されます。 連立方程式はこちらをご利用ください。 連立方程式の電卓 二次方程式はこちらをご利用ください。 二次方程式の電卓 方程式の反復練習にはこちらの問題出題ツールをご利用ください。 方程式の問題出題ツール 方程式の解説 2x+4=10のようなxなどの文字を使った等式を方程式と言います。そして、xに乗数がつかない（x2のようにならない）方程式のことを、一次方程式と言います。 方程式を、2x+4=10からx=3のようにx=●の形に変換することを、方程式を解くと言います。ここでは一次方程式の解き方を解説していきます。 方程式の基本 方程式を解くに当たって基本となるのは、移項・同類項の計算・左辺を文字のみにするの３つです
slick.jsで左右の画像をチラ見せするスライダーの設定方法について
また、他にもslick.jsを使ったサンプルということで、楽天のイベントバナーを例にslick.jsとjavascriptを組み合わせてバナーの掲載期間を指定する方法を紹介したこともあります。 サンプルソース <link rel="stylesheet" type="text/css" href="slick.css"> <link rel="stylesheet" type="text/css" href="slick-theme.css"> <script type="text/javascript" src="jquery.min.js" ></script> <script type="text/javascript" src="slick.min.js"></script> <script> $("document").ready(function(){ $('.mypatter
スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ
「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。 これ全部、フォン... 「トップへ戻る」ボタンのデザイン15パターン ボタンで表示を切り替えてご覧ください。 See the Pen PAGE TOP BUTTON01 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON02 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON03 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON04 by kenichi (@ken81
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで簡単に実装できるクールなアニメーションドロワーメニュー10選【上下左右・階層・スライドメニュー・ハンバーガーメニュー】
https://codepen.io/nyantora_03_09/pen/RwrRLNq
計算が苦手な文系のための コーディング単位計算ツール
