コンテナからの解放。
今年もCSSには大変お世話になりました。なかでも今年になってとくにお世話になる頻度が増えたのが「calc（キャルク）()関数」。プロパティの値に、計算式を使わせてくれるスゴいやつです。ここでは、そんなcalc()関数を使った便利ワザについて書いてゆきます。 この記事は「今年お世話になったCSS Advent Calendar 2016」の23日めの記事です:)。 ※2023年の11月に加筆・修正しています。 calc()関数を使った便利なスタイル 例えば下図みたいな、「サイト全体のコンテンツは横幅800pxで画面中央にレイアウトされていて、その中のあるセクションだけウィンドウ全幅まで広がってる」なんてデザインの場合。以前は、「サイト全体を包括するコンテナには横幅を指定しないで、セクションごとに横幅を指定」していたと思うんです。 HTMLとCSSは以下みたいな感じ。 main要素には何もスタ
jQuery – 半角英数字と全角英数字を相互に変換する
これは特殊な例だと思いますが、以前、Webサイトの制作で、トップページのみナビゲーションメニューの各テキストを大きく表示させてレイアウトするデザインをしました。 その際に、どうしてもテキストを全角文字にして日本語も英数字も等幅にしたかったのですが、各ページのナビゲーションメニューは半角英数字と日本語で表示したいということがありました。 概要 半角英数字の場合は文字コードに65248を加算することで全角になり、全角英数字の場合は65248を差し引くことで半角になります。 replace関数を用い、当該箇所をこれらに置き換えます。 jQueryで半角英数字と全角英数字を相互変換 多分、半角と全角の相互変換は、フォームの入力規制などで使用されることのほうが多いのではないかと思います。 テキストボックスの英数字を半角と全角に相互変換する 以下のテキストボックスでは、半角英数字を入力すると強制的に全
カテゴリー毎に記事投稿一覧を表示する | WPスイッチ
トップページ等に最上位のカテゴリーと、それぞれのカテゴリーに属する投稿を取得して一覧表示する場合の記述です。 "query_posts"を使用して出力する方法を見かけますが、現在では"query_posts"は非推奨となるため、ここでは"WP_Query"を使用しています。 参考：WordPress Codex 日本語版 テンプレートタグ query posts index.php等<?php $categories = get_categories(array('parent' => 0)); //最上位のカテゴリーのみを取得する foreach ($categories as $category): ?> <h2><a href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $cat
「“私はあなたの『アイヌ』ではない”」：小田原のどかが見た「ウポポイ（民族共生象徴空間）」
「“私はあなたの『アイヌ』ではない”」：小田原のどかが見た「ウポポイ（民族共生象徴空間）」今年7月に開業した北海道白老郡白老町の「ウポポイ（民族共生象徴空間）」。「国立アイヌ民族博物館」「国立民族共生公園」「慰霊施設」によって構成されるこの国立施設が誕生した背景を踏まえ、「語られていないこと」について小田原のどかが論じる。 文＝小田原のどか ポロト湖と伝統的コタン 撮影＝筆者（以下すべて） 民族共生象徴空間とは何か 2020年7月12日、北海道白老郡白老町に「ウポポイ（民族共生象徴空間）」が開業した。本来は4月24日に開業が予定されていたが、新型コロナウイルス感染拡大の影響により2回の延期を経てのオープンとなった。同施設の「愛称」であるウポポイとはアイヌの言葉で「（おおぜいで）歌うこと」を意味するといい、2018年に一般公募によって決定した。民族共生象徴空間という名称は、閣議決定された内容
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
【reCaptcha V3】Contact form 7 5.1.1でメール送信不可【全てスパム判定】
WordPressが半ば強制的にWordpress 5.xにVersion Upされて、お問い合わせページで使っているContact form7もVersion 5.1にアップデートとなり、その結果、Contact form7で使っているGoogle reCaptchaもV2からV3にアップデートするしかなくなりました。 reCaptchaをV2からV3に上げた時にreCAPTCHAのアイコンが常に表示される変更があり、それがかなりウザいので消す方法を以下の記事に書きました。 参照：Google reCAPTCHA v3のアイコンを消す方法 その後、Contact form7 + reCaptcha V3の組み合わせで、こちらのサイトでは特に問題が出ていなかったのですが、別のサイトでContact form7からメールが送れないという報告を頂きました。 自分で確認してみると、メールの内容に
MacBookProと相性抜群！外部4Kモニタ「LG 27UD58-B」レビュー
27インチ！でっかい！4K！キレイ！ これまで使っていたのが23インチなので完全に別世界です。 macbookを使いはじめてRetinaディスプレイになったので高精細な画面に慣れてしまっており、 これまで使っていた外部モニタの画質には満足できないカラダになってしまいました。慣れって怖いですね。 ぼくがモニタに求める条件はだいたいこんな感じです。 【安くて良い物＝最高】みたいな考え方は高校生ぐらいから変わっていません。 デザイナーをやっていますが、発色がどうのとかいうのもあんまり気にしていなくて、 「このモニタは10億色表示できますよ！」とか言われても、そもそも人間はそんな微細な色域を認識できるのかという。 多分できませんね。 できます？ぼくにはサッパリ分かりません。 よってハイスペックモニタはプロのフォトグラファーとかレタッチャーみたいな 画像編集を専門に行うプロフェッショナルの方向けの商
BlackHoleでMac上で再生される音声を録音する | DevelopersIO
はじめに BlackHoleはmacOS上でアプリケーションから他のアプリケーションへ音声を転送できる仮想オーディオドライバです。今回はいつも受講しているオンライン英会話レッスンの録音のためにBlackHoleをセットアップしてみました。 Blackholeのシステム要件とテストした環境 GitHubページによるとBlackHoleの動作要件は以下の通りです。 Works on macOS 10.10+ including macOS 10.15 Catalina 今回試したの以下の環境になります。 MacBook Pro (13-inch, 2016, Four Thunderbolt 3 Ports) macOS Catalina 10.15.4 録音までにやること 実際録音するまでにやることは次の3つです BlackHoleのインストール オーディオデバイスの設定 録音 1. Bla
慣性スクロールとパララックスエフェクトのVanilla.jsプラグイン「Luxy.js」作ってみた | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちはアートディレクターの奥田です。 最近は娘の成長を見るのがとても楽しみで、寝返りしたと思えば次の日にはずりばいの練習をしていたりと日々成長していく姿に感動しております。 さて、Webサイトに高級感を与える慣性スクロールとパララックスエフェクトのVanilla.jsのプラグインを作ってみました。 サイト制作にぜひ役立ててみてください。 Table of contentsインストール使い方オプション補足さいごにインストールnpmで簡単にインストール可能です。 npm install luxy.js --saveまたは、ページにスクリプトを含めることで使用できます。 <script src="path/to/luxy.js" charset="utf-8"></script>プロジェクトにluxy.jsを含めて以下のように初期化してください。 <script charset="utf-8
【Javascript】CSSアニメーションがつらいのでanime.jsを試してみた | Wood-Roots:blog
アニメーションをCSSで書くようになって数年になりますが、凝ったアニメーションを書こうと思うと年々つらくなってきました。 CSSアニメーションのつらみ イージングがつらい transitionならcubic-bezierを書くだけでいいですが、@keyframesでイージングを書こうと思うとつらい。 というか人力で書けるものなのだろうか。 完了を検知して連続したアニメーションを実装するのがつらい transitionend/animationendでクラスを足していってそのクラスに対してアニメーション…つらい。 transitionend/animationendではなくX秒のアニメーションAが終わったらX秒のディレイ後にアニメーションB…とやれば多少は楽ですが、妥協感と将来的に破綻する未来が見える。 CSSファイルがつらい 単純に行数が増えてつらい。 …この状況を打開するために、JSで制
slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 - NxWorld
使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 実装イメージはこのようになっており、現在のスライド数 / スライド総数という形でカウントを表示させます。（イメージは全10枚中5枚目を表示しているという状態） デフォルトで用意されているバレットとかでも全部で何枚あり現在何枚目を表示しているかはわかりますが、よりパッと見でわかるようにしたいときやデザイン的にこのような表示にしたいとき、あとはスマートフォンなど表示領域が狭い場合にバレットやサムネイルなどがごちゃごちゃ配置されているのをどうにかしたいと
【CSS】img画像の縦横比を保ったままボックス内に収める方法 | Freelance Journal フリーランス ジャーナル
要件概要: ボックスのサイズは固定 横長の画像が来たらボックスの横幅に合わせる 縦長の画像が来たらボックスの縦幅に合わせる 画像サイズがボックスサイズより小さい場合はそのまま 縦横中央揃え 結論からいうと、「縦横中央揃え」以外の要件は下記のCSSで実現できます。 img { width:auto; height:auto; max-width:100%; max-height:100%; } ボックス内で画像を縦横に中央揃えさせたい場合も多いと思います。デモを用意しましたので、ご参考下さい。 See the Pen 4 way to keep image ratio inside a box by wang (@yaquawa) on CodePen. 全部で5通りの方法です。ボックスの端をドラッグしてリサイズしてみてください。ボックスのサイズに応じて収まり方も変わってくることが確認できる
WordPress ブロックエディター(Gutenberg)カスタマイズあれこれ - Qiita
WordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報を追加しています。 更新履歴 2021/06/11 - ブロックフォントサイズの shortName が無くなったので削除。ブロックパターンの削除、カスタム単位、カスタム行間について追加。 2021/01/10 - グラデーション設定を追加。 2020/06/19 - 投稿タイプ別に使えるブロックを制限する方法を追加。 2020/05/24 - ブロックスタイルの削除について追加。 2020/04/22 - 後方互換性についての注意を追加。ダークモードの記載追加。 2020/02/20 - Gutenberg 7.5 でインラインの文字色編集が追加されたので記載。 20
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
Googleカスタム検索のダサダサな検索Boxを好きなデザインにする方法｜鈴木麗子
Googleカスタム検索とはGoogleでサイト内検索ができる小窓を自分のウェブサイトに設置できるサービスです。 Googleアカウントにログインして下記ページから登録を行います https://cse.google.com/cse/all そして取得したJavascriptコードを、自サイトのHTMLソースの検索ボックスを設置したい位置に貼りつけます。 こちらが張り付けた例ペタリいまいちだ 一応テーマとかあったり、各パーツの色だけ変更できるんですが、もうそんな問題じゃないです。 Googleカスタム検索を好きなデザインに変更する！この検索ボックスはテーブル組（！）なのでCSSを上書きしても限界があります。 頑張ってCSSを駆使して何とかしているブログなどもありましたが、やだ、もっと素敵にしたいんです。 なんとやりかたは超簡単でした。 普通に好きにinputなどを設置して、パラメーターでカ
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
商用でも無料の英語フリーフォントをいざ探すとなると面倒だと思うので、まとめました。ブラシやペンで書かれたようなおしゃれな筆記体・手書き・スクリプト系の英語フリーフォントを紹介します。 画像にぽんと添えるだけで、おしゃれなデザインになる素敵なフォント達です。 日本語フリーフォントをお探しの人は、下記がお勧めです。 日本語のフリーフォント650種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 商用利用無料！手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ フォントは、商用でも無料、個人利用のみ無料の2ジャンルに分けました。 フリーフォントのインストール方法 商用無料、おしゃれな筆記体・手書きの英語フリーフォント 個人利用のみ無料の英語フリーフォント フリーフォントのインストール方法 フリーフォントのインストール方法を簡単に解説します。 フリーフォントをW
SEOに効果的なパンくずリスト最適化方法 | 株式会社Revery
パンくずリストとは？ パンくずリストは、ページの上部や下部に設置されている事が多い、Webサイトの中で現在のページの位置を示すナビゲーションです。 検索エンジン経由でWebサイトの下層ページからアクセスを始めるユーザーが多いため、そのページの上位階層に容易にアクセスできるパンくずナビゲーションは、Webサイトに必須の機能と言えます。 アクセスしたページのコンテンツに興味があれば、パンくずリストを使って他のページに移動してくれるかもしれません。 また、パンくずリストの内容は検索結果画面のURL部分に表示される事もあるため、検索結果でのクリック率に影響がある可能性もあります。
2019年もSEOに強いWebサイトを作るために押さえておきたい21の基本 | Web Design Trends
「Webページを作ったのに、全然上位に表示されない…。」というのは、Webページを作ったことのある方なら誰もが経験したことがあると思います。 頑張って作ったWebサイトであれば、検索結果の上位に表示されたいですよね。そこで登場するのが「SEO対策」です。 SEO対策は、小手先の技術から、Webサイトの根本から考える必要があるものまで、本当に幅広く、奥もかなり深いため、簡単にマスターすることはできません。 また、毎年新たなSEO対策の手法やテクニックが登場するため「これで完璧！」と思えるサイトを完成させても、またすぐに手を加える必要が出てくるため、SEO対策は常に最新の情報を収集し、最適な方法で行う必要があります。 今回は2019年現在の最新情報を踏まえ、改めてSEO対策に有効な21の方法をご説明していきたいと思います。 【2023年】SEOに強いおすすめWordPressテーマまとめ Wo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MAMPを使って複数バーチャルホストのローカル環境を設定する - Qiita
