WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

SouceTreeを使用してGitHubにファイルをプッシュする

git

GitクライアントのSouceTreeを使用してGitHubにファイルをプッシュする。 以前の記事 mmmmofu.hatenablog.commmmmofu.hatenablog.com 事前準備 GitHubのアカウントを取得する。 github.com公式サイトからSouceTreeをダウンロードする。 ja.atlassian.com Git…

canvas 円を描く

こちらを参考にしました。 developer.mozilla.orgデモ http://efu.sakura.ne.jp/web/canvas/index3.html 円の描画でスマイリーフェイスを作成 円、円弧を描く arc(x, y, radius, startAngle, endAngle, anticlockwise) x、 yで指定した位置を中心、r を半径…

canvas 図形を描く

こちらを参考にしました。 developer.mozilla.org前回の記事 mmmmofu.hatenablog.comデモ http://efu.sakura.ne.jp/web/canvas/index2.html 矩形を描く canvas は 「矩形」(四角形)のみをサポートしています。 矩形 塗りつぶされた矩形を描く ctx.fillRect…

canvas基礎

こちらを参考にしました。 developer.mozilla.orgデモ http://efu.sakura.ne.jp/web/canvas/ html <html lang="ja"> <head> <meta charset="UTF-8"> <title>canvasの練習</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </head> <body> <…</body></html>

SEOチェックツール

SEO

検索エンジン順位チェックツール broadentry.com キーワード出現頻度解析ツール www.searchengineoptimization.jp モバイルフレンドリーテスト https://search.google.com/test/mobile-friendly?hl=ja ページ速度 PageSpeed Insights ウェブアプリの監査 chr…

オンマウスしたセルの列、行をハイライト

<html lang="ja"> <head> <meta charset="UTF-8"> <title>table highlight</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="script.js"></script> </head> <body> <table class="data"> <tr> <th></th> <th>Entry He…</th></tr></table></body></html>

jQueryでパーツの読み込み

デモ http://efu.sakura.ne.jp/web/include_jquery/ファイル構成 ルート ├──include │ ├──footer.html │ └──header.html ├──index.html └──script.js index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryでパーツの読み込み</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></meta></head></html>

Pug(Jade)

Pug【パグ】(旧名称Jade【ジェード】)はHTMLのテンプレートエンジン公式サイト Getting Started – PugGitHub github.comPugはNode.jsで動いているのでNode.jsをダウンロードする Node.js Pugをインストールする コマンドを入力 npm i pug-cli -gインストール…

Vue.js コンポーネント

Vue.jsはJavaScriptフレームワークjp.vuejs.orgこちらの記事を参考にしました。 app.codegrid.netデモ http://efu.sakura.ne.jp/web/vue/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.js</title> </head> <body> <div id="app"></div> <div id="app2"></div> </body></html>

カレンダーを実装できるjQueryプラグインFullCalendar

公式サイト fullcalendar.ioデモ http://efu.sakura.ne.jp/web/fullcalendar/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>FullCalendar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"> <script src="jquery.min.js"></link></meta></head></html>

Dreamweaver テンプレート

Dreamweaverでは、サイト全体で共通するブロックを 1つのファイル(拡張子.dwt)にテンプレートとして保存することができる。 複数あるファイルの共通部分を一括で変更するときに便利。テンプレートを設定したいフォルダにDreamweaverで「サイトの設定」をす…

チャットワークのメッセージをSlackに通知する

Google Apps Scriptを使用してチャットワークのメッセージをSlackに通知するBOTを作成します。 developers.google.comこちらの記事を参考にしました。 blog.engineer.adways.netチャットワーク APIトークンの取得はこちら https://www.chatwork.com/service/…

チャットワーク メッセージ記法

チャットワークのメッセージ、タスク、概要内で使えるメッセージ記法 インフォメーション [info]インフォメーション[/info]テキストを線で囲うことができる。 インフォメーション + タイトル [info][title]インフォメーションのタイトル[/title]インフォメー…

チャットワーク

チャットワークはビジネスチャットツール無料で使用できるが、無料版だと 参加できるグループチャットが14まで ビデオ通話は1対1のみ 5GBストレージ となっている。公式サイトで新規登録する。 go.chatwork.com チャットワークIDを登録 登録したら「チャット…

一つの画像に複数のリンクを設定できるクライアントサイドイメージマップ(Dreamweaverのデザインビューでのやり方)

デモ http://efu.sakura.ne.jp/web/map/Dreamweaver(CC)を開き、メニューの「表示」→「分割」→「コード-デザイン」をクリックしてチェックをつけるとデザインビューが表示される。メニューの「ウィンドウ」→「プロパティ」をクリックしてプロパティウィン…

Subversion(svn)

Subversionとは Subversion(Apache Subversion)は、さまざまなソフトウェアの開発現場において広く使われているソースコード管理システムです。 標準のコマンドラインクライアント/プロトコルの名称から「svn」と呼ばれることもあります。 https://ja.osdn…

Sassで@mixinを使う

@mixinとはSassファイルにおいて @mixin 任意の名前 と記述することでCSSを定義し、 @include 任意の名前 と記述することで定義したCSSを呼び出すことができる 引数も使用することができる。 よく使うCSSがあれば書いておくと便利。 inline-blockでの横並び…

BASEタグ

BASEタグで絶対パスを指定すると、その絶対パスが基準となり、文書内の全ての相対パスで使用される。 書いた場所以降で反映される。デモ http://efu.sakura.ne.jp/web/base/ <html lang="ja"> <head> <base href="http://efu.sakura.ne.jp/web/"> <meta charset="UTF-8"> <title>baseタグ</title> </head> <body> <a href="base/">リンク</a> </body> </html>

Excelのショートカットキー

セルの挿入 ctrl + shift + +(プラス)参考サイト excel-hack.com

Photoshopのショートカットキー

保存 ctrl + s 全選択 ctrl + a 選択解除 ctrl + d 選択範囲を反転 ctrl + shift + i 自由変形 ctrl + t 塗りつぶし 描画色 alt + BackSpaceもしくはDelete背景色 ctrl + BackSpaceもしくはDelete 移動 1px ctrl + 矢印キー10px ctrl + alt + 矢印キー 参考…

カウントダウン

デモ http://efu.sakura.ne.jp/web/countdown/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>カウントダウン</title> </head> <body> <p>2100年1月1日まで</p> <p class="countdown"></p> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="script.js"></script> </body> </html>

InstagramAPI 最新の画像を取得して表示

アカウントの作成 www.instagram.com アプリケーションの登録を行う Instagram Developer Documentation アクセストークンを取得する https://api.instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=tok…

コナミコマンド

デモ http://efu.sakura.ne.jp/web/konami-command/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>コナミコマンド</title> </head> <body> <p>↑↑↓↓←→←→BA」を入力してください。</p> <p class="text"></p> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="./script.js"></body></html>

CSS設計 命名規則

CSS

SMACSS CSSのカテゴライズ 1.ベースルール 2.レイアウト 3.モジュール 4.状態(ステート) 5.テーマ OOCSS BEM 参考サイト SMACSS Scalable and Modular Architecture for CSSの略スマックスと読む日本語版の書籍はこちらで購入できる Ja - Scalable and Mod…

Colorbox コールバック関数 独自のクローズボタンを追加

デモ http://efu.sakura.ne.jp/web/colorbox/index2.html以前書いた記事 mmmmofu.hatenablog.com <html lang="ja"> <head> <meta charset="UTF-8"> <title>Colorbox</title> <link rel="stylesheet" href="css/colorbox.css"> <link rel="stylesheet" href="css/style2.css"> </link></link></meta></head></html>

.htaccess ベーシック認証

.htaccess .htaccessというファイルを作成する。 <Files ~ "^\.(htaccess|htpasswd)$"> deny from all </Files> AuthUserFile /www/.htpasswd AuthGroupFile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user order deny,allow一つずつ解説 <Files ~ "^\.(htaccess|htpasswd)$"> deny from all </files>

横ナビゲーションをfixed 横スクロールした時はfixedさせない

横スクロールした分ナビゲーションの位置をマイナスしてついてきていないように見せるデモ http://efu.sakura.ne.jp/web/sidemenu/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ナビゲーションをfixed 横スクロールした時はfixedさせない</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></link></meta></head></html>

CSS3の色指定 HSL

色をランダムで配置 http://efu.sakura.ne.jp/web/hsl/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>HSL</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #333; } </style> </link></meta></head></html>

グリッドレイアウトをソート、フィルタリングできるjQueryプラグイン Isotope

デモ http://efu.sakura.ne.jp/web/isotope/公式サイト isotope.metafizzy.co <html lang="ja"> <head> <meta charset="UTF-8"> <title>Isotope</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

丸メニュー

デモ http://efu.sakura.ne.jp/web/menu4/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>丸メニュー</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>