Webサイト作成の際に必要なTipsを紹介します。
Tips
AI
HTML&CSS
- :nth-child練習ページ・jQueryセレクタ練習ページ作成しました。
- %を使ったマージン指定
- absoluteで複数の画像を重ねる
- Adobe Typekitの使い方
- appearanceプロパティについて〜CSS
- Atomの使い方
- backgroundプロパティの使い方
- body要素のマージン〜CSS marginの挙動
- box-sizingについて〜CSS3
- Bracketsの使い方
- canvasの文字を動かしてみる
- content:attr()と独自データ属性を使い方〜CSS
- contenteditable属性の使い方〜HTML5
- CSS グリッドレイアウトでコーディングするならFirefoxを使おう〜display:grid
- CSS2.1のセレクタの復習
- CSSグリッドを可変レイアウトにする方法
- CSSで計算する〜calc()
- CSSのbackground-clipでテキストをグラデーションに
- CSSのpositionでtop bottom left right全て指定した結果
- CSSのメディアクエリの記述をSassのmixinでまとめました
- CSSの優先順位
- densityについて(device pixel radtio)
- doctypeの変更〜DreamweaverCC
- DreamweaverCCのFTP機能でファイルサイズや修正日が表示されない時の対処
- Dreamweaverのツールバーの表示〜地球マークの出し方
- Dreamweaver効率入力について
- DW CS4でプレビューができなくなるエラー
- Facebook 「Page Plugin」の設定
- Facebook Pageの記事を自分のサイトに表示させる方法
- facebookのロゴ取り扱いについて
- Flash挿入のためのOBJECT タグおよび EMBED タグの属性について
- Flexboxを使ったECサイト向けパーツ
- floatとdisplay:inlineを一緒に設定する理由〜CSS
- floatとpositionを使用したレイアウト
- Font AwesomeのCSSには.pull-leftと.pull-rightの設定がある
- font-sizeにvwを使用して文字を画面サイズに応じて拡大縮小
- Freeのオーディオエンコーダー
- Google Chromeの最小フォントサイズ
- Google Mapのスクロールを止める方法
- HTML リスト作成時の注意
- HTML5 canvasを使用してみる～画像表示
- HTML5 CONFERENCE 2013
- HTML5とCSS3のIE8対策
- imgのフロート〜CSS フロートと回り込み
- inline要素のpaddingを使う場合の注意点
- input 要素のサイズ指定
- Instagramの「accessToken」と「userid」を取得する方法〜2018年4月版
- iOSシミュレータの使い方〜Macユーザー用
- jQuery Mobileの使い方
- line-heightの単位について
- MacOS X El CapitanでUSBをフォーマットしてWindowsと共有させる方法
- Modernizrについて
- nth-child(n)とnth-of-type(n)の違い〜CSS3
- OSXを10.13（macOS High Sierra）にアップデートしてSASSのコンパイルがうまくいかない時の対処法
- Sublime Text3 Mac版 カタカナ変換をF7で行う
- Sublime Text3にColorPickerの導入
- Sublime Text3の便利な使い方
- Sublime TextにEmmetを導入
- Sublime Textにftpを設定
- svgが表示されない〜サーバーの設定
- target疑似クラスを使う〜CSS3
- text-indentで文字を非表示にする
- textariaのリサイズを無効
- Twitterのタイムラインをホームページに埋め込む方法〜2018年更新版
- Twitterユーザータイムラインを自分のホームページに表示
- ul要素の構造〜余計な余白は誰？
- Visual Studio CodeでEmmetのlang属性を変更する方法〜なぜか変更できなかったら試して！
- WatsonのAssistant機能をDogRoboにつけました
- Web Fontのダウンロード〜webfont-dl
- Webサイト制作フロー
- Web用に保存とhtmlソース
- widthをパーセント指定する場合の小数点〜CSS
- WordPressのナビゲーションにBootstrapを組み込む
- YouTubeやFlashを挿入したHTMLでのz-indexについて
- アイコンフォントの使用方法〜疑似要素への導入方法も追加
- アスペクト比を保ちながら拡大縮小できるブロックの作成
- あるブロック要素の高さをブラウザいっぱいに広げる方法
- イメージマップのリンク部分の青い線を消す
- インライン要素のソース中での改行の問題
- スマホサイト用のハンバーガーボタンナビ
- テーブルのセルに長い英単語を入れたいが折り返しをしたい場合
- テーブル幅を固定したい
- デザインカンプからコーディングで重宝するツール
- ナビゲーションの中央揃え
- ナビゲーション作成のポイント
- にわかデザイナーより数字の美
- ネガティブマージン
- ネガティブマージンでボックス間マージンを簡単設定
- ノードの表示と非表示〜CSS
- ビューポートとは 〜HTML
- フォームのmethod属性でpostとgetの違い
- フォームの中の2種類のlabel要素の指定方法
- フォームの作成
- フォントサイズ キーワード
- フォント指定例
- ブラウザいっぱいに画像を広げたい
- ブラウザ別のデフォルトフォントサイズ
- フルードイメージで起こる問題点〜画像が縮小されない？？
- フロートしたナビを中央揃えする方法
- フロートについて
- ページの拡大率の指定〜スマホサイト
- ページの高さを画面いっぱいにする
- ボックスモデルについて考える CSS
- マージンについて考える 1〜margin-auto
- マージンについて考える２〜相殺
- マウスホバーで画像を入れ替える〜jQuery
- メモ帳だけでOK〜Markdowonを使ってみよう
- リキッドと固定を組み合わせた2カラムレイアウト
- リストの余白の正体
- レイアウト例１
- レイアウト例２
- ローディングアニメーションが簡単に作成できるサイト
- 入れ子状態のブロック要素の上下マージンの困った挙動（マージンの相殺）
- 単位emの使い方〜CSS
- 各ブラウザでフォントサイズを統一する〜YUI fontsの使い方
- 均等割付の方法〜HTML
- 垂直・水平方向に子要素を中央揃え
- 垂直方向にセンター揃え
- 属性セレクタの意味
- 横幅を固定してpaddingを使用したい
- 画像のフロートとテキストの流し込み
- 画像を囲むボーダーの余計な空白
- 疑似要素で下線を引く
- 簡単にローカルなSASS環境構築
- 背景画像の拡大縮小〜background-size
- 高解像度デバイスの画像表示〜Retina対応
JavaScript
- DOMを使ってノードを取得する〜DOMの活用（1）
- DOMを使ってノードを取得する〜DOMの活用（2）
- :nth-child練習ページ・jQueryセレクタ練習ページ作成しました。
- AngularJSにおけるminify化の問題点
- AngularJSのDirectiveについて（1）
- AngularJSのDirectiveについて（2）
- AngularJSのインターポレーションについて
- chart.jsで描いた円グラフにラベルと値を表示する方法
- click()の使い方〜JavaScript
- Dependency Injection〜依存性の注入
- FlashCS6 Toolkit for CreateJSを使ってみる（1）
- FlashCS6 Toolkit for CreateJSを使ってみる（2）
- Freeのオーディオエンコーダー
- HTML5 canvasを使用してみる～少し複雑ななアニメーション
- HTML5 canvasを使用してみる～簡単なアニメーション
- IE8以下でcss3を対応させるのに便利なPIE.htcの問題点
- JavaScriptでDOMを操作する
- JavaScriptにおける配列
- JavaScriptのaddEventListenerについて
- JavaScriptのイベント処理 イベントハンドラ
- JavaScriptの表示についてまとめ
- JavaScriptの高度なイベント処理 イベント伝播
- NTT docomoの知識Q&A APIを使ったbot作りました。
- Vanilla JS
- ローディングアニメーションが簡単に作成できるサイト
- 以上・以下・未満・超える
- 初めてのDOM〜DOMの概念
- 変数宣言の巻き上げ〜JavaScriptの不思議な決まりごと
- 日付と時間〜PHPとJavaScriptの記述方法
- 正規表現の基礎
- 連想配列
- 選択ボックスの作成 JavaScriptを使用して作成
- 配列の要素を順に処理 for…in命令
- 配列要素の書き出し
jQuery
- Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery
- Ajax通信とクロスドメイン問題
- animate()メソッドのプロパティの値に「toggle」キーワードを使うと便利〜jQuery
- click()の使い方〜JavaScript
- Google Mapのスクロールを止める方法
- hover()とanimate()を使ったボタン〜jQuery
- iOSシミュレータの使い方〜Macユーザー用
- jQuery Mobileの使い方
- jQuery〜マウスの移動が終わったら何か行う：mousemoveの応用
- jQueryオブジェクトについて
- jQueryでイベントを使ってみる
- jQueryでのthisの使い方〜覚えると楽しくなる
- jQueryで動的に高さを取得するときにハマる問題点
- jQueryとは
- jQueryのイベント伝播〜バブリング
- jQueryのセレクター
- jQueryのメソッドを使ってみる〜シンプルな使い方
- jQueryの基本構文
- jQueryの記述の基本を覚える
- jQueryメソッドの特性
- jQueryライブラリを素早くgoogleとリンクする
- jQueryを使ったフォームのイベント処理
- not(“:animated”)とstop()の使い分けについて〜jQuery
- NTT docomoの雑談対話APIを使ったAI Bot
- onメソッドのイベントにhoverを使う方法：動的に作成した要素にイベント設定〜jQuery
- replaceWith()の使い方〜jQuery
- scrollTopとscrollTop()の使い方〜jQuery
- slickの使い方〜jQuery
- Topへ戻るボタンの作成〜jQuery
- パララックス 円運動をさせる〜jQuery
- パララックスの仕組み〜jQuery
- フローティングナビ〜付いてくるナビゲーション
- マウスホバーで画像を入れ替える〜jQuery
- リクルート A3RT Image Search APIを活用した画像検索
- リクルートA3RTを使ったAI Bot
- 要素の追加〜jQuery
php&MySQL
- \nのクオテーションはダブル〜PHP
- BMI測定〜PHP課題
- htmlspecialcharsの使い方と第２引数について
- if文の書き方〜WordPress
- isset()の使い方〜PHP
- MAMPのインストールと設定
- MAMPのバージョンアップ方法
- MAMP設定〜2018年版 Claud機能が追加されたが設定はどこで？
- phpMyAdminのログインをする方法〜MySQL
- PHP無名関数とWordPress
- Windows10にしたらXAMPPのApacheが使えなくなる現象
- ターミナルでMySQLを使う準備〜Mac用
- ダブルクォートで囲まれた文字列の変数展開〜PHP
- パスワードのハッシュ化〜PHP
- ヒアドキュメント と Nowdoc
- ヒアドキュメントの使い方〜PHP
- 以上・以下・未満・超える
- 変数のスコープとグローバル変数〜PHP
- 日付と時間〜PHPとJavaScriptの記述方法
- 正規表現の基礎
WordPress
- bloginfo( $show )の使い方
- .htaccessを表示させたい
- body_class()とpost_class()〜WordPress
- get_posts( )で使用する foreach文の$postについて
- Gutenbergで気になるポイント1〜WordPress
- Gutenbergで気になるポイント2〜WordPress
- Gutenbergで気になるポイント3〜WordPress
- is_category とin_category とhas_categoryの使い分け〜WordPress
- MACで不可視ファイル（.htaccessファイルなど）を表示させる
- MAMP環境のWordPressをFusionのWindowsIEで検証
- moreの使い方〜WordPress
- MySQLリストア
- query_postsとページナビの問題 〜アクションフックでpre_get_postsを使う
- the_date()とthe_time()の使い分け
- Windows10にしたらXAMPPのApacheが使えなくなる現象
- WordPress アドレス (URL)とサイトアドレス (URL)の違い
- WordPress4.2から絵文字が使用可能に
- WordPressカテゴリIDの確認方法
- WordPressテーマ開発中にvar_dump()の結果をターミナルに表示
- WordPressでトラックバックを使う方法
- WordPressでパーマリンクを行った際の.htaccessの記述
- WordPressとDreamweaverを連携
- WordPressのウィジェットを有効化
- WordPressのデバッグモード
- WordPressのフックについて
- WordPressのログインパスワードを忘れた時の対処法
- WordPressの子テーマ編集でfunctions.phpを上書きする方法
- WordPressの投稿で、キャプション付きの画像挿入の問題点
- WordPressの投稿でjQueryやJavaScriptを使う方法
- WordPressの適切なパーミッション
- WordPressファイルのバックアップ〜MAMP編
- WordPressをひとつのデータベースに複数インストール
- WordPress固定ページにカテゴリを設定する
- WordPress子テーマ作成のポイント
- wp-config.phpの置き場所〜WordPress
- XAMPP環境でWordPressのlocalhost接続の問題
- アイキャッチ画像とそのトリミング
- ウィジェット 表示
- カスタムヘッダの作成
- カスタムメニューの作成
- キャプション付きの画像挿入の注意点〜WordPress
- コマンドでのパーミションの変更〜Mac
- ショートコードの使い方
- テーマのサムネイル画像〜WordPress
- ページタイトルを表示するthe_title
- 前後の投稿一覧ページのリンク〜WordPress
- 前後の投稿記事にリンク〜WordPress
- 子テーマ作成のポイント〜WordPress
- 文字コードの設定
- 検索ボックスの作成〜カテゴリ別で検索など
- 現在のカテゴリの親カテゴリを表示したい〜WordPress
python
PhotoShop
- 32bitのカラーピッカー photoshop
- Adobe CC 2017のPhotoshopとIllustratorの新規ドキュメントを速く開く
- Adobe Character Animatorの使い方
- gifアニメの作成〜Photoshop
- HSBを使って配色
- Illustratorで作成したオブジェクトをPhotoshopで使う
- Mac Retina ディスプレイでPhotoshopの作業を行う時に解像度を変更する方法
- Macのlibraryフォルダの場所についてちゃんと知っておく
- Photoshop CC 2015.5の「ゆがみ」を使う
- Photoshop で動作がおかしい場合の対処方法〜環境設定ファイルの再作成
- Photoshop レイヤーマスクと選択範囲作成小技
- Photoshop 文字パネルの初期化
- PhotoshopCC（2015.5）選択とマスクのワークスペースを使う
- PhotoshopCCの画像アセットの生成機能の使い方
- Photoshopでガイドをピクセルにあわせる方法
- Photoshopでできること Photoshop基礎１
- Photoshopでの水平方向分布
- Photoshopでパターン作成 Photoshop
- Photoshopで作成した複数のシェープのパスをつなげる方法〜PhotoshopCC2017
- Photoshopのマスクについて No1〜クイックマスク
- Photoshopのマスクについて No2〜レイヤーマスク
- Photoshopのマスクについて No3〜ベクトルマスク
- Photoshopのマスクについて No4〜クリッピングマスク
- アートヒストリブラシを使った描画 〜Photoshop
- アンシャープマスクの使い方 Photoshop
- いちごの写真でパターンをつくる〜Photoshop
- イメージ画像のテキスト作成のポイント〜Photoshop
- イラレやフォトショのスポイトで外部の色を取りたい
- カーニングとトラッキング photoshop
- カンプ、ワイヤーフレーム用グリッドシステムのガイド作成方法
- クイックマスクで選択範囲に色を付けるには Photoshop
- クリッピングマスクでの注意点 Photoshop
- クリッピングマスクのテクニック
- シェイプに境界線をつける Photoshop
- スクラッチ画 〜Photoshop
- テキスト揃え Photoshop
- デザインカンプからコーディングで重宝するツール
- デザインスペースを使ってみよう〜PhotoshopCC2015.1
- トーンカーブ（１） Photoshop
- トーンカーブ（２） Photoshop
- ドットグラデーションの作成〜Photoshop
- ドットパターンの作成〜Photoshop
- ドロップシャドウの向きを個別に設定 Photoshop
- にわかデザイナーより数字の美
- パールの作成 Photoshop
- ブラシツールの流量と不透明度 Photoshop
- ベベルとエンボスの正体〜Photoshop
- ボタンの作成〜Photoshop
- マスク部分の色の変更（黒→白） Photoshop
- レイヤーについて Photoshop基礎
- ワープテキストでエラー Photoshop
- 動物模様のテクスチャー Photoshop
- 境界線を調整の使い方〜photoshop
- 定点撮影で人などの障害物を消す〜Photshop
- 工夫次第で用途の多い球の作成 Photoshop
- 描画モード Photoshop
- 木目テクスチャ Photoshop
- 水滴の作り方〜Photoshop
- 湯気の作成〜Photoshop
- 矢印キーを使用したオブジェクトの移動
- 解像度について Photoshop
- 解像度について(色々な解像度で混乱） Photoshop
- 透明グラデーション Photoshop
- 選択とマスク Photoshop
- 鏡面反射効果 Photoshop
Illustrator
- Adobe CC 2017のPhotoshopとIllustratorの新規ドキュメントを速く開く
- Illustrator〜1ピクセル単位で正しく保存する
- IllustratorCS5 スウォッチに登録したものを初期画面に表示したい
- IllustratorCS5~CCでパターン作成
- Illustratorでビットマップ画像を配置してパターン登録
- Illustratorで作成したオブジェクトをPhotoshopで使う
- Illustratorで配置した画像の色を取りたい
- Illustratorのカラー設定
- illustratorのペースト色々 illustrator
- Illustratorのレイヤーの中の○印（ターゲットコラム）の意味
- Illustratorの文字設定をリセット
- Illustratorの角度入力
- Illustrator環境設定〜角度の制限
- Illustretorで等間隔に分布を行う
- jQuery.extendを使ってみる
- JR線路の作成（破線と点線） Illustrator
- Web用に保存とhtmlソース
- アートボードが透明になった〜Illustrator
- アピアランスの設定 illustrator
- イラストレーターで回転の基準点の移動・・・単純な花びらを描くとき
- イラレやフォトショのスポイトで外部の色を取りたい
- カンプ、ワイヤーフレーム用グリッドシステムのガイド作成方法
- グリッドの作成〜Illustrator
- グループ選択ツールの使い方
- コントロールパネルのスウォッチに色の登録が無いとき最低限の色を追加したい Illustrator
- スターツールがクモヒトデみたいになった場合の対処法〜Illustrator
- ドロップシャドウ効果で作成する型押し文字 Illustrator
- にわかデザイナーより数字の美
- パスファインダーの「分割」、「刈り込み」、「合流」の違い
- ボタンを指定サイズで書き出す〜Illustrator
- ボタン作成〜Illustrator
- 作成した線路の登録方法 Illustrator
- 地下鉄線路の作り方 Illustrator
- 型押し文字にテクスチャーを加える Illustrator
- 外枠にテクスチャを加える Illustrator
- 文字にエンベロープをかけた後色を変えたい Illustrator
- 文字のアンチエイリアスの使い方〜Illustrator
- 矢印キーを使用したオブジェクトの移動
- 私鉄線路の作成 Illustrator
- 線と塗り別々にスポイトツールを使う方法 Illustrator
- 袋文字の作成〜イラストレーター
- 過去のアピアランス効果が適用される〜Illustrator
サーバー
- Git〜コミットのコメント内容を変更したい時
- Git〜リモートリポジトリから必要なブランチをローカルに取得する方法
- MACで不可視ファイル（.htaccessファイルなど）を表示させる
- svgが表示されない〜サーバーの設定
- Windows10にしたらXAMPPのApacheが使えなくなる現象
- さくらサーバーでハマる罠〜パーミッションの設定
- さくらサーバーのマルチドメインの設定〜他社管理ドメイン使用の場合
- さくらサーバーの日本語Webフォントを使う方法と本文に対応させる方法
Flash
- ３Dを描画する（１）〜カスタムクラス作成／パッケージ
- ３Dを描画する（2）〜カスタムクラス作成／クラスの宣言
- ３Dを描画する（3）〜カスタムクラス作成／コンストラクタ、インスタンス化
- ３Dを描画する（5）〜オブジェクトを動かす
- ３Dを描画する（6）〜キューブ体を動かす
- ３Dを描画する（7）〜キューブ体を動かす2
- ActionScript 運動法則
- ActionScript 運動法則（２）
- ActionScript3 マウスカーソルに星を散りばめる
- ActionScriptとFlashについて
- Flash CS5で出来上がり後ステージの大きさをオブジェクトがぴったり収まるようにしたい
- Flash シェイプでオブジェクトを描くとき線の色を着けられない
- Flashで全てのフレームのオブジェクトを一度に移動するには
- Ｆｌａｓｈにおける線ツールと鉛筆とブラシ Flash
- Flashのマスク Flash
- Flashのマスクにグラデーション効果をつけてみる Flash
- Flash基本〜Flashにおける描画のポイント
- Flash基本〜オブジェクトの組み合わせ
- Flash基本〜シェイプトゥイーン
- Flash基本〜シェイプメニューを使ってみる
- Flash基本〜フレームアニメーション
- Flash基本〜ブレンドのアルファと消去
- Flash基本〜ブレンドのレイヤー モードについて
- Flash基本〜モーショントゥイーン
- Flash基本～ガイドに沿ったモーショントゥイーン
- Flash挿入のためのOBJECT タグおよび EMBED タグの属性について
- Paul Smith風マルチストライプ作成
- オブジェクト指向の概念そしてクラスとは〜ActionScript3.0
- グラフィックシンボルについて
- ステージを透明にしたい
- テキストの読み込み～ActionScript3
- モーションタイポグラフィをActionScript3で試してみる
- ローディングアニメーションが簡単に作成できるサイト
- 変形点と基準点の違い Flash
- 矢印キーを使用したオブジェクトの移動
Android
- Androidはまだありません。
Fireworks
- Fireworksはまだありません。
Java
- Javaはまだありません。