howto
ハウツー

初心者、初学者でもわかる。プログラミング、デザインのHOW TO

【Wordpress】function.phpに記述してCSS、jsファイルを読み込む。CDN経由、更新時キャッシュクリアの方法。

wordpressでスタイルシート、スクリプトファイルを読み込む方法。function.phpに記述するwp_enqueue_style,wp_enqueue_scriptの理解を深める

コロのicon
コロ
【はじめてのAdobe Dreamweaver②】基本の使い方 HTMLの挿入方法を解説!

Adobe Dreamweaverを使ったいろいろなHTMLの挿入方法を解説します。作業しやすい環境になるおすすめの設定も紹介します!

ウエのicon
ウエ
aタグ周りで使えるテクニック一覧

aタグ周りのデザイン調整・ユーザビリティ改善に使えるテクニックをまとめました。

蛙のicon
「Local」ならXAMPP、Dockerを使わずにWordpressのローカル環境構築ができる。

サーバー知識ゼロでもできるWordpress環境をLocalで構築してWPサイトを表示する方法。

コロのicon
コロ
【はじめてのAdobe Dreamweaver①】インストールからファイルの新規追加までを解説!

web制作初心者でも使いやすい多機能エディターAdobe Dreamweaverのインストールの方法とはじめてサイトを作成する手順を分かりやすく解説します。

ウエのicon
ウエ
私が画像制作に使っているツール3選

デザインセンスのない人でも簡単に綺麗なバナーやアイキャッチ画像が作れる、おすすめツールの紹介。

蛙のicon
「やじるし」と入力しなくても、矢印マーク「←↑→↓」をショートカットで入力する方法

'うえ'、'みぎ' と打たなくても矢印マークを一瞬で入力する方法

コロのicon
コロ
web制作初心者でも簡単!HTMLファイルをローカルで確認できるVS Codeのプラグイン『Live Server』

XAMPPはもう不要!Visual Studio Codeでリアルタイムにプレビューができる『Live Server』が超オススメ!

ウエのicon
ウエ
CSSの遅延読み込みでCLSが悪化!?解決方法はこちら

Lighthouseで「レンダリングを妨げるリソースの除外」の警告が表示された時の対処方法。

蛙のicon
【HTML・CSS】web制作初心者に役立つサイト5選

web制作を始めたばかりの人に役立つサイトを紹介します!最初はどれを見ても難しく感じますが、オススメのサイトなら初学者でも分かりやすくためになります。

ウエのicon
ウエ
テキスト周りのデザイン調整に使えるおすすめCSSプロパティ

テキスト周りのスタイルを少し調整するだけで、読みやすく快適なサイトに近づきますよ。

蛙のicon
Homebrew + anyenv + pyenv でPythonのバージョンが変更出来ない時の対処方法

MacでHomebrew + anyenv + pyenv でPythonを動かすまでに出たエラーの解決方法まとめ

コロのicon
コロ
JavaScript・PHP不要!HTMLとCSSのみでタブ切り替えを実装する方法

超軽量!HTMLとCSSのみで簡単にタブ切り替えが実装できちゃいます!

蛙のicon
Gulp4でSassコンパイル。変更監視、ファイル圧縮、リネーム、ソースマップ出力をする

gulp4でsassのwatch、 圧縮、.min に変更を自動で行って作業効率アップ

コロのicon
コロ
組み合わせ無限大!イラスト・写真・音楽フリー素材サイト『ICON8』がすごい!

フリーのイラストサイトはたくさんありますが、これだけのパーツを組み合わせてイラストを作れるサイトはあまりありません。音楽まで自由に使えるICON8は動画制作にも役立ちます!

ウエのicon
ウエ
スクロール周りのデザイン調整とユーザビリティの改善

スクロールバーのデザイン調整やユーザビリティの改善に使える便利な小ワザ集。

蛙のicon
Gulp4で簡単、監視&自動コンパイル。はじめてのSass to css

gulp4を使ったsassコンパイル入門。任意の階層にcssを自動生成させるまで。

コロのicon
コロ
【DTPからwebサイトまで】初心者でも使いやすいAdobe Fontsの使い方

Adobe製品を使うなら絶対使って欲しいのがこのAdobe Fontsです。商用でも使用可能なフォントがたくさんあるので、ぜひ使って見てください!

ウエのicon
ウエ
details・summaryタグで簡単にアコーディオンやハンバーガーメニューを実装する

jQuery不要!HTML・CSSのみで簡単にアコーディオンメニューやハンバーカーメニューが作れます!

蛙のicon
[入門編]Gatsby.jsの使い方。初心者でもReact爆速サイトが簡単に作れます。

ReactフレームのGatsbyでheader, footerパーツをわけたり、データを取得して実際にサイトに表示する方法

コロのicon
コロ
【Chrome拡張機能】検索結果に流入数を表示するUbersuggest

サイトの流入数やキーワード候補などがChromeの検索画面に自動で表示されるUbersuggestのChrome拡張機能ご紹介します

ウエのicon
ウエ
imgタグ周りのSEO対策・小ワザ集

imgタグのSEO対策やユーザビリティ改善のために知っておくべき知識をまとめています。

蛙のicon
Adobe Acrobat Pro DCで効率化。プライベートの書類仕事も時短できるPDF活用術。

たまりがちなレシートやプリント類をスマホでスキャン。AdobeAcrobatProDCならテキスト検索もできるので管理が楽になります。

コロのicon
コロ
【重くない!】ソースツリーよりも軽いGitHubデスクトップが超オススメ

長年使ってきたソースツリーが重くて仕方がないので、これを期にGitHubデスクトップへ乗り換えました!軽いし使いやすいので、GitHubを使っている人には超オススメです。

ウエのicon
ウエ
Webデザインは8の倍数を使うとスッキリきれいに仕上がる!

8の倍数を用いてWebデザインをすると、違和感を感じにくく綺麗なサイト作ることができます。

蛙のicon
Adobeポートフォリオは、HTML知識がなくても短時間でおしゃれ&限定公開ができるサイトが作れます。

Adobe Portfolioはノンプログラマーの強い味方。ブラウザ操作だけでSEO対策、限定公開、Googleアナリティクスを使ったサイトが作れます。

コロのicon
コロ
ul・ol・li リストのデザイン調整に使えるテクニック

リストマーカーの形を自由に変えたり、リストアイテムを横並びにするための方法をご紹介します。

蛙のicon
Adobe Illustratorで拡大・縮小しても線の太さを変えない方法

オブジェクトを拡大・縮小したときに線の太さが維持されてしまうときの対処方法。

コロのicon
コロ
VS Codeでライティング!文章の校正+文字数を表示する拡張機能

ブログなどで普段文章を書いている人で、文字数と校正を書きながらやりたい人必見!VS Codeでの校正と文字数カウンター表示のやり方をご紹介します。

ウエのicon
ウエ
Lighthouseでコントラストが低いと怒られた時の対処法

Lighthouseで「背景色と前景色に十分なコントラスト比がありません」の警告が表示された時の対処方法。

蛙のicon