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

webかたつむり

ウェブデザインを勉強中

xampp localhost

qiita.com やりたいこと デフォルトでは,XAMPPのバーチャルホスト(localhost)のパスは,Cドライブ直下にインストールした場合C:\xampp\htdocsとなっているが,C:\Users\Documents\testなどの任意のパスもバーチャルホストにしたい. 環境 Windows 8XAMPP …

xampp localhost

qiita.com やりたいこと デフォルトでは,XAMPPのバーチャルホスト(localhost)のパスは,Cドライブ直下にインストールした場合C:\xampp\htdocsとなっているが,C:\Users\Documents\testなどの任意のパスもバーチャルホストにしたい. 環境 Windows 8XAMPP …

git hub からクローンを作成する

gitをインストールしてから、「gitGUI」を開く。 「clone existing repository」をクリックして、gitHUBにあるリポジトリのクローンをローカルに作成する。 「source location」にgitHUBのリポジトリURLを入力する。 「target directory」にはローカル上の保…

git hub install

サインアップ画面。個人のアカウントを登録する。 publicかprivateかを選択。privateは有料。 プランはいつでも変更が可能みたいです。その下のチェックボックスをクリックして、先に進みます。 自分のチームを作成する。 チームの名称と、請求書の送り先と…

リモートデスクトップ

faq3.dospara.co.jp

画像ファイル名だけの一覧を抽出する / indesign データ結合 その2

手順2 CSVのデータをindesignに流し込む 「ファイル」「新規作成」 ドキュメントの設定をする。 続いて「マージン」「段組み」を設定する。 indesignでオブジェクトを作るには必ず箱が必要になります。 画像を配置するときは「画像を入れる箱」 文字を配置す…

右開き、左開き

右綴じ・右開きとは、本を読み進める際にページを右に開いていく形式のものを指します。表紙を表にした場合、右側が綴じられているものです。 日本語の縦書きでは、視線の進行方向が左に向かっていくため、右綴じは縦書きの書籍・雑誌などで多く採用されてい…

インデザインのカタログデータから、WEB用の商品画像一括で作る

新規ドキュメントを作って、ページの設定をする。 最終的に必要な商品画像のサイズを入力します。 ここでは800px*800pxに設定します。 四隅のマージンを指定します。 それぞれの商品画像で、決められた位置にロゴや、商品コードなどを配置しなければいけない…

画像ファイル名だけの一覧を抽出する / indesign データ結合 その1

目的 indesignを使って、コンタクトシートを作る。 サイズはA4(横)。 3:2の画像を4枚配置する。 各々の画像の下にはファイル名(テキスト)を記載する。 画像のファイル名(あるいはキャプションのようなテキスト)と画像のファイル名を列挙したCSVフ…

basic認証を使ってみたい、、、

以下を参考にしてみます。 いまさらながら、Basic認証のつけかた - Qiita まずは、IDとパスワードを作成する。 https://ssl11.secureserver.jp/~shtml/htaccess/make_htpasswd.html 以下のような画面が出てくる。 AuthUserfile /フルパス/.htpasswdAuthGroup…

swiper slider

お役立ち記事は保存したい。 qiita.com jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。 【使い方(Usage)】 GitHubから最新バージョンのSwiperをダウンロードする。 Swiper 下記をHTMLに記載 .html <head></head>…

jsの復習 objectリテラル

コピペばかりで、jsを忘れてしまう。 たまには復習してみる。 // JavaScript Document var flight = { airline: "ocianic2", number: 815, departure: { IATA: "SYD", time: "2017-07-29", city: "Sydney" }, arrival: { IATA: "LAX", time: "2017-07-30", …

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)になる。 最初…