webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

git GUI

windows コマンドプロンプトから、「git gui」と入力。 そうするとgit GUIが出てきます。 リモートリポジトリから、クローンを作成します。 「target directory」は事前に作成するのでなく、この操作によって(clone)によって新たに作成される。 「clone」…

画面レイアウトのまま印刷ができない

、、というご指摘が。 あまり考えたことなかったですね。 キットそんなに大変なことにはならない、と感じていたので調べてみると思いのほかサクッと片付きました。よかった! 下の記事を参考に、PC用のスタイルシートを「screen」から「print, screen」に変…

Humberger Menu 自己流備忘録

某案件のため、(PC SPの切り替えで要素の移動が激しいソースだった、、、)時に作ったハンバーガーメニュー。作った日の備忘録。 ハンバーガーメニューのコーディングは昔から大嫌いです、、、がよく作らされます。 1. まず外側の正方形を作る。今回は<p> id="bt</p>…

ハンバーガーメニュ

ハンバーガーメニューの実装 (by yachin29) <nav> <div id="btn"><span id="hum"></span></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Philosophy</a></li> <li><a href="#">Press</a></li> <li><a href="#">About</a></li> </ul> </nav> スタイルシート @m…

display:none, visibility:hidden の違い

他のサイトからの転載。よくわかりました! visibility:hiddenは名前の通り、要素はあるけど見えない状態。display:noneは、要素も取得されず、完全にその場にない扱い。 検証準備 html <html lang="ja"> <head> <meta charset="UTF-8"> <title>difference between visibility hidden and display none</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>

sp pc 画像変換

レスポンシブデザインでPC用の画像と、SP用の画像を変えるときに使うスクリプト。今回の案件では、bxsliderの画像(比率)をPCとSPで変えるため、PCとSPでボタンの画像を変更するために使いました。 1. 画像のフォルダに、PCとSP用の画像を用意しておきます…

GitHubとSourceTreeの導入

GitHubとSourceTreeの導入 - WEBサイト制作の勉強からの転載 自分のレファレンス目的です、、、 GitHubとSourceTreeの導入 Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコード…

相対パス、絶対パス、ルートパス

相対パス (普段使い) いまいる「ファイル」を起点にして、場所を指定する。 いま、コードを記述しているファイルが起点。 いま記述しているファイル(例えばindex.html)と同じ階層にあるファイルやフォルダ(例えばcommonフォルダ)は以下のように記述す…

windows10 電源管理

「高速スタートアップを有効にする」チェックを外す。 先日無償アップグレードが終了した『Windows10』ですが、初期状態で有効になっている『高速スタートアップ』と呼ばれる機能が様々な不具合・異常動作の原因になっているようで、8/12現在ではこの機能を"…

gitを使って、チームで作業する準備

まずはリモートサーバー上での作業になります。 リモートサーバーに、 1. チームを作る 2. チームのメンバーを登録する 3. チームのフォルダ(=リポジトリ)を作る 4. 各個人のフォルダ(=ローカルリポジトリ)とチームのリモートリポジトリを紐づけます。…

git install その3

これが「gitビューを表示する」アイコン。 クリックするとタブの中身が表示される。 新しく「リポジトリ」を作成しただけでは、ファイルの変更が追跡できていません。 追跡できていないファイルはgitビューで緑色の表示になります。 緑色の表示がされている…

dreamweaverでgit その2 リポジトリの作成や紐づけ

gitのインストールがすんだら、dreamweaverを立ち上げる。 ひとまず作ったhtmlファイルをローカルサーバー上にあげて、みんなでgitをどのように使うのか、自分で確かめている段階です、、、、 以上で、gitリポジトリを作成できました。 追記: bitbucketを使…

dreamweaverでgit その1

Git - Downloads adobeのサポートには 「gitクライアントはデフォルトの設定でインストールすることをお勧めします」 とあるので、下記の通りデフォルトでインストールしました。 いろいろあるけれども、とりあえずデフォルト。

capture one 10 background の色を変更する

トリミングフレームの外側を、ソリッドな白にするとき。

人が作ったボタンを分解してみる

分解した状態。 一番下から、執拗な分析をしてみる。 「描画モード」は変更しても変わりはない。 「不透明度」を「75%」にするのも味付け程度。 「オフセット」に対してぼかしは2倍。 「カラー」ではなく「濃さ」にしている。ここがポイントだろう。 「1…

black and white bitmap image変換してイラストレーターに再配置

splatterを使って遊ぶ。 resizeしてから、部分によってみるとこんな感じ。 ウォーターマークも見える。 グレースケールに変換する。目的は白黒のビットマップイメージを作ること。 破棄します。 OPTION! フィルター→ぼかし→ガウス 半径は1.5px 拡大するとこ…

black and white bitmap image

helpx.adobe.com Convert an image to Bitmap mode Converting an image to Bitmap mode reduces the image to two colors, greatly simplifying the color information in the image and reducing its file size. When converting a color image to Bitmap …

photoshop color theme

「ウィンドウ」「エクステンション」「adobecolorテーマ」 下の写真で、モデルが着用しているピンクの衣装の補色を背景にしてみる。 まず、カラーピッカーのサンプルを取得する範囲を広くする。 ピックアップした色が、描画色(active colror)になる。 最初…

indesign tabloid

「プリセット」「タブロイド」 初期設定ではこんな表示。 「表示」「オーバープリントプレビュー」 プレーンな状態になる。 横向きにして、見開きのチェックを外す(今回はA4のプレゼン資料を作る想定)、サイズをA4に設定する。 「ファイル」「配置」ショ…

パスのオフセット

星の先端をベベル結合にしたくないので、比率を大きくしておきます。 選択したパスの内側にオフセットしたいときはオフセット量を「ー」マイナスにしてあげればよい。 これを繰り返すと、、、、

マイター結合

線幅10ptで鋭角を描く。 角の形状は「マイター結合」 比率は「5」 このとき「線幅」*「比率」=50という値が重要! この値がマイター結合の臨界点(値)になる。 マイター長が「線幅」*「比率」の値を超えることはない。 マイター長が値を超えたときは、…

illustrator 円を中心から描く

楕円形ツールで円を描くと、外接する正方形の左上の頂点から描くことになる。 円(楕円)を中心から描きたい時は。「alt」ボタンを押したままドラッグすると中心から描くことができる。 四角形ツールでも、多角形ツールでも同様。

photoshop パスの境界線を描く

ペンツールでパスを描く 新規でレイヤーを作る 「ブラシ」を選択 「強さのシュミレート」にチェック。 こうしておくと、ペンタブレット使用時に、プレッシャーを感知してブラシの太さを変えたような表現ができる。 あわせて、ペンのオプションでも「サイズジ…

photoshop pentool rubberband

photoshop pentoolのオプションを設定する。 上部のオプションから「ラバーバンド」にチェックする。 こうしておくと、曲線を描くときに、軌跡が表示されるのでどこにアンカーポイントを打てばよいかイメージしやすい。 切り抜きの時に便利。

illustrator pentool の操作をいまひとたび復習したい

パスを書き終えるには、、、 ペンツールでパスを描く。 クローズしないでやめる(書き終える)には「ctrl」を押して「ペンツール」を「ダイレクト選択ツール」にして、どこかをクリックすればよい。 クローズドパスを途中で切る方法 切りたいパスを選択した…

jpeg converet

WEBカタログ製作の時など、PDFをJPEGにまとめて変換。 acrobatのactionを使用する。 「アクションウィザード」 「新規アクション」 「保存と書き出し」→「JPEG形式ですべての画像を書き出し」を選択する。 「ユーザーに確認」のチェックを外せば自動的に同じ…

PDF action wizard

複数のファイルに同じ処理をしたいのでアクションを作る。 PDFの埋め込まれたpropertyをすべてのファイルから消去したい。 「文書の概要を追加」 「ユーザーに確認」チェックボックスを外す。 招請を設定する。今回はすべてを空欄にしたいので下のように入力…

next FTP

ほぼサーバーの問題ではあるが、FTPでも速度は上がらないものか、、、 ということで悪あがきをしてみました。 結局のところ早くなったのか全く体感では分かりません。 気持ちの問題です!

バッチ処理/シェルスクリプト その2

@echo off cd /d %~dp0 sass --watch --style expanded sass:css テキストエディタに上の記述をしてから、拡張子を.batにしてから保存。 こんなレイアウトにして実験をしてみる。 黄色の個所を「600→90」に変更しました。 テストします。 バッチ処理をしなけ…

バッチ処理/シェルスクリプト その1

「--watch」オプションは、scssファイルが書き換えられると自動でコンパイルされて、cssファイルも書き換えられる。 scssフォルダ内のstyle.scssファイルを「--watch」して、書き換えたら「--style expanded」でcssフォルダ内のstyle.cssを更新する。 という…

sass complie output option

「windows」+「R」、「cmd」 「sass test.scss:test.css」と入力する。 と、このように出力される。このようにオプションを指定しないと「nested」オプションになる。 次に、「sass test.scss:test.css --style expanded」と入力する。 するとこのように表示…

sass command prompt

「windows」+「R」 ファイル名を指定して実行 「cmd」 コマンドプロンプトの表示 「ホームフォルダ」以外にあるscssファイルをコンパイルするときには、ファイルのあるフォルダを「shift」+「右クリック」するとそのフォルダに移動できる。

sass to css

sassのファイル(.scss)をcssに変換する→コンパイル Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 - 公式サポートサイト 「test.scss」をホームフォルダ→c: ¥users¥(アカウント名)のおく。 ホームフォルダに置いた「test.scss」を…

sass install windows

RUBYのインストール 「windows」+「R」でファイル名を指定して実行 「cmd」と入力してコマンドプロンプト 1行目はOSのバージョン 2行目はコピーライト 3行目、ファイルパスの後にに入力する。 RUBYがインストールされているか確認する コマンドプロンプト…

iphone ipadの写真をpcに移動する

windows用のitunesが遅いのでなんとかしたい。 まずは自動の動機をしないように設定する。 写真や動画をすべてPC上に移動させる。 これは通常の操作でできる。「エクスプローラー」を起動。 表示されたデバイス上のファイルにアクセスできる。 iosデバイスは…

windows10 update

場所が変わって、時々忘れる。

動画整理用ブログも作ってみます

photoshop shortcut

photoshopのアクションを使うときに、特定のレイヤーを指定しないで一連のフローを実行させるのに必要なショートカットを2つ。 [Shift] + [Ctrl] + [Alt] + [N]レイヤーを新規作成(ダイアログボックス無し)。 [Shift] + [Ctrl] + [Alt] + [E]背景を含む全て…

stock photo

いまや写真は拾ってくるもの、、、ゴミか??? というわけでどれだけ良い写真を、ただで拾ってくるかも腕なのか? unsplash.com https://stock.adobe.com/jp/ www.shutterstock.com ☟一日ひとつは無料でいただけるので、コツコツストックしましょう。 www.a…

font を加工する

illustrator 「アピアランス」でフォントを加工する。 最初は、エッジをギザギザにする。 「パス」「パスの変形」「ラフ」を使用する。 パラメータの値を変えて、2度ラフをかけると、より複雑な味わいになる。 フォントの種類によって効果が変わってくる。 …

photoshop 不要な透明部分を削除する方法

ポラロイド写真をスキャンして、フレームだけを利用する。 このとき外側の透明部分が必要ないので削除したい。 「ctrl」+「サムネール」でフレームだけを選択する。 「イメージ」「切り抜き」 これで切り抜けます。

wacom for photoshop

photoshop用にwacomを設定する wacomには説明書がないから不便、、、 youtubeにあるチュートリアルを参考にペン、面倒。 Five Photoshop Tips for Wacom Tablet Beginners - YouTube ペンのupperbuttonに「一つ戻る」、lowerbuttonに「右クリック」を設定す…

複数のカスタマイズしたgooglemapsを配置する(ここでは6つ)

js/outline.jsの内容 // JavaScript Document function initialize() { var latlng_01 = new google.maps.LatLng(35.700122, 139.776031); var myOptions_01 = { zoom: 17, center: latlng_01, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map_01 = ne…

wacomの設定

コントロールパネルでする。 初期設定は以下の通り まず、ペンのボタンに割り当てる機能を変更する。

javascript 再帰関数 / ハノイの塔

ハノイの塔 scr=source aux= auciliary 補助 dst=destination ここから本題、、、 var hanoi = function (disc, src, aux, dst){ if (disck>0){ hanoi(disc -1 , src, dst, aux); →ここが1行目 document.write ('move disc' + disc + 'from' + src + 'to' + …

WordPressでpathやURLを取得するためのタグと出力例まとめ( すぐにリンクするためのメモ)

pathはローカルの場合は「C:\xampp\htdocs\xampp\example/」。サーバの場合は「/var/www/html/example/」といった感じになります。 関数解説出力 ABSPATH インストールされた場所のパス C:\xampp\htdocs\xampp\example/(ローカルの場合)/var/www/html/exam…

wordpress theme "asteria lite" を使ったカスタマイズ作業の段取り

画像やリンクのパスをどのように指定するのがよいのか? 1月15日に考えたこと、、、 functions.phpに関数を追加する 以下のコードをfunctions.phpに追加する。 絶対パスの、「ホスト名」部分を省略して記述する段取り。 function delete_host_from_attachmen…

wordpress theme "asteria lite"

wordpress ページの種類と、ファイル名の関係 asteriaテーマフォルダの中身 黄色い部分が固定ページのテンプレートファイル。 page.phpのソースコードは以下。 <div class="fixed_site"> <div class="fixed_wrap singlefx"> <div class="page_tt"> <div class="center"><h1 class="postitle"></h1></div></div></div></div>

wordpress 固定ページ用テンプレートを作る方法。

固定ページを新規で追加する。 このときにプルダウンメニューで表示されるようなテンプレートの作り方。 ファイルの格納場所と、ファイル名について。 例えばaccessのページであれば、page-access.php profileのページであれば、page-profile.php このように…

wordpress absolute URLs

既存のwordpressサイトの見栄えを含めた改修作業をすることになって、授業でwordpressを教わった時から、トラブルの原因と思われた、絶対パス参照の問題に再びぶちあたった。 そもそも、wordpressの開発者が意図してそのような設計にしているのだから、その…