初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

初心者のWEBデザイン

ディレクトリ毎に分けてZipファイルにする

複数のディレクトリがあり、Zipで圧縮したい事があります。 でも圧縮すると一つのZipになってしまいます。それをディレクトリ毎にZipファイルで圧縮する方法を書いときます。 find ./ -mindepth 1 -maxdepth 1 -type d -exec zip -r "`basename {}`".zip {} …

localhostをiphoneなどでアクセスする

Mac・PCで立てたlocalhostにiPhoneなどでアクセスする方法を記載します。http:xxx.xxx.x.x:8000Macでteminalを起動 ↓ ifconfigでIPアドレスを確認 ↓ 調べたIPをiPhoneのブラウザに入力

Terminal UNIXコマンド 検索結果から文字列を検索する grep

grepは指定したファイルに記述されている検索したい文字列を含む行を表示するのに便利です。findやxargsを応用すればもっと便利な使い方ができます。 検索したファイル名に検索したい文字列が含まれるファイルを表示する find . -name '*.txt' | grep abc ./…

Terminal treeコマンド ツリー構造を表示する

treeコマンドを使うと下記のようにツリー構造を簡単に表示できます。 . ├── Templates │ └── index.dwt ├── about │ └── index.html ├── about.html ├── contact │ └── index.html ├── css │ └── style.css ├── img │ ├── photo01.jpg │ └── photo02.jpg ├──…

Terminal UNIXコマンド 検索結果を削除する find rm xargs

Terminalで検索した結果を削除する方法を忘れるので健忘録で残しときます。 find ./ type f -name '*.txt' | xargs rm TerminalはGUIと違って削除するとファイルはゴミ箱には移動せず、 そのまま完全に削除されるので下記の方法を取るといいでしょう。 1.fin…

Illustrator 斜線の引き方

すごい参考になりました。 本当に感謝です。 ワイヤーフレームを作成する際にはとても重宝します。www.dtp-transit.jp

初心者のwebデザイン 正規表現 健忘録

最近業務で正規表現とシェルスクリプトを使うことが増えてきました。 正規表現は、ファイルの中身を検索するときに本当に便利です。忘れてしますので健忘録として残りしときます。 検索したい文字列 ※クリックで詳細説明に移動 正規表現※赤い字がメタ文字、…

Atom ショートカット エディター

Atomのショートカットを健忘録として残します。 少し重いのを省けばAtom使い勝手が良いです。(と言ってもDreamweaverよりも軽いですが) ctrl + 0 tree-view:toggle-focus ツリー・ビューとエディタのフォーカス切り替え (ツリー・ビューが閉じていれば開い…

Atom パッケージリスト

今年の5月くらいからAtomを使っておりまして、パッケージが徐々に増えてきたので忘れないように自分の設定を記述しておきます。 pigments CSSのcolorやbackgroudの設定を実際に色で表示してくれます。 open-recent 開いたことのあるプロジェクトを開くことが…

Atom メニューや設定画面を日本語化する

以前にも日本語化するパッケージはありましたが設定画面まで日本語化してくれるパッケージはありませんでした。英語が苦手な人にはベストチョイスかと。 日本の方が作成したみたいです。パッケージをインストールするだけで 日本語化されます。japanese-menu…

2進法・8進法・16進法の関係性

・8進数は一つの桁の【0〜7】の数値を表現します。 ↓ 2進数だと【0〜111】に値します。000〜111(3bit) 2進数3桁分を1桁で表現できます。 8進数の【10】は10進数の【8】で 2進数の【1000】です。 ・16進数は一つの桁の【0〜15】の数値を表現します。 ↓ 2進…

シェルスクリプト SVN Macのターミナルで差分をまとめる方法

ターミナルでSVNの差分データをまとめる方法を記述します。ターミナルを起動します。チェンジディレクトリで差分をまとめたいディレクトリに移動します。 cd 任意のディレクトリ(forUpload/以下をまとめたい場合にはforUploadまで移動します) ↓ 差分をまと…

初心者のWEBデザイン 情報技術者試験の勉強について 2進法

コンピューターは2進数で動作してます。 電気のON/OFFで動作します。0と1の2個の数字で動作します。 10進法 2進法 10進法 2進法 10進法 2進法 0 0 11 1011 22 10110 1 1 12 1100 23 10111 2 10 13 1101 24 11000 3 11 14 1110 25 11001 4 100 15 1111 26 110…

HTML Webページ内のリンクを各ソーシャルサービスに投稿(追加)する為のURL設定方法

Twitter,Facebook,Google+,mixi,Hatenaブックマークなどの投稿(追加)する為の URL設定方法を記述します。順次追加予定です。 Twitter http://twitter.com/home?status=[任意のテキストやURL] 入力したいテキストやURLを渡す方法です。 http://twitter.com…

HTML Dreamweaverでテンプレートを作成する

Dreamweaverでのテンプレートの作り方を記述する新規作成→テンプレートから作成を選択

HTML ターミナルでPythonで仮装環境を使う

Python のみでWebサーバを提供できるのでその動作確認。今回は下記SimpleHTTPServerモジュールを使用する。ターミナルを起動 ↓ ドキュメントルートに移動する ↓ 【python -m SimpleHTTPServer】と入力しエンターを押す以上で仮装環境を使えます。MacでPython…

CSS Firefoxでリンクの点線を消す

Firefoxでネットを閲覧しているとリンクボタンに点線が かかっていることがあります。Firefox Chrome ちょっとしたことですがこれを消す方法がありますので記述します。 a:link, a:visited, a:active, a:hover { /* FireFox リンク選択時の点線を消す */ ove…

CSS 透過の調整とIE対応についての注意

CSSで透過の調整をするときのお話です。CSS3での透明化 セレクター { opacity:0.7; } これだけで最新のブラウザでは不透明度を調整できるはずです。 昔のIEで透過の調整する場合にはopacityは効きませんので 下記の記述が必要になります。注意点:hoverなど…

CSS 可変で要素を中央に寄せる方法

可変した時に左右の幅が均等に分かれる記述方法を書きます。 body{ max-width:一番大きな値を入力 margin:0 auto; } #container { margin:0 auto; position:relative; }

健忘録

これからの「標準」を学ぶ マルチデバイス対応サイト構築 http://www.amazon.co.jp/%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E3%81%AE%E3%80%8C%E6%A8%99%E6%BA%96%E3%80%8D%E3%82%92%E5%AD%A6%E3%81%B6-%E3%83%9E%E3%83%AB%E3%83%81%E3%83%87%E3%83%90%E3%82%…

グリッドシステム計算ツール 「Gridpx」

グリッドシステム計算ツール「Gridpx」 Webデザイングリッドデザインを作る際の面倒な計算がとっても簡単に出来てしまう、便利なグリッドシステム計算ツール「Gridpx」www.kenjisugimoto.com

Word 空白の最終ページの削除

削除したいページにカーソルを合わせるメニュー→書式→段落→「インデントと行間隔」の設定で、「1ページの行数を指定時に文字を行グリッド線に合わせる」のチェックをはずします。ツールバーでフォントサイズを「1」にすれば、概ね削除されます。

HTML CSS Javascript スマフォサイトナビをクリックすると表示・非表示にする

<html lang="ja"> <head> <meta charset="UTF-8"> <title>モバイルサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <link rel="apple-touch-icon" href="touch-icon.png"> </link></meta></meta></meta></head></html>

Illustrator インデントを使う

Illustratorで文字組の際のインデントの変更方法について記述します。テキストボックスを選択ツールでクリックします。クリックした状態で⌘+Shift+Tで インデント調整のタブが表示されます。 三角の記号を動かすことによってインデントを調整することができ…

Googleフォームで任意のメールアドレスに通知する方法

Googleフォームで問い合わせがあった場合に、任意のアドレスに 通知をする方法を記述します。 GoogleのアカウントにログインしGoogleドライブからフォームを 回答先を選択します。 「ツール」→「スクリプトエディタ」を選択ファンクション欄に 下記を入力し…

シェルスクリプト ターミナルの基礎

シェルスクリプトを書いてみます。ls - ディレクトリの中身を表示するpwd - 現在位置を確認するcd - ディレクトリを移動するこれから徐々に学んでいこうと思います。

Javascript CSS3 ハンバーガーボタンを作成する

画像などは使わず、CSS3とjavascriptでハンバーガーボタンを作成してみます。 クリックすると×に変わります。 <body> <div class="item"> <button class="cmn-toggle-switch cmn-toggle-switch__htx"> <span>toggle menu</span> </button> </div> </body> </html> /* ============================================================================= DEMO STUFF ======…

jQuery Google画像検索風に表示する

Google風に画像を表示できるjQueryを記述します。Googleで画像を検索するとサムネイルが出てきます。 画像をクリックするとスペースが空いて大きな画像を 表示します。 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/google.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/google.js"></script> <title>…</link></meta></head></html>

jQuery ホバーした方向によってスクロールの方向も変わる

職業訓練の先生に教えてもらったサイトのjQueryの動きが カッコ良かったのでアナライズして余計な記述を削ぎ落として 分かりやすくシンプルに変更してみました。画像をホバーするとホバーした方向から画像にカバーがかかる エフェクトです。 デモはこちらに…

jQuery Frameworksでソート機能をつける

jQueryでソート機能をつけてみます。 とてもシンプルな記述でソートがつけられます。以前のデータの流用なのでFancyboxも適応しているものになります。 <html> <head> <meta charset="UTF-8"> <title>Fnacy Box</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.fancybox.css"> </link></link></meta></head></html>

topへ戻る