CSSテキスト無限ループアニメーション

CSSだけでテキストを無限ループアニメーション可能です。実際のコード例と解説、注意点などまとめて掲載しています。

ChatGPTを使用してWordpressのタグにカラー設定項目を追加する方法を聞いてみた

ChatGPTを使用してWordpressのタグにカラー設定の項目を追加する方法を聞いてみたら、functions.phpに記述するPHPコードがばっちり返ってきました。

URLを間違えたので正しくリダイレクトさせるJavaScript (はてなブログの場合)

よくやってしまいがちな日本語タイトルのままのブログ記事投稿。 一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。 ですので、気づいたらURLを正しく半角英数の自然なものに変更し、JavaScriptを使ってリダイレクトさせています。 その際につけてもらったはてなスターが消えてしまうのは残念で申し訳ないところではありますが、いた仕方無し。 具体的な方法を知りたい方は是非当記事をご覧頂ければ幸いです。

ContactForm7の条件分岐つきフォームで確認画面実装

WordpressでContactform7を使用した際の確認/完了画面にMulti-Step Forms、条件分岐にConditional Fieldsを併用した際のうまく動かない問題解決方法。

マイク問題？M1チップ搭載MacBook Air 2020年モデルの音声ノイズ検証と問題解決方法

AppleシリコンことM1チップ搭載のMacが2020年発表されて話題になりました。 // 最新 Apple MacBook Air Apple M1 Chip (13インチPro, 8GB RAM, 512GB SSD) - ゴールド 私は長らく2014年のMacbook Proを使っていましたが、ちょっと古くなったので売却。 今回M1チップのパフォーマンスがどうやら凄いらしいということで惹かれて新規購入しました。 巷で言われているように、バッテリーの持ちや動作の軽快さは非常に素晴らしいもので、M1にネイティブ対応していないアプリの互換起動も特に問題なく満足していました。 ただ一点、マイクに…

コードに使う大なり小なり、各かっこなど記号の読み方

や$#"!'などの記号の正式名称、正しい読み方" title="" class="hatena-fotolife" itemprop="image" /> コーディングには「<>」←こんな大なり小なりに使う記号や「{}」←こんな波型のかっこ、「」←こういった角ばったかっこなど色々な記号が登場しますよね。 他にも「:」や「;」、「"」「'」なんかも常用します。 このあたりいつも使っているけれどなんと呼べばいいのか、正しい読み方はなんなのかを今回紹介したいと思います。 いつもレッスン時も伝わりやすいよう「ちょんちょん」とか「タグのカッコ」とか呼んでいますが、正しい読み方も覚えてさらっと使えるように…

Kindleセール最大50％割引のWeb、デザイン電子書籍をピックアップ(2021年2月)

Amazon.co.jpのKindleストアで50%オフのセールが開催されています。 インプレスグループフェアとしてIT・デザイン・ビジネス・実用などの電子書籍が2021年2月いっぱいまでお得に購入できるので、特に当ブログ対象のWeb/IT/デザイン系の方、学習中の方は是非これを機に欲しかった書籍をゲットして頂ければ幸いです。

Photoshopで簡単に矢印を書く方法

Photoshop CCで簡単お手軽に矢印を描く方法をキャプチャを交えて解説しています。 Adobe CSからCCまで同じ方法で対応可能です。現在Photoshop 2021バージョン22を用いての解説となっています。

Kindle Unlimited読み放題活用術、Webデザイナー・エンジニアの場合

Amazon Kindle UnlimitedをWebデザイナー・エンジニア視点での活用の仕方や、料金・役立つ読み放題の書籍・雑誌などをご紹介。

Web制作を始めるならまず入れるVScode拡張機能9選

Visual Studio Code、軽量で拡張性があって非常に使いやすい無料のコードエディターですが、初心者の方には少しとっつきにくい印象があります。 インストール直後は英語設定 プレビュー機能がない Microsoft製なのでWindowsのイメージ 個人の主観かもしれませんが、MicrosoftのOfficeに通じるような少し事務的というか、エンジニアっぽいお堅いイメージです。 ▼AtomとVScodeの公式ダウンロード画面。Atomかわいいおしゃれに対して、VScodeはものすごく普通。 ただ、2、3年前くらいに巷でやたらと「VScodeに乗り換えました！」「VScodeがサクサク」な…

社会人も可！学割でMacやイラレ/フォトショ等Adobeソフトを安く買う裏技

デザイナー必須のイラストレーターやフォトショップなど、Adobe Createve Cloudのソフトウェア群。通称アドビCC。 かなり高額のソフトなので、定価よりなるべく安くなる方法で賢く購入していきましょう。 ▼月額のサブスクリプションの他、12ヵ月版がAmazonで販売されてます。 // Adobe Creative Cloud コンプリート 12か月版 Windows\/Mac対応 オンラインコード版 一年に何度かセールで安く買える時もありますが、それ以上に「学生・教職員向け」の学割版が安かったりします。 そんな事言っても、学生じゃないし、、社会人だし、、と嘆く方に朗報。 今回紹介する…

【BASE/Shopify/カラーミー】ネットショップ開設するならどっち？ASP/オープンソースとは【EC-cube/Welcart】

ネットショップを開きたいという場合、自社サイトに組み込む方法や他社の提供しているサービスと連携する方法など、いくつかパターンがあります。 ショップ開設のご相談の際に、ざっとパターンを比較してお話することもあるので、今回あらためて比較・解説記事としてまとめてみたいと思います。 これからネットショップを開くことに興味をお持ちの方や、ECサイトをどうやって作るかに興味を持たれた方の参考になれば幸いです。 ではやっていきましょう。

HTMLタグ・CSSプロパティの英語の読み方・発音

width、height、align、radius、relativeなど間違いがちなHTML/CSSの読み方を、一般的な読まれ方と実際の英語の発音などと照らし合わせてWeb現場で使えるようまとめて解説しています。

【参考サイト】フリースタイルエンターテイメント

面白いサイトがないかリサーチしていると、ふと、「お！」と目を引かれるサイトがありました。 ▼株式会社フリースタイルエンターテイメントというWeb制作会社のホームページです。 www.freestyle-entertainment.co.jp フリースタイルエンターテイメントさんは、数多くの制作事例があり、リクナビ新卒採用の業界エリア部門4年連続1位を誇る人気企業。 そのフリースタイルエンターテイメントさんのコーポレートサイトがつい先日リニューアルしたということで見てみたのですが、、、

VScodeの設定を同期してWin/Mac拡張機能や設定を揃える

VScodeの設定の同期機能を使えば、拡張機能やUI設定などを、新しいデバイスへまるごと移行出来ます。 簡単便利な機能をキャプチャを交えて解説した記事ですのでお役に立てれば幸いです。

【検証・解説】Youtube埋め込みはサイト評価を下げる恐れ有り！要一工夫、読み込み遅延。

Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説します。 data属性を利用したjavascriptによる遅延読み込みと、代替画像に置き換えてクリック後に読み込ませる方法を解説しています。

#2プラグイン無しでWordpressのマルチサイト化「導入実装マニュアル・XSERVERでの手順例あり」

前回に引き続きWordpressのマルチサイト機能をご紹介したいと思います。 ▼前回Part.1ではマルチサイト化におけるメリット・デメリットをご紹介しています。 webabc.hatenablog.jp Part.2の今回は実際に導入する手順を解説していきます。 Wordpressの多言語対応などでマルチサイト化しようと今から実践・検討される方の参考になれば幸いです。 ではやっていきましょう。

#1プラグイン無しでWordpressのマルチサイト化「メリット・デメリット考察」

Wordpressには標準でいくつもサイトを運営できるマルチサイトの機能が備わっています。 通常は無効化されているこのマルチサイト機能を使うと、ひとつのWordpress本体データと、ひとつのデータベース内に異なるサイトを複数持つことが出来ます。 今回はとあるご相談者がサイトのの多言語対応をしたいというご要望だったので、マルチサイト化による方法をとらせて頂きました。 マルチサイトはこれまであまり触ってこなかったので、今回調べてわかった導入の手順など記しておこうと思います。 手順以外にまずPart.1ではメリット・デメリットなど考察もしていきますので、マルチサイト化について検討されてる方のお役に…

【Wordpress】記事ごとにhead内にタグを追加するカスタマイズ方法

Wordpressのカテゴリーで分けた多言語化サイト化のご相談を頂きました。 その際に多言語に対応したメタタグを各記事ごとに挿入する必要があったので、調べた内容を記したいと思います。 多言語化とは関係なく、記事毎にheadタグ内に何かしら記述を挿入したい時に役立つ情報かと思いますので、ご参考頂ければ幸いです。 ではやっていきましょう。

#2 Wordpress独自テーマ作成によく使う関数や記述。「テンプレートタグ一覧」

Wordpressのテーマファイルの各テンプレート内で使う独自の関数をテンプレートタグと呼びます。 例えば記事ループ内で本文を表示させる「the_content()」などもテンプレートタグ。 前回記事で「Wordpressの独自テーマ作成に良く使う関数や記述」ということで、テーマ作成の際のstyle.cssへの記述やfunctions.phpへ書く関数なども取り上げたので、今回は良く使うテンプレートタグのみピックアップして取り上げたいと思います。 ▼前回記事は独自テーマ作成の流れに沿った解説多めの内容となっています。 webabc.hatenablog.jp オリジナルのテーマ作成をしている方…

Wordpress独自テーマ作成によく使う関数や記述。カスタマイズ頻出文

Wordpressの独自テーマ作成時、カスタマイズによくつかう関数や記述をまとめました。 自分もよく何だっけなと調べながら使用する事も多いので備忘録です。 独自テーマ作成の流れに沿って記述しているので、是非テーマの作成の際などお役立て頂ければと思います。

【Webデザイン】#2 コーディングの思考の流れ。スマホサンプルサイト作成【参考】

前回パート1から引き続きのコーディングの思考の流れを具体的に言語化して実践していく記事です。 ▼#1からご覧になられる方はこちらからどうぞ。 webabc.hatenablog.jp 模写コーディングにつまづく方向けに、より簡単なサンプルサイトデザインを作成しました。 そのサイトデザインの画像データを元に、実際にどういった思考の流れでコーディングしていくかを解説していきまず。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になってますので、高度な事を期待される方はご容赦ください。 では、やっていきましょう。

【Webデザイン】#1 コーディングの思考の流れ。練習サンプルで実際にやってみた。【参考】

以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。 webabc.hatenablog.jp webabc.hatenablog.jp 今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になっているかと思います。 高度な事を期待される方はご容赦ください。 模写含め、コーディングのやり方など最初の一歩につまづく方のお役に立てば幸いです。 では、やっていきましょう。

【Chrome拡張】ココナラビデオチャットに画面共有機能追加出来る拡張機能を開発しました。

ココナラで提供されているビデオチャット機能では現在画面共有の機能がありません。 「得意を売るならココナラ♪」のCMでおなじみ。 ビジネス、趣味、ただ話し相手になりますといったものでも売り買い出来るアプリ・サービス、ココナラ。 私のようなWeb技術のオンラインレッスンにはもちろん、ビジネスの相談、占い、手芸、様々な場面において、画面をシェアして一緒に見ながら話せるのと話せないのは大違いです。 そこで独自にココナラのビデオチャットに画面共有機能を追加するGoogleChrome拡張機能を作成しました！ coconala.com

【PHP】文字の置き換え、str_replace()と正規表現置換preg_replace()

PHPで文字列の置換えを実現する関数、str_replaceと、正規表現を使ったpreg_replace()についての解説記事です。 str_replaceは日本語でも置換え可能です。

【コーディング練習用】スマホサイト版Webデザイン入門オリジナルデザインテンプレート

▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。 webabc.hatenablog.jp 今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。 よくある模写コーディングにおすすめのサイト以上に構造がシンプルになっていますので、是非Webデザイン入門、コーディング初心者の方のスキルアップにご活用頂ければと思います。

【コーディング練習用】Webデザイン入門オリジナルデザインテンプレート

模写コーディングに挑戦する前に、さらにシンプルなhtml/cssでコーディングできる練習用オリジナルデザインテンプレートを作成しました。 非常に簡素な構成なので、初心者の方のWebサイト作成入門に最適です。

【Chrome拡張機能】模写コーディングのやり方が分からない方へ…必須な拡張機能5選＋α

前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト＋αご紹介しました。 ▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。 webabc.hatenablog.jp ただそれでも初挑戦するような方はやり方が分からないという人も多いと思います。 今回は模写コーディングをする上で役に立つ、必須ともいえるGoogleChromeの拡張機能を紹介させて頂きます。 これから模写コーディングに初挑戦するという方、行き詰ってる方のお役に立てれば幸いです。 ではやっていきましょう。

難しくない！模写コーディング超初級おすすめサイト3選+α

「模写コーディングって難しい」、「やり方が分からない」 と、HTML/CSSを学んだ次のステップでつまづく方は多いと思います。 まず、模写コーディングとは 「既存のサイトの見た目をそっくりそのまま、自力でHTML/CSS/JSなどコーディングをして再現する」 ことをいいます。 ▼これから独学でWebデザイン入門されるという方にもおすすめの勉強法です。webabc.hatenablog.jp Webデザイン脱初心者の登竜門として、模写コーディングは立ちはだかっています。 その原因として、模写でおすすめされるウェブサイトの多くが、0から入門された初心者にとってはレベルの高いものが多いせいだと思いま…

【CSS】ハンバーガーメニューPart.3「動くアイコン5種、サンプルコード解説」

CSSのみで実装したハンバーガーメニューの動きのバリエーション5種をサンプルコードとともに解説しています。 2本線のメニューアイコンから、定番の3本線ハンバーガー。ステンシル風、ブラインド風の動きなど紹介しています。

【初心者】Webデザイン入門、独学で何から学べばいいか分からない人へ【未経験】

Webデザインを独学で始める方で、まず何から手をつければ良いか分からない方がいらっしゃると思います。 HTML/CSS等のWebデザイン入門系の参考書を手に取って一通り読み終えても、そこから「独学を進めることが出来ない…」という相談も実際のレッスン生の方でいらっしゃいました。 今回はWebデザインを一から学ぶ方向けに、独学で何からどういう手順で学べばいいか、例を挙げてお話したいと思います。

【HTML/CSS】Web制作入門記事まとめ、コーディング基礎固め！

前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。 webabc.hatenablog.jp 年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。 Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。 入門したての方や、学習中の方などのお役に立てれば嬉しいです。 是非ご参考ください。 //

2020年よく読まれた記事、エンジニアブログ運営50記事まとめ

レッスンの質問への返答や、案件での調べ物などメモがわりに始めた、当ABCウェブエンジニアblog。 10月初旬から2020年の大晦日の当記事執筆時点まで約3ヶ月。ぼちぼち更新して50記事弱となりました。 3ヶ月のアクセス合計は5000弱。 始めた当初はアクセスも少なく、一時はてなブログからのアクセスが一瞬増えた時期がありましたが、現在の流入の85%ほどはGoogleから。Yahooやその他も合わせると約90%が自然流入となっています。 Web技術のブログを書いてるので、何か困った際に検索してお越しいただき、お役に立ててるなら書き甲斐を感じますし、非常に嬉しいです。 今後もお役に立てるように、こ…

【Laravel】.envファイルの環境変数に半角スペースを含む方法

Laravelで環境変数を設定する「.env」ファイル。 サイトの基本情報やデータベースの接続情報はじめ、サーバーごとに異なる変数設定を読み込むことが出来ます。 この.envファイルに設定した変数は以下のような使い方で他のファイルで呼び出して使用することが出来ます。 ▼.envに環境変数を定義する記述 APP_NAME=設定する値 ▼bladeファイル内で.envに定義した環境変数を呼び出す方法 <p>{{ config('app.name') }}</p> この環境変数に半角スペースを含む値を設定するとエラーが出てしまいます。 「APP_NAME」などは特にサイトのタイトルとして使いたかった…

IEではline-heightが効かない？！Internet Explorer対応の見解

Webブラウザ界の問題児Internet Explorer、通称IE。 サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。 こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応範囲とするか、はっきりさせておくのが大事です。 今回はIE11においてline-heightが効かずデザインが崩れているという事例があったので、IEへの対応についての見解を含め、解説していきたいと思います。

【HTML/CSS】中央揃えにしたい!!のに出来ない時に見る記事 Part.3「absoluteとcalc()でのセンタリング編」

要素を中央揃えや自在に配置したい時の方法としてcalc()関数を使ったテクニックを解説しています。 positionと組み合わせて幅広いレイアウトが可能なので是非ご参考ください。

【HTML/CSS】初心者向け！コーディングでよく使うタグ、プロパティまとめ

今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。 よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸いです。 模写コーディングなどする際にコーディングが捗るよう、いつでも見返せるようブックマークなどして是非活用してください。

【Laravel】直接DBへ追加！php artisan tinkerでユーザー作成

PHPフレームワークLaravelでは「tinker」という対話型のデバッグ機能が標準装備されています。 $ php artisan tinker こちらのコマンドを使ってターミナル等からLaravelアプリケーションに直接処理をすることが出来ます。 Eloquentクラスやその他のクラスの読み込むことも可能なので、動作確認をしたり、アプリケーション上にない処理をしたり、色々な事が出来ます。 今回実際に既に稼働済みのサイトで、ユーザーの新規追加が管理画面などで出来ない仕様にしてるサイトがあり、そちらのサイトへtinkerを使用してユーザー追加をしました。 その処理の流れを備忘録として記しておき…

【SEO】ブログのサムネイルやSNSのOGP画像に最適な縦横アスペクト比・推奨サイズ

TwitterやFacebookなど大手SNSのアイキャッチともいえるOGPに最適とされる画像の縦横比は何対何がベストなのか。 今回はOGPに設定すべき画像の縦横の比率(アスペクト比)について調査してみたので、記したいと思います。

【SEO】URLの正規化、www有無・httpとhttpsの統一方法。エックスサーバー設定例有り

SEOのひとつに、サイトのURLの正規化というものがあります。 サーバーによって初期設定では同じ内容で別のURLが混在してしまっているので、wwwの有無、SSL接続の有無を統一することを言います。 http://サイト名.com https://サイト名.com http://www.サイト名.com https://www.サイト名.com 上記のように1つのページに対していくつものURLが存在する状態のままだと、検索エンジン評価が分散してしまい、SEOに悪影響となってしまいます。 URLの正規化とはこういった同じ内容のページのURLを統一することを指します。 今回はこのURLの正規化の方法…

【HTML】サイトにファイルのダウンロードリンクを貼る方法

ウェブサイト上でユーザーに対して何らかのファイルのダウンロードを促す時があるかと思います。 今回はそういったダウンロードリンクを貼る方法について、記したいと思います。

【CSS/Google Fonts】フォントが太字にならない場合の対処法。テキストシャドウ＆ウェブフォント。

font-weight: boldが効かない！そんな、思うように文字の太さを調整出来ない時、太字を適用させる対処法「text-shadow」を用いる方法と「ウェブフォント」を用いる方法、2つをご紹介します。

【VScode】GitLensがサイドバーから消えた場合に復活させる方法

動作が軽快かつ、様々な拡張機能が使えて便利なコードエディタ「Visual Studio Code」、通称VScode。 とても使いやすいですが、たまに予期せぬ動作で困ることもあったりします。 今回はGitLensがサイドバーから消えて困った時の対処法です。

レスポンシブのviewport設定とスマホの解像度の理解

レスポンシブにスマホ対応する際にviewport設定が何故必要なのか、理解するためにはスマホの画面の解像度がどのようになっているか理解する必要があります。 この設定についての理解がおろそかなまま、レスポンシブなコーディングをしようとしていてつまづいている方がいらっしゃったので解説したいと思います。

【HTML/CSS】CSSで斜線ストライプ背景、liner-gradient()をマスター。完全解説。

CSSでは背景にlinear-gradient()関数を用いてグラデーション表現が可能です。 二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。 developer.mozilla.org このグラデーションを応用して、色の変化を急にすることで、斜線やストライプの表現ができます。 サンプルのコードなどは調べると他でもたくさん出てくるかと思いますが、どういう仕組みでそうなるのか、すっきり理解できていないという方向けに解説したいと思います。

【HTML/CSS】ハンバーガーメニューPart.2「CSSのみでシンプル実装コード編」

CSSだけで簡単ハンバーガーメニューの実装コード例をご紹介。JS無しで各ブログサービスにも導入しやすい、お手軽な方法です。 アイコンのアニメーションについても説明しています。

【Google Map】API無しでサイトへGoogleマップを埋め込む方法

多くの方がご愛用の「Googleマップ」。 お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。 このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Maps API」を使った少し手順のかかる方法の2種類があります。 後者のGoogle Maps APIを使用する方法だと、デザインをサイトに合わせて編集出来たり、複数の場所を一度にマーカー表示させたり、様々なカスタマイズが可能ですが、こういったAPIの利用に慣れていない方には少し手もかかり難易度が高くなります。 今回は前者のシンプル…

【CSS】2020年版ベンダープレフィックスの必要・不要&自動付与の方法

2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。 ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。 「vendor」ベンダー…各ブラウザの提供者のこと。 「prefix」プレフィックス…頭につける定型文のようなもので「接頭辞」などと訳されます。 個人的にはほぼBootstrapを利用するのでベンダープレフィックスについてあまり気にせずコーディングして、最終段階でクロスブラウザチェックの際におかしい部分があれば対応するという流れにしていて、特に近年問題はありませんでした。 多く…

【HTML】リンクから件名や定型文を入れてメールソフト起動する方法

aタグのmailto属性を使って件名や本文定型文、CC、BCC入力済の状態でメールソフトを起動する方法を解説しています。WebサイトのリンクからOutlookなどOS標準メーラーが起動するようにできます。

Slick.jsやSwiper.js等が全く動かず小一時間無駄にした話

Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン。 ウェブのフロントエンド制作においては必須クラスに重宝すると思います。 今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと思って導入していたら ｢あれ？動かない、、、｣ コンソールを見てちょいちょい出てるエラーに対処しても動かず。 表題の通り、小一時間必死に調べて無駄に過ごしました。。 解説記事とか書いていた手前でお恥ずかしい。 原因はあっけないものでしたが、今後もし誰かが同じように小一時間を無駄に過ごす事の無いよう、備忘録として記しておこうと思います。

【Laravel6】ColorfulBoxサーバーへ自力デプロイ

レンタルサーバーは安定した老舗も良いですが、このところはより高速な「LiteSpeed」採用やWordpress特化型など、新鋭のサーバーも人気になってきています。 例えばよく聞くクラウド型レンタルサーバーだと 老舗エックスサーバーから登場のWordPress専用クラウド型「wpX Speed」 月額880円からの高速LiteSpeed採用クラウド型「mixhost(ミックスホスト)」 そして今日の本題、「ColorfulBox（カラフルボックス）」 カラフルボックスはサーバー構成や料金プランはmixhostとかなり似ていますが、先のLiteSpeedによって高速なのはもちろん、機能も豊富でコ…

【HTML/CSS】爆速コーディング、簡単なEmmetのススメ

コーディングに用いられるエディタの定番といえばVScode/Brackets/Dreamweaver/ATOMなどでしょうか。 今回はどのエディタでも使えるコーディングが爆速に捗る省略記法、 「Emmet」 を紹介したいと思います。 映画のTENNETに似た感じでエメットと読みます。 TENNETより断然わかり易く、時間を逆行は出来ませんが、コーディングにかかる時間を劇的に短縮できる記述法です。 まだ使ってない方は是非ご参考ください。

【JavaScript】要素をコピーするボタンの作り方

たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。 「これをコピペしてください。ボタンを押すとコピー出来ます」的な。 「 」こういうアイコンと一緒に表示されてたりもしますね。 通常コピーしたい部分を選択してCtr+Cのショートカットキーでコピーできますが、この動作が面倒だったり、あまり慣れていない方向けにボタンでコピー出来るようにこういった方法がとられてたりすると思います。 実装にはJavaScriptを使うので、JSに慣れない方向けに解説してみたいと思います。