TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ 項目 内容
初心者に分かりやすい！JavaScript 入門チートシート - コムテブログ
TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ 項目 内容
React が少し分かるようになる！JSX チートシート - コムテブログ
TL;DR このページでは、JSX の基礎の実装方法について解説しますね。一言でいうと JSX とは、JavaScript 内で HTML のような記述を可能にする記法です。React や Next.js を使った開発において必要不可欠な知識となります。 開発環境 バージョン
月額使用料とおさらば！クリエイター向けの買い切りMacアプリ
作成：2019/08/19 更新：2021/04/01 Mac > 「いいかげんサブスクリプションや月額使用料じゃなくて買い切りにしてくれ！毎月いくら引き落とされているかよく分からなくなっているんだよ！」と怒っているクリエイターにおすすめの買い切りMacアプリ（もしくは無料版）をご紹介。コスパだけでなく、その美しさと使いやすさに喜悦するだろう。 エンジニア速報は Twitter の@commteで配信しています。 DaVinci Resolve（After Effects代替） Blackmagic Design社のDaVinci Resolve（ダヴィンチ・リゾルヴ）。無償の高性能動画編集ソフト。インターネット接続を必要とせず、月額使用料も発生しない、上位版のDaVinci Resolve Studioは¥33,980 (税抜価格)のみ。 DaVinci Resolve 16 Blend
WordPress：タイトルを自在にカスタマイズする方法 - コムテブログ
TL;DR WordPress4.4 以降において title タグを自動出力するには、非推奨の wp_title()関数の代わりに、テーマの機能を設定する関数add_theme_support( 'title-tag' );を functions.php に記述します。functions.php の中に書くことで保守性もよくなります。 WordPress4.4 以降の title の記述方法 functions.php function mytheme_set() { add_theme_support( 'title-tag' ); } add_action( 'after_setup_theme', 'mytheme_set' ); after_setup_themeは全てのテーマが読み込まれた後にテーマの機能を設定するフックです。タイトルが重複するので header.php には
2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集
作成：2017/09/11 Webデザイン > 「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 近年増えてきたファーストビューのレイアウトは スプリットスクリーン（分割） シネマグラフ 縦書きのGナビゲーション 画像とテキストを一部だけレイヤー 不規則な配置 アニメーション 鮮やかな配色のグラデーション デュオトーン イラスト ラインアート といった感じなので、今回はこのあたりから少しだけ遊び心があるものをまとめます。 スプリットスクリーン なぜかファーストビューがパッとしない時があります。要因の一つとして写真が抽象的（主張がない）で、フルスクリー
プログラマーにおすすめのATOMパッケージ
作成：2017/04/3 更新：2017/04/16 Tool > 開発環境 以前、ATOMの基本操作をAtomひと通りの使い方（Windows・Mac編）に書きましたが、今回はATOMおすすめのパッケージを追記。メジャーなパッケージは除外してます。 エンジニア速報は Twitter の@commteで配信しています。 マークダウンのアウトラインを自動生成 マークダウンのヘディング(h2/h3など)を読み取って、アウトラインを右側に表示してくれるパッケージ。表示されたインディックスはリンクになっていてクリックで移動できます。 document-outline マウスカーソルを垂直移動させる カーソルを垂直移動させる地味に便利なパッケージ。文章に半角と全角が入っていても綺麗に上下移動します。マークダウンなどで文章を作成する時に。 Atom のカーソル上下移動を改良するパッケージを作った -
PhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法
作成：2016/12/19 更新：2017/06/06 Photoshop > Webデザイン デュオトーンを採用したアーティスティックなWebサイトも増えてきたことですし、今回は「写真全体をデュオトーンに加工するのではなく、人物と背景の透過度を変えてデュオトーン加工を施しおしゃれに見せる」方法を書きます。 エンジニア速報は Twitter の@commteで配信しています。 デュオトーンとは デュオトーン（Duo Tone）は中間的な明るさを持つ色（グレースケール）と明るい色を重ね２色で表現します。使い方によっては、レトロでアーティスティックな外観を演出することができるし、白文字との相性もいいです。印刷用語では「ダブルトーン（double tone）」と呼ばれています。 デュオトーンを採用してあるサイトを色々見ていると、 １．写真全体をそのまま加工してあるタイプ Home | Plant
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 - コムテブログ
TL;DR ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き background-clipプロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;と-webkit-text-fill-color: transparent; 指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。 .foo { -webkit-ba
object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方
object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方 作成：2016/11/14 更新：2016/11/15 Web制作 > object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。 例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。 しかし、imgにobject-fit: contain;を追加すると、imgに指定し
意外と見逃してたかも！配色の知識が増える記事10
作成：2016/10/11 更新：2016/10/11 Webデザイン > デザインの印象の大部分は配色によって決まるといっていいほどです。パッとしないデザインにならないように、配色や色彩の使い方が上達する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 セパレーション（分離配色） 赤とオレンジ色、白とグレーのような似通った色を識別するために区切りを入れる方法をセパレーションといいます。色と色の間に別色を入れて色同士を分離させることによって配色を和らげたり、引き締めたりします。服でいえばベルトやインナー、フォントならアウトライン。 メリハリがつくので元気な印象や活発さを出したいときに使えます。これとは逆に明度順に並べることをグラデーション配色といいます。 色彩の調和/セパレーション カマイユ わずかな明度差を利用した配色方法をカマイユといいます。曖
全部無料の「人物」に関するイラスト素材まとめ
作成：2016/09/20 更新：2016/09/20 Webデザイン > 最近、キャラクターを用いるWebサービスやブログが多くなってきましたね。今回は「人物」だけにフォーカスをあてて、プレゼン・ブログなどに使える商用利用可能の無料イラスト素材をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 ガーリー 色使いがふんわりしている女の子系の可愛らしいイラスト素材。ショッピングやソファ・歩くなど日常的な素材がある。 ガーリー 線画 線画であればこちら。人物は4人家族・リオのカーニバルなど。数こそ少なめだがクオリティ高し。 Line illustration labo 整体院 整体院などで使える素材。肩こりや腰痛などの症状でカテゴリ分けしてあるのが面白い。会員登録が必要。 からだピクチャー 看護師・工事現場作業員・配達員など チラシやポップにも使えそうな癖の
スクロールした時に面白いエフェクトを出すためのアイデアまとめ
作成：2016/09/12 Web制作 > スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。 エンジニア速報は Twitter の@commteで配信しています。 インジケーター 進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。 ヘッダー どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。 See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen. CSS only s
アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集
作成：2016/08/16 Webデザイン > ありきたりのWebデザインギャラリーではなく、グリッド線が入っているもの、料金表専門、インフォグラフィックスやグリッド・404・サイドバーなど、少し掘り下げたようなWebデザインギャラリーをまとめました。暇な時に見ているとインスピレーションが湧くはずです。パーツごとに分類。 エンジニア速報は Twitter の@commteで配信しています。 料金ページ 今月話題となった料金ページのみをまとめてあるTumblr製のプライスページギャラリー集。ブログなどに埋め込み可能。 Pricing Pages グリッド参考 スクリーンショットにグリッドを入れてある、グラフィック(紙)やWebのデザインルールがひと目で分かるWebデザインギャラリー集。手間がかかってます。 Grids 404ページ 404ページのみ集めてあります。背景にどんな写真を使ってある
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
ずいぶん速くなった！ページ表示高速化テクニックまとめ - コムテブログ
TL;DR CMS を組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。 2016/07/03：高速化についての新しい方法を追加しました。確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開。 VPS 高速化のために VPS で試して比較的効果があったことを、次回また組み込む時のためにメモ。 １．VPS / SSD に リクエスト数や画像の容量にもよりますが、WordPress を組み込んで一番高速表示されたのがこれだったので。当たり外れがあるかもしれませんが、 さくらの VPSSSD（2G）に WP を置き、レンタルサーバと比較すると、とんでもなく高速表示。試用期間中は遅くて不安になりますが、契約後当日に高速になります。 さくら VPS | Sakura VPS 設定マニュアル さくら VPS の初期設定 | 離
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
完璧に分かる！「google アナリティクス」の得する設定と使い方まとめ３１
作成：2013/09/24 更新：2014/11/01 SEO対策 > 毎月、ECサイトや情報サイトなどアクセス解析保守を9社ほど作らないといけません。ここらでおさらいを兼ねて、Googleアナリティクスを扱ううえで必要なことを整理しようと思います。今回は成果を上げるうえで「知らないと損する」ことをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 外部連携（初期） １．複数サイトを一つで管理 ２．すべてを一元管理 ３．ウェブマスター連携 ４．AdWords連携 ５．アドセンス連携 共通設定（初期） ６．プロファイル ７．フィルタ ８．IP除外 ９．Cookie除外 トラッキング設定（初期） １０．トラッキング設定 １１．時間／曜日／日付 １２．集客／キーワード／ページ １３．流入／属性／閲覧開始／トレンド 計測方法と基本知識 １４．ディメンション
オフィスはいらない！社内業務や日常生活に役立つサービス１７
作成：2013/08/19 更新：2014/11/01 Webサービス > 案件管理や進捗確認、打刻や勤怠管理など社内で共有するファイルはクラウドで管理します。数年前と比べると、よほど重要なものでない限り、ローカルに保存することが少なくなってきました。今回は、社内ツールや日常生活にも使える、できるだけ無料で使える物を中心にまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 転送 １．ネット郵便 ２．ネットFAX ３．ネットプリント ４．ファイル転送 ５．フォーマット変換 交通／宿泊 ６．タクシー／ホテル／航空券／新幹線／駐車場 進捗 ７．ガントチャート ８．タスク管理 証票 ９．見積/請求書/会計/他 １０．税金 オフィスツール １１．オンラインオフィス＋ストレージ １２．マインドマップ １３．グラフ マーケティング １４．競合調査 １５．アンケー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コムテブログ