2020/06/06
[css]ワークフロー図をcssだけで作ってみよう
ホームページにて、手順を説明する際に、手順１、手順２などを表記する必要が出てくるかと思います。ただワークフロー図をどうやって作っていいかわからないといったお悩みがある方が少なからずいらっしゃるかと思います。 そこで、今回 […]
狼読
~知識と情報の共有を目指して~
2020/06/05
[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方
アコーディオンメニューで開閉を行う際に、開閉されてるかわかるように下向きの矢印がついていることがないですか？開いてない状態では下向きの矢印がついていて、開くと上向きの矢印がついている状態です。 矢印をつけることで開閉して […]
2020/06/04
[css]下向き矢印と上向き矢印の作り方
今まで矢印はどうされていましたか？画像で作られていましたか？ 実はcssで作成することができます。作り方は非常にシンプルで四角形を回転させるだけといったものになります。 今回は、下向き矢印と上向き矢印の作り方をご紹介した […]
2020/06/03
[jquery]slideToggleを使ってアコーディオンを作っていよう
今回は、queryのslideToggleを駆使してホームページでよく使われるアコーディオンを作ってみようと思います。 アコーディオンは、Q&Aやメニューバーなどある程度の複数のコンテンツを一覧と表示させ、詳細が […]
2020/06/02
[jquery]切り替えタブを作ってみよう
今回はよく使われるタブを作ってみようと思います。 一々、コンテンツ縦にいっぱい並べて表示させるって大変ですよね。タブを作ってコンテンツを切り替えられたら一番いいですよね。今回はそんなタブを作って見ます。考え方は、押したボ […]
2020/06/01
[jquery]テキストボックスが入力された時にどんな文字が入力されているのかを取得してみる
今回は、jqueryを使って、テキストボックスに入力された文字の取得方法についてご紹介したいと思います。テキスト入力に入力された文字を取得することで、入力された文字がどんなものなのか、入力形式として正しいのかどうかという […]
2020/05/31
[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう
みなさま、placeholderってご存知ですか？入力欄を入力しようとした時に、説明やこうやって入れてくださいねっていうサンプルが書いてあって入力しようとした時に消えるといったものを見たことはないでしょうか。まさにそれの […]
2020/05/30
[css]リストを使ってお知らせ一覧のようなデザインを作ってみよう
今回は、ホームページに重要なお知らせの一覧をリストを使ってデザインしてみようと思います。ホームページは情報を発信するということを目的としておりますので、会社、お店などの新着情報を掲載していくことは、お店を営業していますと […]
2020/05/29
[css]文字の行間を調整する方法について
今回は、文字の行間を調整する方法についてご紹介したいと思います。長文を読んでいるときに、行間が狭い場合もう読むのいいかな？って思う方がいらっしゃるかと思います。せっかく一生懸命作ったコンテンツを読んでいただけないの非常に […]
2020/05/28
[css]文字の間隔を調整する方法
文字の間隔をcssでコントロールする方法をご紹介したいと思います。 文字の間隔が詰まっていると、文字が見にくくてホームページ自体がもう文字を読む気を無くしてしまうっていうことありませんか？ こんな状態にならないように文字 […]
2020/05/27
[html,css]文字の上に打ち消し線を入れる方法
ホームページで、文字の上に線が入ってその文字を打ち消しているものを見たことはないでしょうか？今回はその文字の上に打ち消し線をどうやって入れるのかという方法をご紹介したいと思います。 文字の上の打ち消し線の実装の仕方は、h […]
2020/05/27
【After Effects】映像制作におすすめ！Adobe After Effectsとは？
みなさん、動画編集や映像編集に興味ありませんか？Youtubeなど見ていると動画編集や映像編集って面白そうだなと思ったり、難しそうだなと思ったりしている方が多くいると思います。そのなかには、これから動画編集・映像編集をや […]
2020/05/26
[css]文字を太字にしてみよう
今回はフォントの文字を太字にする方法をご紹介したいと思います。 皆様もホームページを作成する際に、強調してみてほしいところってありますよね。そんな時、その文字を太字にして強調してみてもらうことってあると思います。そこで今 […]
2020/05/25
[css]フォントの色を変えてみよう
cssでフォントの色を変える方法をご紹介したいと思います。cssで文字の色を変えるとホームページが華やかになりますね。また、大事な文字は赤文字などで強調したいですね。 文字の色はホームページのイメージを決める大事な要素と […]
2020/05/24
[css]フォントのサイズを変えてみよう
今回は、フォントのサイズを変更する方法をご紹介したいと思います。文字の大きさを変更することで、主張したい文字とそれに対する説明など情報に強弱をつけることができますね。そんな文字サイズをどうやって変更するのかをご紹介したい […]
2020/05/23
【Mac】ターミナルアプリケーションの保存場所
今回は、紹介記事というよりも俺自身の備忘録としての記事になります。Macのターミナルから新規ウインドウでターミナルを開きたい場面に遭遇しました。なかなかこういった場面は訪れないかもしれないです・・・・ このときに、GUI […]
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
【Photoshop】いますぐ使えるテクニック！画像を合成したときの色の違和感をなくす方法
今回は、photoshopで画像の合成をするときにとても便利なテクニックになります。テクニックと言ってもとてもシンプルで今すぐに使えます。 みなさんは、画像を合成した経験ありますか？画像を切り貼りして合成していくと背景の […]
2020/05/20
[css]文字にフェードイン、フェードアウトする方法
今回は、フェードイン、フェードアウトをcssを使って実装してみようと思います。簡単なサンプルとして、マウスで特定の要素をhoverしたら文字が徐々に消えていくというようなものと文字が出てくるものを実装してみようと思います […]
2020/05/19
【Photoshop】かっこいいテキスト作り！テキストで画像を切り抜く方法
今回は、Photoshopでかっこいいテキストを作っていく方法を紹介していきます。Photoshopでかっこいいテキストを作っていく方法は色々とありますが、この記事では、画像を使ってテキストをオシャレでかっこよくしていこ […]
2020/05/19
[css]下付きの吹き出しを作ってみよう
今回は、cssで吹き出しを作ってみようと思います。吹き出しを今まで画像で作っていた方は、必見です。cssで記述することでコード側で色やサイズなどの調整がきくため非常に便利です。 目次 吹き出しを作るhtmlの構造 css […]
2020/05/18
【Photoshop】簡単に白黒変換してモノクロ画像を作る方法
今回は、Photoshop初心者の方向けの記事になっています。画像を白黒に変換したいと思うことがあると思います。そんなときに手間をかけず簡単操作で一瞬にしてモノクロ画像が作れる方法を紹介していきます。 今回は、ひと味違う […]
2020/05/18
テキストエディタAtomのインストール方法【Mac】
皆さんは、Atomというテキストエディタを知っていますか？今回は、テキストエディタAtomをMacにインストールする方法を紹介したいと思います。 俺は、今までEmacsというテキストエディタをずっと使ってきました。Ema […]
2020/05/18
[google spreadsheet]選択肢を作る方法
皆様は、Google Spreadsheetを使われたことがありますか？ウェブ上でエクセル用に使用できるため本当に便利ですよね。 今回はそんな Google Spreadsheetで案件管理などを行いたいときに選択肢を設 […]
2020/05/17
[css]画像をcssだけでモノクロにしてみよう
画像をモノクロにするために、今まで画像編集ソフトを使っていませんでしたか？そんなことをしなくてもcssで画像をモノクロにできます。 今回は、その方法についてサンプルを使ってご紹介したいと思います。 目次 画像をモノクロに […]
2020/05/16
【Photoshop】基本操作！画像を重ねて配置する方法〜画像合成の第一歩〜
今回は、Photoshopの初心者向けの基本操作の紹介になります。Photoshopで画像編集を始めていく方のなかには、画像を合成して作品を作っていきたいなと思っている方もいると思います。画像の合成の第一歩は、画像（レイ […]
2020/05/16
[js]jqueryを使って画面サイズを取得する方法
今回は、jqueryを使って画面サイズを取得する方法についてご紹介したいと思います。画面サイズを取得して何が嬉しいの？って思う方もいらっしゃいますよね。例えば画面サイズに応じて、js側からcssを変更したり文章を書き換え […]
2020/05/15
[html]日付入力をする際に期間を設定する方法
htmlを使って日付を入力するフォームを作ることがあるかと思います。その際、全ての日付を選べれてしまっては不都合だという方がいらっしゃるかと思います。そういった方向けに今回は、日付を入力する際に期間を設定する方法をご紹介 […]
2020/05/15
【Photoshop】基本操作！画像の拡大・縮小の方法
今回は、Photoshop初心者向けの基本操作である「画像の拡大・縮小」の方法を解説していきたいと思います。 「画像の拡大・縮小」は画像編集していくうえで必須の操作になってきます。Photoshopにおける「画像の拡大・ […]
2020/05/14
[Linuxコマンド]２つ以上のファイルを横に並べて表示させる方法
数値のデータと名前のデータ、集計データが別々のファイルになってて横に表示させたいというときないですか？筆者はありました。 ファイルを読み込むプログラムを別に用意して、外部引数として受けて、結合用のプログラムを作って１つの […]
2020/05/13
All in one SEOでログインユーザーのトラッキングを除外する方法
今回は、wordpressでSEO PACKをお使いの方に向けてGoogle analyticsでデータ収集をしている時に、プレビューなどのデータを収集しないようにする方法を書かせていただきます。 Google Anal […]
2020/05/12
【Photoshop】雲や霧に使えるブラシの作り方
今回は、ブラシ定義しておくと雲や霧を表現するのにとても便利な雲ブラシの作り方を紹介します。 photoshopで作品を作っていくと雰囲気を少し出したくなることがあります。そのようなときに雲や霧を表現できるブラシを用意して […]
2020/05/12
wordpressでメンテナンス状態から戻ってこなくて困ったお話
今回は、筆者がwordpressで「現在メンテナンス中の、しばらくの間ご利用いただけません。」から動かなくなり何をやっても受け付けなくなってしまい困ったお話をしたいと思います。 wordpressでプラグインなどを更新し […]
2020/05/11
【Photoshop】初心者必見！画像を左右反転させる方法
今回は、Photoshop初心者向けの記事になります。 画像編集をしていくと画像を左右反転させたいと思う場面が出てくると思います。そんなときに知っていれば簡単にできてしまう画像の左右反転ですが、初心者のなかにはどうやって […]
2020/05/11
[css]ホームページに埋め込んだ Google Mapをcssだけでモノクロにする方法
皆様のホームページには、大抵場所を案内するためにGoogle Mapが埋め込まれていますね。そんなGoogle Mapですが、デフォルトの状態のデザインを使われているのが一般的ではないでしょうか？今回はそんなGoogle […]
©狼読