webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

next 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の開発者が意図してそのような設計にしているのだから、その…

illsutrator 文字パネル初期設定

javascript object

オブジェクトリテラルは、「2つのcurly brackets」で囲まれ、その中に「name」と「value」のペアが列挙されたもの。commaでつなげる。 nameはalphabet, number, underscoreを使用する。 使用していない場合、および予約語を使用する場合は、doublequotation …

DOM, node について

DOM document object model documentのツリー構造そのものなのか? node DOMツリーにぶら下がっているオーナメント。 それぞれのHTML要素。 nodeとは瘤のこと。

jQuery append prepend

before リファレンスするのは「.vacation」。 このクラスの要素に対して前に配置する、これがbefore。 「.vacation」との繋がりはない。(関係性がない) after beforeの反対。これも関係性はない。 prepend 「first child」として追加する。 「.vacation」…

jQuery selector まとめ

基本形 $(" "); これさえ知っていればあとはCSSと同じ。 $("li"); $("p"); $(#id); $(".class"); $("#id li"); $(".class li"); pseudo selector pseudo 擬似 :first :last :odd :even liのindexは、先頭が「0」(配列と同じ) ゆえにeven(偶数)、は先頭…

アコーディオンメニュー js

function showHide() { var para1 = document.getElementById('news1Paragraph'); var para2 = document.getElementById('news2Paragraph'); para1.style.display = 'block'; para2.style.display = 'none'; var title1 = document.getElementById('news1Tit…

Date(); の復習 / 日付の表示

<body> <h1 id="now" style="color: red; textalign: center; margin: 0 auto; width: 600px;"></h1> <script> function now(){ now = new Date(); year = now.getFullYear()+'年'; month = (now.getMonth()+1)+'月'; date = now.getDate()+'日'; hours = now.getHours()+'時'; minutes = now.getMinutes()+'分'; seconds = now.…</body>

scriptの記述場所

htmlのタグは基本的に上から順番に読み込まれる。 scriptタグがheadタグ内にあり、先に処理されている時点でまだIDを持つタグが読み込まれていないと、getElementById('id');は実行されないでエラーになる。 うまくいかない <html lang="ja"> <head> <meta charset="UTF-8"> <title>display Date</title> <script> var now = new</meta></head></html>…

PDFのファイルサイズを縮小する 02

引き続き、PDFのファイルサイズを縮小するための考察。 「最適化パネル」の「オブジェクトを破棄」が気になった。 そこでテスト。 ケースによるだろうが、元のファイルがどのくらいサイズダウンできるのだろう? ちなみに最適化に際して、「標準」を選択した…

PDFのファイルサイズを縮小する 01

Acrobatヘルプ | PDF のファイルサイズを小さくする方法 (Acrobat DC) このところPDFのファイルサイズについて、いろいろ考えていたが、このADOBEの文書が参考になると思ったので転載。(必要な時にすぐ検索用) PDF文書の構成要素を調査する 「表示」「表…

PDFを画像変換、リサイズしてから再びPDFに変換、、、

渡されたPDFファイル、ページ毎のサイズが違う。 ミッションは、閲覧用にページのサイズを揃えなくてはいけないこと、そしてPDFのファイルサイズを小さくすること。 どのようなワークフローがいいのか、、、 分からないときは実験する。 実験 オリジナルのPD…

クリックすると画像が置換する

クリックすると画像が置換する 3枚の画像をクリックするたびに置換する。 ループにする。 <script> var images = new Array(); images[0]= 'images/d1.jpg'; images[1]= 'images/d2.jpg'; images[2]= 'images/d3.jpg'; var i = 0; function changeImg(){ if(i==2){ i…

更新用タイマー なんとなくよさそうです、、、保証なし

<script> /*URLの配列*/ var url = new Array; url[0] = 'index.html'; url[1] = 'index_new.html'; //変更後のURLを入力する。 /*日付の配列*/ var date = new Array; date[0] = new Date(1970, 00, 01, 00, 00, 0000); date[1] = new Date(2017, 00, 05, 22, 30, 0…

javascript location object

window.location window.location.href window.location.pathname

window.prompt(); window.confirm();の戻り値

window.prompt(); <script> var thisYear = window.prompt('今年は西暦何年?'); console.log(typeof thisYear); </script> テキストボックスに入力しても、しなくても(空文字列でも)戻されるのは。string。入力しない場合はからの文字列。 cancelをクリックすると、戻され…

jsの練習

おみくじ <script> var num; num= Math.floor(Math.random()*100+1); console.log(num); if(num == 77 || num==100){ document.write('大吉'); }else if(num%10==3 || num%10==5 || num%10==7){ document.write('中吉'); }else if(num%10 == 4){ document.write('凶'</script>…

java script練習帳

javascriptは大文字と小文字を区別する。 これを間違えるといっさい動きません。 変数の定義もすべてcamelCaseで記述してみようと思う。 innerHTML = すべて大文字 document内部の各要素には必ず「innerHTML」propertyが存在する。 「Html」と記述して、迷路…

class instance

クラスとオブジェクトとインスタンスの関係 - Qiita からの転記。 クラスとインスタンス クラスは設計図で、インスタンスはその設計図を実体化したもの(実体化することをインスタンス化という)。 例えば、人間という言葉を想像した時に、思い浮かべるものは…

Date object

注意すること getFullYear(); 西暦表示はgetYearではない。 getMonth(); 1月は「0」。配列の一番目。 getDay(); は変換しないといけない。配列の一番目は日曜日。 Date object getYearメソッドは、1900年に対して加減算する。 今年は117つまり1900+…

sp movie

スマートフォンで動画の反省点。同じ轍を踏まないための備忘録 spブラウザーでの使用で、html5 videoタグを使用すると、autoplayにならない。自動再生するためには他の方法を用意しておかなくてはいけない。写真のフェードイン、フェードアウトであれば、代…

発音記号を表示する

下の黄色い部分の発音記号を、htmlで表示するにはどうすればよいのか? そんな時の備忘録 まず基本的な表記の方法について調べる、、 英語を学ぼう - 英文テキスト・発音記号変換 - 変換のルール そして、HTMLでの表記を探します。 発音記号を表示する - 戦…

illustrator 落書きオプション(後日追求しよう、、、)

photoshop 描画色と背景色

photoshopで新規ファイルを作る。 いったい、この「白」はなんなのか?という疑問、、、 長方形ツールを使って、長方形を作る。 描画色は「グレー」背景色は「赤」。 長方形を移動しても、長方形が移動するだけ。なんのこっちゃ?? レイヤー構造はこんな感…

antique taste fontantique

アンティーク風、地図を作るときに使ったフォント。 memorandom!

handwritten stroke illustrator

少しだけ直線をラフにする方法。 「線」を「線」のままではなく、「拡張」して「形」する。 weightを持ったstrokeではなく、「fill」と「stroke」に拡張します。 「オブジェクト」「分割、拡張」 「効果」「パスの変形」「ラフ」 「パラメータ」の意味はよく…

もうちょっと、organic なDrop Shadowがほしいと思った、、、

ドロップシャドーをつけたいレイヤーを選択。 「alt」+「ドラッグ」でレイヤーを複製する。 複製したレイヤーを「選択範囲」にする。その方法は以下の通り、、、 photoshop レイヤーを選択して、クリックするとバウンティングボックスが現れる。 このとき「…

illustrator で作成した、、、

illustrator で作成したレイヤー構造を そのまま photoshop に移植する 「レイヤーパレット」「サブレイヤーに分配(シーケンス)」 いったいどんな英語の邦訳なのか?センスを疑う分かりにくさ、、、 それから「ファイル」「書き出し」書き出し形式を「psd…