2020/05/23
【Mac】ターミナルアプリケーションの保存場所
今回は、紹介記事というよりも俺自身の備忘録としての記事になります。Macのターミナルから新規ウインドウでターミナルを開きたい場面に遭遇しました。なかなかこういった場面は訪れないかもしれないです・・・・ このときに、GUI […]
Technology
2020/05/23
[js] jqueryでtoggleClassを使ってクラスの付け替えをやってみた
皆様は、toggleClassをご存知ですか？toggleClassを使用することで、つけたいクラスがあった場合は、そのクラスが消去され、クラスがなかった場合は付与されるといった動作をしてくれます。クリックイベント時に、 […]
2020/05/22
【Mac】パッケージのインストールが簡単になる！HomebrewとHomebrew-caskの使い方
MacにおけるHomebrewとHomebrew-caskのインストールの方法を別記事で紹介させていただきました。【Mac】便利すぎる！HomebrewとHomebrew-caskのインストール方法 HomebrewとH […]
2020/05/22
[css]bootstrap4のグリッドシステムを使って横並びのブロックを作ってみた
bootstrap4のグリッドシステムを使って横並びのブロックを作ってみようと思います。bootstrapは col-数字 と記述することで足して１２になるように記述することで横並びのブロックを作成することができます。ま […]
2020/05/22
[js]jqueryで親要素を取得する方法
今回は、jqueryで親要素を取得する方法をご紹介します。親要素取れて何が嬉しいの？って思う方がいらっしゃる方がいると思いますが、例えば、メニューでサブメニューがあるかどうかなどを判別するときに使えたりします。 目次 H […]
2020/05/21
【Mac】便利すぎる！HomebrewとHomebrew-caskのインストール方法
みなさん、普段パソコンを使っていくなかで少なからずソフトウェアをインストールしたり、アップデートしたり、アンインストールすることがあると思います。そこで、インストールやバージョン管理などを簡単に行うためのパッケージマネー […]
2020/05/21
[js]jqueryで特定の要素のクラス名を取得する方法
今回は、jqueryで特定の要素のクラスを取得する方法をご紹介したいと思います。今その特定の要素がどういう状態にあるのかをクラスを決めていることが多いのではないでしょうか？今回はその状態がどんな状態で次どんな状態にしたい […]
2020/05/20
[css]文字にフェードイン、フェードアウトする方法
今回は、フェードイン、フェードアウトをcssを使って実装してみようと思います。簡単なサンプルとして、マウスで特定の要素をhoverしたら文字が徐々に消えていくというようなものと文字が出てくるものを実装してみようと思います […]
2020/05/19
[css]下付きの吹き出しを作ってみよう
今回は、cssで吹き出しを作ってみようと思います。吹き出しを今まで画像で作っていた方は、必見です。cssで記述することでコード側で色やサイズなどの調整がきくため非常に便利です。 目次 吹き出しを作るhtmlの構造 css […]
2020/05/18
テキストエディタAtomのインストール方法【Mac】
皆さんは、Atomというテキストエディタを知っていますか？今回は、テキストエディタAtomをMacにインストールする方法を紹介したいと思います。 俺は、今までEmacsというテキストエディタをずっと使ってきました。Ema […]
2020/05/17
[css]画像をcssだけでモノクロにしてみよう
画像をモノクロにするために、今まで画像編集ソフトを使っていませんでしたか？そんなことをしなくてもcssで画像をモノクロにできます。 今回は、その方法についてサンプルを使ってご紹介したいと思います。 目次 画像をモノクロに […]
2020/05/16
[js]jqueryを使って画面サイズを取得する方法
今回は、jqueryを使って画面サイズを取得する方法についてご紹介したいと思います。画面サイズを取得して何が嬉しいの？って思う方もいらっしゃいますよね。例えば画面サイズに応じて、js側からcssを変更したり文章を書き換え […]
2020/05/15
[html]日付入力をする際に期間を設定する方法
htmlを使って日付を入力するフォームを作ることがあるかと思います。その際、全ての日付を選べれてしまっては不都合だという方がいらっしゃるかと思います。そういった方向けに今回は、日付を入力する際に期間を設定する方法をご紹介 […]
2020/05/14
[Linuxコマンド]２つ以上のファイルを横に並べて表示させる方法
数値のデータと名前のデータ、集計データが別々のファイルになってて横に表示させたいというときないですか？筆者はありました。 ファイルを読み込むプログラムを別に用意して、外部引数として受けて、結合用のプログラムを作って１つの […]
2020/05/13
All in one SEOでログインユーザーのトラッキングを除外する方法
今回は、wordpressでSEO PACKをお使いの方に向けてGoogle analyticsでデータ収集をしている時に、プレビューなどのデータを収集しないようにする方法を書かせていただきます。 Google Anal […]
2020/05/12
wordpressでメンテナンス状態から戻ってこなくて困ったお話
今回は、筆者がwordpressで「現在メンテナンス中の、しばらくの間ご利用いただけません。」から動かなくなり何をやっても受け付けなくなってしまい困ったお話をしたいと思います。 wordpressでプラグインなどを更新し […]
2020/05/11
[css]ホームページに埋め込んだ Google Mapをcssだけでモノクロにする方法
皆様のホームページには、大抵場所を案内するためにGoogle Mapが埋め込まれていますね。そんなGoogle Mapですが、デフォルトの状態のデザインを使われているのが一般的ではないでしょうか？今回はそんなGoogle […]
2020/05/10
[js] jqueryでalertを出す方法
ブラウザの上からアラートを出す方法についてご紹介したいと思います。ブラウザの上からアラートを出すためには、javasciptを使用します。 今回は、ボタンをクリックしたらアラートがでるようなサンプルを使っていきたいと思い […]
2020/05/09
[css]文字を縦書きにしてホームページを和風にしてみよう
今回は、ホームページを和風にする手段として、cssで文字を縦書きにする方法をご紹介したいと思います。これであなたのサイトをより和風にすることができるようになるのではないでしょうか。縦書きをする方法は非常に簡単で、cssを […]
2020/05/08
[css]画像を影をつけて浮き出ているように見せるエフェクトの作り方
今回は、画像をHTMLで貼った時に、影をつけて画像が浮き出ているように見えるようなエフェクトのかけ方についてご紹介したいと思います。 作り方は非常に簡単で、あなたのサイトをよりかっこよく、見応えのあるものにしてくれるかと […]
2020/05/05
[css]リストの前にチェックマークを入れてみよう
今回は、リストの前にチェックマークを入れてみようと思います。以前記事で書かせていただいた三角形を入れる方法とほぼ同じと言えます。ただbeforeの要素に実現するものが違うといったものになります。リストの前を三角形にする方 […]
2020/05/04
[css]リストの前に三角系をつけてみよう
今回はリストの前に三角形がつける方法についてご紹介したいと思います。多くのサイトでリストで並んでいる箇条書きのものに三角形がついてたりするものをよく見るかと思います。ではこの三角形は画像なのでしょうか？そうではありません […]
2020/05/03
[css]cssで画像をhover時に拡大するアニメーションを作ってみよう
今回は、cssで画像にマウスポインターを合わせた時に拡大するアニメーションの作り方をご紹介したいと思います。このような画像が拡大する動きはいろんなサイトで使われていますね。今回はその画像をどうやって拡大させているのかとい […]
2020/05/02
[css]olの前の数字のデザインを変えてみよう
今回は数字付きのリストを出してくれるolの前の数字のデザインを変えてみようと思います。数字が出て順序が出てくれるのは嬉しいですが、見た目がシンプルすぎてデザインを変えてみたい方がいらっしゃるかと思います。そういった方向け […]
2020/05/01
[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法
チェックボックスを自分のオリジナルのボタンにしてみたいという方はいらっしゃるかと思います。今回はその方法についてご紹介していきたいと思います。ぜひオリジナルのボタンを作ってみてください。 目次 HTMLの構造 CSSのご […]
2020/04/28
[html]チェックボタンを文字を押した時にチェックされるようにする方法
htmlでチェックボタンを押した時に基本的にチェックボタンをクリックすることが一般的ですよね。しかし、チェックする項目の文字をクリックするとチェックされた方が利用者に便利じゃないですか？jsでクリックイベントを取得してチ […]
2020/04/28
[css]borderを２重にしたデザインのボタンを作ってみよう
今回は、borderを２重にしたデザインのボタンを作ってみようと思います。外側のborderと内側のborderを引くためのブロックを作るだけですので非常に簡単です。htmlもcssも非常にシンプルですので、ぜひ覚えてい […]
2020/04/27
[css]hoverをした時にボタンの下から背景が出るようにしてみよう
今回は、hoverをした時にボタンの下から背景が出るようにしてみる物を作ってみようと思います。一体どんなもんだ？って思うかと思いますが動作は非常にシンプルです。hoverした際に、before要素が上にかぶさってくるとい […]
2020/04/21
文字を円形状に表示するアニメーションをcssで作ろう
今回は、文字を円形状に表示するアニメーションをcssで作成する方法をご紹介します。考え方として、１つ１つの文字に対して１つずつcssを与えて、時間経過を１つずつ遅らせることで表示場所を変えていく方法をとります。ご紹介は内 […]
2020/04/17
ハンバーガーボタンを作ってみよう
今回はハンバーガーボタンを作ってみようと思います。ハンバーガーボタンとは、横線が縦に３つ並んでいるスマートフォンなどでwebページを閲覧しているときに出てくるメニューボタンのことを言います。そんな広く使われているハンバー […]
2020/04/15
google formのトリガーを使ってポップアップ出したかったけど失敗したお話
今回は、google formの起動時のトリガーを使用して、ポップアップを出したかったけど失敗したお話をしたいと思います。筆者がやりたかったことは、google formアクセス時に時間に応じてポップアップを表示させると […]
2020/03/12
wordpressのメニューを出力してみよう
wordpressでメニューを出力する方法をご紹介させていただきます。wordpressでメニューを出力する際は、まず管理画面側でメニューを作成します。作成したメニューの名前を管理画面側で設定します。指定のphpの項目で […]
2020/03/12
hoverした時に徐々に文字の色を変えよう
hoverしたときに、文字の色が変わる方法について今回は書かせていただきます。考え方は非常にシンプルです。通常時の色の設定とhoverしたときの文字の色を設定をcssに記述するだけです。ただ今回は、徐々に変化するというこ […]
2020/03/12
cssでグラデーションを作ってみよう
いろんなホームページを見ているとグラデーションがかかっているようなサイトがありますよね。画像を加工してる場合もありますが、cssでもグラデーションをかけることができます。cssでグラデーションをかけたい方は、今回ご紹介す […]
2020/03/12
[css]背景色を真ん中のところできっちり２色にして背景をツートンカラーにしてみよう
cssを使って今回は、背景色を２色設定する方法をご紹介します。cssを使ってグラデーションをつけるときの応用で可能です。hoverなどを行うときに応用として使えたりデザインの幅が広がるかと思います。ぜひ覚えていってくださ […]
2020/03/12
cssで円を書いてみよう
cssで円の作り方をご紹介したいと思います。見出しの前にワンポイント入れるなどいろんな使い方ができるようになります。 紹介は内容は以下の通りです。 目次 htmlの構造紹介 cssの紹介 まとめ htmlの構造紹介 今回 […]
2020/03/02
cssを使って背景を斜めにしてみよう
今回は、cssを使って、背景を斜めになるブロックを作り方をご紹介したいと思います。紹介内容は以下の通りです。 目次 htmlの構造のご紹介 cssのご紹介 まとめ 上記の構成でご紹介したいと思います。 htmlの構造のご […]
©狼読