初心者に分かりやすい！JavaScript 入門チートシート - コムテブログ | フロントエンドエンジニア向けテックブログ

2023/07/05 8 users JavaScript JamStack 初心者 tl;dr

TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ ... 続きを読む

Webデザインの参考にしたい、ファーストビューのアイデアその2 | コムテブログ

2018/05/14 44 users ファーストビュー webデザイン 参考 スプリットスクリーン

作成：2018/05/14 更新：2018/05/14 Webデザイン 今年はスプリットスクリーンや一部をレイヤーさせる見せ方を見るようになりました。（参考： 2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集 ）今回は、周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう。 2018年微増しているレイアウトの... 続きを読む

よく使うWordPressのif文（条件分岐）まとめ | コムテブログ

2018/03/19 16 users if文 WordPress 条件分岐 else php if

作成：2018/03/19 更新：2018/03/19 WordPress よく使うWordPressのif（条件分岐 / Conditional Tag）。使用頻度が高いものを書いてます。 基本 条件成立時、上の条件でない時、条件が成立しない時の条件が複数あるパターン。条件を増やすときはelseifを増やし、条件が一つだけのときは、elseifとelseを省略する。 <?php if() : ?... 続きを読む

Mac初心者おすすめ！フロントエンドやコーダー向け初期設定 | コムテブログ

2018/03/05 67 users フロントエンド

作成：2018/03/5 更新：2018/03/05 Tool Windowsを使っていたフロントエンドエンジニアやコーダーがMacに乗り換えたときに、最低限やっておきたいMac初心者向けの便利な初期設定。 ターミナルのテーマ変更 ターミナルもしくは、iTerm等のテーマをiceberg、フォントをRictyに変更。 ダウンロード テーマ： Iceberg フォント： Ricty Diminish... 続きを読む

2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集 | コムテブログ

2017/09/10 77 users ファーストビュー アイデア集 Webデザイントレンド 縦書き

作成：2017/09/11 更新：2017/09/11 Webデザイン 「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。 近年増えてきたファーストビューのレイアウトは スプリットスクリーン（分割） シネマグラフ 縦書きのGナビ... 続きを読む

プログラマーにおすすめのATOMパッケージ | コムテブログ

2017/04/03 113 users プログラマー おすすめ

作成：2017/04/3 更新：2017/04/03 Tool 以前、ATOMの基本操作を Atomひと通りの使い方（Windows・Mac編） に書きましたが、今回はATOMおすすめのパッケージを追記。メジャーなパッケージは除外してます。 マークダウンのアウトラインを自動生成 マークダウンのヘディング(h2/h3など)を読み取って、アウトラインを右側に表示してくれるパッケージ。表示されたインディ... 続きを読む

404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集 | コムテブログ

2016/12/26 61 users エフェクト 404エラーページ

作成：2016/12/26 更新：2016/12/26 Webデザイン ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。 デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャ... 続きを読む

CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 | コムテブログ

2016/11/27 111 users CSS テキスト Bac エフェクト 透過処理

作成：2016/11/28 更新：2016/11/28 Web制作 ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回はCSSのみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き bac... 続きを読む

最高にわかるChromeデベロッパーツールの使い方(チートシート付き) | コムテブログ

2016/07/10 161 users Chromeデベロッパーツール デベロッパーツール 簡潔

作成：2016/07/11 Tool 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaS... 続きを読む

意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ | コムテブログ

2016/02/07 461 users jQuery pocket CSS エフェクト 一味

CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（Segmen... 続きを読む

Web制作に必要な知識が一通り学べるベスト記事9選 | コムテブログ

2016/01/18 78 users Web制作 知識 ベスト記事 キット Git

年末にやるべきだったと思いつつも、今更ながらWeb制作前に知っておくと助かる記事を、コムテブログの中から厳選しました。結構自分でもよく見返す記事です。Web制作に必要な基本知識をざっと知りたいときに。 バージョン管理 ファイル等の変更箇所の履歴を管理。複数人が関わるプロジェクトで必須となるGit（ギット）のコマンドやGUIなどの初歩的な知識を順を追って解説してあります。最初は何を準備すればよいのか... 続きを読む

それなりに使える、Web制作者がお世話になる便利ツール | コムテブログ

2016/01/04 581 users 便利ツール WEB制作者 お世話

毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいで... 続きを読む

プログラミングやコーディングを学習したい人に役立つツール | コムテブログ

2015/11/16 300 users コーディング プログラミング コレ 最初 ツール

初心者の生徒さんに「どうやったらコーディングできるようになりますか、最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。 また「○○の時は何を使う、これで練習する」といった感じで決めておけば、コーディングも楽になるかと思います。今回は「最初はコレ！」といった感じで選抜してみました。初心者の方向けの記事となります。 ... 続きを読む

1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ | コムテブログ

2015/08/10 941 users チートシート 完結 ワンクリック テンプレート WEB制作者

ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．... 続きを読む

Webデザイナー必見、実務で役立つ逆引きレイアウト集 | コムテブログ

2015/07/21 216 users 実務 Webデザイナー必見

オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。 もくじ １．視線を停止させたい ２．上質さを出したい ３．静寂さを出したい ４．親しみやすさ を出したい ５．文字の存在感を出したい ６... 続きを読む

Node.jsとgulpをインストールして使うまでの入門記事 | コムテブログ

2015/06/21 96 users Gulp ザックリ WIn node.js フロント

Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 もくじ Node.js... 続きを読む

これからGit を始めてみようという人のための使い方と入門フロー | コムテブログ

2015/06/08 162 users Git キット GUI コマンド 筆者

Git（ギット） でどういったことができるか、メリットなどは結構知っている人が多いと思うので、ここでは「コマンドやGUIなどの初歩的な部分だけを１日で使える」ようになるためのフローをポイントだけメモしておきます。 内容は知っているけど実際に使っていない人、筆者のような超初心者、分厚い本を読むのが苦痛な人、すぐに使いたいのでポイントだけサクッと教えて欲しい人対象となります。 もくじ 準備 準備する物... 続きを読む

スキルが増えた！Webデザイナーやフロントエンドが「独り立ち」できるビジネス向け技術書11選 | コムテブログ

2015/05/25 79 users フロントエンド スキル Webデザイナー

今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。 実際にどういった本がおすすめ？と聞かれることも多いので、会社と自宅に常備してあり、実際に筆者がサイト構築する際に参考にした本を中心に書いておきます。今回は多くの書籍の中から特にビジネスで使えそうなものを絞りに絞ってピックアップしました。少人数での... 続きを読む

今っぽくなった！トレンドをおさえたjQuery プラグインまとめ | コムテブログ

2015/04/06 397 users トレンド ヒップアップ マイクロインタラクション 細部 粘性

トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピップアップ。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプ... 続きを読む

Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ

2015/03/22 615 users CSS 勉強 WEB制作者

実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済むCSSテクニックなどをまとめました。今回はWeb制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 もくじ 画像 １．画像の下にできる隙間をなくす ２．画像の下にテキストが回り込まないようにする ３．floatを使わずに横並び ４．デバイスによって、画像を変更する ５．画像の上に文字を配置 ６．鏡像 マ... 続きを読む

ここまで動かせる！楽しいcss アニメーションのサンプル集 | コムテブログ

2015/03/16 147 users アニメーション サンプル集 Flash CSSアニメーション

小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015年もアニメーションを取り入れるサイトは増えていくでしょう。 今回はCSSアニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 もくじ エフェクトサンプル １．ア... 続きを読む

Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ | コムテブログ

2015/03/02 386 users CSS インタラクティブ jQueryプラグインまとめ

今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄え... 続きを読む

何を使えばよいか分かった！コーポレートサイトの各ページを制作する前にみておきたいこと | コムテブログ

2015/02/09 94 users レスポンシブ コーポレートサイト ビジョン IR情報 小技

企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。今回はWordPressで構築した固定ページを見やすくするために、どういったjQuery・WPプラグインを使えばよいのか、またレスポンシブに対応させるための小技もメモしておきます。 もくじ １．ギャラリーページ ２．サービス／会社概要ページ ３．各ページの背景画像をクライアントさん側で変更可能に ４．問い合わせページ ５．C... 続きを読む

意外となかった！Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート | コムテブログ

2015/01/04 515 users テンプレート ヒアリングシート WEB制作者

遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトやECサイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめま... 続きを読む

綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ | コムテブログ

2014/12/07 344 users jQueryプラグインまとめ

比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キュー... 続きを読む