21ドメインで取得したドメインを、メールはGsuiteに、WEBサイトはさくらサーバーで運用する方法
2019年9月10日
21ドメインで取得したドメイン（仮にxxx.comとします）を、メールはGoogleのGsuiteで、WEBサイトはさくらサーバーを使う方法のご紹介です。そもそも何故Gsuiteを使う必要があるのかという疑問ですが、Gsuiteを使うと独自ドメインでGmailを使えるからです。……
PCにしか対応していないサイトをスマホで見た時、文字の改行位置を同じにする方法
2019年9月2日
スマホには対応していないPC向けサイトをスマホで見た場合、PCで見た時の状態を縮小したような形でスマホに表示されます。しかし文字の改行位置が何故かPCで見た時とスマホで見た時とでは大きく違う場合があります。これはスマホ側で勝手に文字のサイズを調整されて起こる現象です。……
divから文字がはみ出ないようにするCSS
2019年8月30日
divに幅をちゃんと指定しているにも関わらず、何故か文字がdivの幅を突き抜けて表示されてしまうってことありませんか？原因ですが、長文で英数字を使っている場合に起こる現象になります。恐らくその英数字を日本語に書き換えると突き抜けることはないかと思います。……
ページ上部にヘッダー（メニュー）を固定した時のページ内リンクのズレを直す方法
2019年8月28日
ページ上部にヘッダーを固定したはいいものの、そうするとページ内リンクがズレちゃうんだけど……とお悩みの方結構いらっしゃるんじゃないかと思います。今回の記事ではその対処方法のご紹介をしたいと思います。……
【簡単実装】CSSのみでtableをレスポンシブ対応させる方法その2
2018年9月19日
約2年半前の記事に【簡単実装】CSSのみでtableをレスポンシブ対応させる方法をご紹介致しましたが、ご好評を頂きましたので今回はその第二弾となります。以前の記事の場合ですと、横に長いtableには対応することが出来ませんでしたが、今回はそれに対応させる方法のご紹介です。
CSSのみで実装可能ですで、スマホ時には横に常時スクロールバーが表示させて対応させます。……
とっても簡単！コピペで出来る！お問い合わせフォームの作り方
2018年4月15日
当サイトではコピペで簡単に出来るお問い合わせフォームの作り方をご紹介します。ソースと簡単な解説と併せて書いていきますが、解説なんぞ必要ない！物が欲しいんじゃ！という方は完成後の下記のファイルをダウンロードしてお使い下さい。……
ワードプレスのタイトルと内容を取得し、ホームページに埋め込む方法
2018年2月26日
ホームページ自体は静的なホームページで作られているのですが、新着情報部分だけは自分で更新したいというお客様は多いです。お客様が更新するのは新着情報部分だけなので、その場合全てをワードプレスで制作するのは割高ですし、だったら新着情報部分だけをワードプレスにして……
wrapperの背景色が適用されなくて、でも高さは指定したくない時に解決するCSS
2018年2月24日
<body>以下の全ての要素を<div>で囲み、wrapperという名前を付けてからウェブサイトを作り始める方は多いですよね。とてもオーソドックスな作り方です。そのwrapperに背景色を指定して、その中に<div>等を作ったりして色々していく内に、「あれ？wrapperの背景色途中で消えてない？」……
1つのPHPファイルで複数ページの役割を果たす方法
2017年11月6日
管理が煩雑になる為、無駄にPHPファイルを増やしたくないと考える方も少なくないのではないでしょうか？PHPはPOSTしたりGETしたりといった性質上ファイルが増えがちです。それも致し方ないことではあるのですが、1つのPHPファイルで複数ページの役割を果たす方法も実はあります。……
floatはもう古い！新時代のfloat、FlexboxでCSSレイアウト
2017年10月8日
以前、テキストを縦中央に配置する方法の記事内にて、floatを使わずにレイアウトが可能なdisplay: table-cell;のことを紹介しましたが、それ以上に便利なCSSが存在しました。その名もFlexboxです。……
Google マップやYouTubeをレスポンシブ対応させるCSS
2017年10月7日
WEBサイトに組み込む主要なサービスがレスポンシブに対応していないということが少なくありません。その代表例がGoogle マップやYouTubeです。
埋め込んでみるも、「え？対応してないの？」と思った方は沢山いるんじゃないでしょうか。
今回はGoogle マップやYouTubeをレスポンシブ対応させる為のCSSをご紹介します。……
パン屑リストとハンバーガーメニューを一体化させたものを作成してみた
2017年8月6日
スマホ対応となると、メニューにはハンバーガーメニューがよく採用されます。誰もが見たことがあるかと思いますが、白の三本の横線の入ったアレです。
そんなよく使われるハンバーガーメニューを作成してみたのでご紹介します。そのまま使って頂いてもいいですし、カスタマイズして使って頂いても問題ございません。勿論商用フリーです。……
画像に白い枠をつけてオシャレ度UPするCSS
2017年8月5日
あまり手間暇掛けず、勿論フォトショップも使わずに画像にオシャレな効果をつける方法をご紹介。CSSのみで実装出来ちゃいます。今回は画像に白い枠をつけてオシャレ度UPするCSSのご紹介です。イメージ的にはポラロイドカメラの写真のような感じでしょうか。画像に影をつけてオシャレ度UPするCSS、画像を角丸にしてオシャレ度UPするCSSと紹介しましたが、今回は第三弾となります。……
画像を角丸にしてオシャレ度UPするCSS
2017年7月30日
あまり手間暇掛けず、勿論フォトショップも使わずに画像にオシャレな効果をつける方法をご紹介。CSSのみで実装出来ちゃいます。今回は画像を角丸にしてオシャレ度UPするCSSのご紹介です。画像に影をつけてオシャレ度UPするCSSを紹介しましたが、その続編になります。……
画像に影をつけてオシャレ度UPするCSS
2017年7月29日
画像ですが、未だにフォトショップで編集してー…なんて作業を挟んでいませんか？勿論悪いことではないのですが、簡単な効果をつけることくらいならCSSだけでも充分なんです。……
マウスオーバーした場所に連動して画像とテキストを入れ替えるjQuery
2017年7月15日
マウスオーバーした時にそのマウスオーバーした要素自身を入れ替えたり、変化させるjQueryの記述はよく見掛けますが、マウスオーバーした要素とは違う別の要素を入れ替えたり、変化させるjQueryの記述はほとんど見掛けなかった為、記事を作成してみました。……
【腕時計】有名ブランドの人気の代表モデル一覧（全24ブランド）
2017年6月5日
腕時計の有名ブランドといったら様々ありますが、共通して言えることは有名ブランドにはそれぞれそのブランドを象徴する代表モデルがあるということです。この記事ではそんな各有名ブランドの代表モデルを一覧でご紹介。代表モデルというだけあって、正統派で外れのない腕時計ばかりのご紹介です。……
入力された日付の範囲が不正か否かを判別するjQuery
2017年6月4日
日付のは範囲を選択してデータを絞り込み検索したいって場面があった時に、もしも日付の形式がおかしかった場合に「日付の形式が不正です。」とアラートを出すjQueryのご紹介です。……
何番目の～、最初の～といった疑似クラスの便利な使い方
2017年4月15日
3番目の要素だけ色を変えたいだとか、最初の要素だけ色を変えたいだとかって時に、その都度classを当てるのは結構面倒臭いですよね。その数が何十個も何百個もある時なんて尚更です。……
【簡単コピペ】ログインシステムをPHPで作る
2017年4月9日
不特定多数の人に向けたコンテンツでなく、ID、パスワードを知っている限られた人にしか見せたくないコンテンツがあったとします。有料の会員制のホームページなんてのは大概そうですよね。そうしたログインシステムの作り方を今回はご紹介。実はそう難しくないPHPの記述で実装可能なんです。……
【腕時計】オメガのスピードマスター限定モデルお勧めランキングTOP5
2017年3月20日
腕時計に興味がない人でも知っている超有名ブランドといったらオメガでしょう。オメガの中でも大きく分類してスピードマスター、シーマスター、デビルの3種類がありますが、中でも特に知名度抜群なのがスピードマスターです。NASA公認の月に行った腕時計というこれ以上ないエピソードがありますからね。……
PHPである条件下の時にだけCSSを書き換える記述
2017年3月20日
では今回はphpである条件下の時にだけCSSを書き換える記述をご紹介。<style>要素の中にPHPのif文を忍ばせるといっただけのことなのですが、「こんな使い方も出来るんだ！」と驚かれる方もいるかと思います。……
要素（div等）を透過させるCSS
2017年3月19日
色がついたボックス（＝div等）を透過させるCSSです。近頃あらゆるサイトでよく使われているのを目にします。CSS3の機能がそれだけ一般的に認知されてきたのでしょうね。
デザイン的になんだかモッサリしてていまいちだなー
って時にとりあえず使ってみるとそれだけでオシャレに見えるのでとても便利です。……
CSSのみで画像をその場で回転させたり、大きな円を描くように回転させる方法
2017年3月5日
近年は画像を動的に動かすサイトも以前より少なくなってきました。時代の流れによってGif画像やFlashが淘汰されてきた影響が大きいのではないかと思われます。
ただそれでもたまに画像を動かしたいって思うことってありますよね。……
決められた文字列が入力された時にその文字列の色を変化させるjQuery
2017年2月26日
掲示板で書き込みがあった時やウェブサイトが更新された時等、何かしら変化があったとしてもブラウザを更新しなければ掲示板やウェブサイトの最新の状態は反映されません。ブラウザの更新、ショートカットキーでいうと、WindowsでいえばF5ボタン、Macでいえばcommand + Rの同時押しになりますね。……
ページを自動で更新（F5）させるjQuery
2017年2月19日
掲示板で書き込みがあった時やウェブサイトが更新された時等、何かしら変化があったとしてもブラウザを更新しなければ掲示板やウェブサイトの最新の状態は反映されません。ブラウザの更新、ショートカットキーでいうと、WindowsでいえばF5ボタン、Macでいえばcommand + Rの同時押しになりますね。……
フォームの入力欄に入力された文字数によって分岐処理するjQuery
2017年2月10日
フォームの入力欄に入力された文字数が8文字であれば形式的に合っている、逆に8文字でなければ形式的に確実に間違っている場合があるとします。例をあげるのであれば下記のようなパターンでしょうか。
20170210……
フォームの入力欄に何も入力されていない場合、送信前にアラートを出すjQuery
2017年2月5日
お問い合わせページのようなフォームに情報を入力するページで、必須項目部分の入力欄に何も入力されていない状態で送信されてきては困ってしまいますよね。ネット通販で何かを買う時、住所や電話番号を入力しますが、何か抜けがあった場合に「必須項目が記入されてませんよ」みたいな警告が出された経験誰しもありますよね。……
値段を税込にして計算するPHP
2017年2月4日
何か数字を入力してその値を送信した時に、税込にしてその値を表示するPHPの記述です。PHPを使えば入力された値を加工して表示させることが出来ます。……
レスポンシブWEBデザインで、CSSで画像を背景に設定した際に下方に固定する方法
2017年1月25日
最近の主流はもっぱらレスポンシブWEBデザインです。Googleはモバイルフレンドリーに続き、モバイルファーストインデックス（MFI）の実装を予告したりとこの流れはもう止めることは出来ません。スマホに対応させることが大変重要になってきますし、そうなると管理が楽なレスポンシブWEBデザインが最も適していると言えます。……
テキストファイルの中身が正解か否かを判定するPHP
2017年1月22日
何かクイズがあったとして、その答えをテキストファイルに記録するプログラムがあったとします。そしてそのテキストファイルの中身が正解か否かを判定するPHPが下記です。……
input type="submit"とinput type="button"の違いについて
2017年1月15日
HTMLの勉強をしていると、これとこれってどう違うの？って疑問が次から次へとわいてくるものです。それらの1つであろうinput type="submit"とinput type="button"の違いについて今回は解説します。……
PHPでformからPOSTで送信されたのかGETで送信されたのかを判別する記述
2017年1月7日
今回はPHPでformからPOSTで送信されたのかGETで送信されたのかを判別する記述をご紹介。POSTで送信された場合にはAの処理を、GETで送信された場合にはBの処理をするといった具合にそれぞれの処理の方法を変更する際に使えます。……
次のページへ ≫
