ホームページのことを中心にためになるかもしれないことをいろいろと書いています。 ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。 大阪のホームページ制作YCOMトップ ホームページ運営ブログ 今日は超絶便利な、入力ホームでカレンダーを利用するスクリプト「datepicker」について、特定の日を選択させない方法を紹介します。 Datepicker | jQuery UI Datepickerとは 「Datepicker」はカレンダーからマウスで簡単に日付を入力できる機能を実装できる便利なjQueryスクリプト、 マウスだけで操作できる、カレンダーなので直感的で分かりやすい、また入力される日付の形式を統一できるという利点があります。 さらに、今回紹介する選択できない日を設定することで、あらかじめ入力制限をすることができます。 クライアントからはこの

表示結果 Dummy Text 解説 display: flex;(CSS:4行目) p要素をflexコンテナ化することで、内包するテキストがflexアイテムになります。 align-items: center;(CSS:5行目) flexアイテム（p要素内のテキストと、before,afterで生成された疑似要素）を上下中央に配置。 flex-grow: 1;(CSS:9行目) 左右の疑似要素（ボーダー）の幅を、空いているスペースいっぱいまで広げています。 height,background(CSS:10,11行目) heightでボーダーの太さを、backgroundで色を指定しています。 display: block;(CSS:12行目) 疑似要素は、displayプロパティにblockやinlineを指定しないとIEで表示されません。 margin-○○: .4em;(CSS:15

HOMEブログウェブ制作slickを使ったスライドショーのカスタマイズ例3つ。 | ネクストページブログ こんにちは、エンジニアのアンドレです。 最近案件でslickを使ってスライドショーのカスタマイズを3件ほど行ったのですが、その際に多少調べたり詰まったりしたので、備忘録も兼ねてこちらでご紹介したいと思います。 幅固定での中央寄せ 中央寄せ用に「centerMode」というオプションがあり、それを「true」にすれば幅可変の中央寄せは簡単にできます。 しかし、例えばPC表示でコンテンツ幅が決まっていて、その幅分を確保して中央寄せにしたい場合に、なかなかうまくいかずに苦労しました。 結論から言うと、オプション「variableWidth」に「true」を指定し、スライドさせる要素（下の例では「.item」）に固定幅を指定することで実現できました。 See the Pen 幅固定での中央寄せ

【発表】WP テーマ選びで悩んでる？ 日本語テーマの比較はこちら。 デモサイトを見ながら使い方とできることを比べられます 【テーマ選び方】8つ比較 「Bones」は、WordPressの「ブランクテーマ」とか、「スターターテーマ」って呼ばれる、カスタマイズ前提のテーマの一つなのだけど、そのカスタマイズのしやすさが他のブランクテーマと比較して圧倒的です。（当人比。ちなみに、その他のブランクテーマは下記リンク先を） 密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ 「Bones＝骨ばっかり」というその名が示す通り、「骨組み」として、自分好みに肉付けしやすく、オリジナルのテーマ作成をビューンとひとっ飛びに高速で進められます。 簡単にまず、優れた特徴をあげてみましょう。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法

こんにちは、@yoheiMuneです。 数値を3桁カンマ区切りにしたいという要件を、JavaScriptでどのように実現するのかについて、ブログに書きたいと思います。 目次 解決したいこと 「数字は3桁カンマ区切りで表示したいんだよね〜」と言われた時に、サクッと対応できる方法をお伝えしたいと思います。 方法1：toLocaleString()を利用 実装方法 もっとも簡単に対応するなら、toLocaleString()関数を使うと便利です。数値型の変数に利用できます。 var num = 12345; num.toLocaleString(); // "12,345" toLocaleString()はロケール（=言語、国、地域、などを表現する、例：ja）に合わせた数値表現を行うためのメソッドです。ロケールによって表示が異なりますが、日本語や英語の場合には3桁カンマ区切りとなります。 ブラ

YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig

押したくなるボタンはどれ？ ぷるぷる動くボタン① ぷるぷる動くボタン② 上下に揺れるボタン 左右に揺れるボタン 上下左右に揺れるボタン もっちり動くボタン ぺこぺこ凹むボタン ぱつんと跳ねるボタン ぶるりと震えるボタン ドキドキしてるボタン まずは基本のボタンのソースコード ただのボタン box-shadowで影を落としたシンプルなボタンです。 文字の前のマークは「Font Awesome」のアイコンフォントを使用しています。 HTMLコード <a href="リンク先のURL"><span class="button-simple">ただのボタン</span></a> CSSコード .button-simple { position: relative; font-weight: bold; padding: 5px 15px; margin: 0px 5px; border-radiu

ホームページをサイト丸ごと保存・ダウンロードする方法をご紹介します。サーバー移行の際などに旧サーバー情報がわからない時などに便利です。 1ページだけ保存したい場合 1ページだけ保存したい場合は非常に簡単で「Google Chrome」があれば保存する事が出来ます。ただこの場合、ファイルをそのままダウンロードするわけではなく、相対パスを絶対パスに変換するなどしてリンク等を保持します。 Windowsの場合 保存したいページChromeを開いて「…（メニュー）」→「その他のツール」→「名前を付けてページを保存」、又は「Ctrl + S」でもOKです。

JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ

ワードプレスには文章の改行を自動で挿入してくれたり段落にまとめてくれる機能があります。 実際にテキストエディタで書いた文章の終わりでEnterキーを押せば、投稿した記事もその位置で改行されてますよね？ こういった機能がワードプレスには標準装備されているのですが、場合によってはありがた迷惑というか意図しない動きを生むことがあります。 今回はこちらを無効化する事によってワードプレスの自由度を上げていこうと思います。 ワードプレスの自動整形機能とは？ 運用上のメリット 上記でも触れましたが、ワードプレスはエディタ内での改行をうまくページに反映させてくれようとします。 例えばエディタで このように記述してプレビューを確認してみましょう。 すると、 このような形で文章のまとまりをpタグで囲い、改行を入れたところにbrタグが自動で挿入されているのが分かるかと思います。 制作におけるデメリット これだけ

WordPressのテーマによっては最初から蛍光ペン風のマーカーが付いていることがあります。 その場合は設定する必要はありません。 設定されていない方向けに書いています。 蛍光ペンマーカーを設定（CSS） まずはCSSの設定からスタート。 蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。 linear-gradient(transparent 線の太さ, 線の色 0%) このlinear-gradient属性、グラデーションを使って設定します。 （）内の線の太さと線の色を好みの色と太さに変更するだけでOK。 線の太さと線の色の意味は下の通りになります。 線の太さ 黄色の蛍光ペン(太) .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } 黄色の蛍光ペン

はじめに 前記事でこんなものを書いていました。 【前記事】ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字 ☝上記記事を応用して出来ることが増えたのでまた記事を書きました。 text-shadowのドロップシャドウって薄くない？ text-shadowって、ぼかしも利かせられて手軽にドロップシャドウ出来るのが便利ですよね。 でも、個人的にこれだと少し影が薄いかなーと思っていました。 ※文字色指定などは省いています。

サイト構築をしていると様々な場面で条件分岐が必要になることがありますよね。特にレスポンシブデザインになってからはウィンドウ幅による条件分岐をよく使います。 CSSであればメディアクエリーでやればいいのですが、JavaScriptの場合にはどうしていますか？普通にウィンドウ幅を取得して分岐ということが多いかと思いますが、今回は私なりの方法をご紹介します。 まず正確なウィンドウ幅を取得します。 ウィンドウ幅を取得するにもスクロールバーを含めたり含めなかったりと色々な方法がありますが、今回はCSSのメディアクエリーの反応と同じにするため、スクロールバーを含めた値を取得することにします。ここが間違っているとその先が全部狂ってしまうので、以下の記述で正確な値を取得しましょう。 $windowWidth = window.innerWidth; javascriptでのwindow.innerWidt

Webサイトにおいて、特定の高さまでスクロールすることでヘッダーの色が変更される記述の仕方を記載していきます。 「ヘッドのリボンの色を変更する女の子」 使用されるケース 「ヘッダー（グローバルメニュー入り）の表示を上部に固定する」かつ「ヘッダーを透過させてメインビジュアルに被せる」ということが考慮されたサイトに主に使われる手法となります。 多くの場合は、メインビジュアルの画像や動画に「夜景」など暗めのものが使用されています。 メインビジュアルの面積を多く取るためにヘッダーの色を薄く透過して被せるのですが、スクロールによりメインビジュアル部分が画面上に消えてメインビジュアルより下のコンテンツとヘッダーが重なってしまうと、視認性が悪くなってしまいます。 これを解消するため、「スクロールしてメインビジュアル部分が画面上に消えた際はヘッダの背景色を変更する（多くの場合は透明度を下げる）」といった機

簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード 公開日 2014年3月28日 最終更新日 2024年3月18日 著者 Motohiro Tani とても簡単に設置できるメールフォームを無料でダウンロードできます。 制作する上での基本思想は、 入力する人がストレスを感じることなく快適に入力～送信までできること。 なるべく簡単に設置でき、正常にメール送信がされること。(標準状態で) 既存のページに組み込みやすいこと。 デザインの変更などがしやすいこと。 となっております。上のものほど優先度が高いものになります。 上記1と2を特に重視している関係上でメール本文欄のカスタマイズは難しいかもしれませんが、そのあたりは設置者のスキルやカスタマイズ依頼などでカバーしてください。(宣伝) 現在の最新バージョンは2022年12月22日公開の8.1です。 参考ページ：プログラムをアップデート

みなさんこんにちは！ワトスンです。 今回は、、 「slick.jsを使用してスライダーを実装したいが、スライドが滑らかに流れない。。カクつかずに滑らかに流れすにはどうすればいいの？」 という疑問に答えます。 slick.jsを滑らかに動かした例 実際にslick.jsを使用して複数の画像を滑らかにスライドさせた状態をお見せします。 デモサイト このように滑らかにスライドさせていきます。 slick.jsでスライドを滑らかに動かすオプション 「slick.js」には様々なオプションがあり、とても便利です。 「slick.js」の詳しいオプションの使い方は「slick.jsのオプション一覧」からご確認ください。 今回はこのオプションの「autoplaySpeed」「cssEase」を使用してスライドを滑らかにしていきます。 実際にjsファイルに記述する場合は以下のように記述します。　＊clas