Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

デザイン作成で役立つテクニック_02

Photoshopでパスに沿って文字を入力する パスに沿って文字を入力する方法 (Photoshop CC 2015)文字をパスの逆側に移動する際には、 黒い矢印(パスコンポーネント選択ツール)で パスを横切るようにドラッグ。 イラレで円を分割する Illustrator で円を均…

デザイン作成で役立つテクニック_01_パターン

イラレでのパターン小技 パターンを作成して登録する 斜めストライプのパターンを作りたい | 7日間イラストレーター超速マスター!使い方と裏ワザを暴露 パターンを良き位置に配置する パターンの位置を楽して合わせる方法 | 鈴木メモ パターンだけ拡大・縮…

Photoshopを使いこなす・01

Adobeの公式サイトにあるチュートリアルから学習する。普段のPhotoshopの使い方よりも、効率的な使い方がある、 また、自分のPhotoshopでの癖が、効率を悪くしているかもしれない、 ということで、一通りためしてみることにしました。 (1)のチェックリス…

webリテラシーの学習・03 Web業界で使われる単語 つづき

参考 ferret-plus.com わからなかった単語 KPI(ぼんやりとは知っています) KGI(ぼんやりとは知っています) 参考: ferret-plus.com★KPI(Key Performance Indicator)とは、重要業績評価指標と呼ばれ、最終的な目的を達成するための過程を計測するための…

webリテラシーの学習・02 Web業界で使われる単語 つづき

参考 ferret-plus.com わからなかった単語 エスカレーション エスカレーションとは、マーケティング用語、特にコールセンター用語で、顧客対応においてオペレーター自身だけで対応が困難な場合、上位の管理者やスーパーバイザーなどに交代して対応してもらう…

フリーのフォントをひろう

自分のPCにまだDLしていない、 商用利用可でフリーのフォントが拾えるサイトを探します。作るのが大変で果てしないフォントを、無料で公開してくださっている皆さんに感謝です。GL-築地 http://gutenberg.osdn.jp/font/ja.html?コーポレート・ロゴ 「コーポ…

Webリテラシーの学習・01 Web業界で使われる単語

参考 ferret-plus.com わからなかった単語 アウトバウンド 勧誘、案内などの電話を外へかけること ビジネス一般では、企業側が、顧客からの電話や来訪などを受け付ける形態の業務。 アウトバウンド⇔インバウンド アクイジション(acquisition) 広くは「取得…

Webの動画広告についてのメモ

動画広告についての記事 viibar.com dmlab.jp liskul.com www.movie-times.tv ferret-plus.com www.cyberagent.co.jp www.cyberagent-adagency.com Aeのチュートリアル helpx.adobe.com ae-style.net 動画広告の例 チキンラーメン www.chickenramen.jp

自分のポートフォリオサイト用記録

わからなくなった部分のメモ☆レスポンシブで、spサイズのときcssのoverflow: hidden; を解除する overflow-スタイルシートリファレンス:参考サイト☆埋め込み動画(youtube)を可変サイズに Youtubeなど埋め込み動画をスマホ表示用に可変サイズにする | ウ…

jQuery:無限スクロール

Jockum Nordström|絵画の本:完成版にリンク ※これをスクロール分、別フォルダで作成する <html lang="ja"> <head> <meta charset="UTF-8"> <title>Jockum Nordström|絵画の本</title> <link rel="stylesheet" href="../css/style.css"> <link href="https://fonts.googleapis.com/css?family=PT+Serif:700" rel="stylesheet" type="text/css"> …</link></link></meta></head></html>

レスポンシブ:企業サイト

TimeSwitch|トップ:完成版にリンク <html lang="ja"> <head> <meta charset="UTF-8"> <title>TimeSwitch|トップ</title> <meta name="viewport" content="width=device-width"> <meta name="apple-mobile-web-app-title" content="TimeSwitch"> </meta></meta></meta></head></html>

jQuery:CSS3: KIRINのサイトを真似する

ZOU|TOP PAGE:完成版にリンク jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>ZOU|TOP PAGE</title> <meta name="viewport" width="device-width"> </meta></meta></head></html>

jQuery:プラグイン:Masonry

isotope:完成版にリンク Masonry:本家サイト jQuery プラグイン Masonry の使い方と設定 | Web Design Leaves:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>isotope</title> <style> html,body,p { margin: 0; padding: 0; line-height: 1.0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Got</meta></head></html>…

jQuery:プラグイン:isotope

isotope:完成版にリンク Isotope:本家サイト [JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope | コリス:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>isotope</title> <style> html,body,p { margin: 0; padding: 0; line-height: 1.0; font-family: "ヒラギノ角ゴ Pro W</meta></head></html>…

jQuery:flexbox:メガドロップダウンメニュー

メガドロップダウンメニュー:完成版にリンク ※WORKSのみ実装していますメガドロップダウン - Webデザインの勉強 ちょっとだけプログラムの勉強:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>メガドロップダウンメニュー</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> </link></meta></head></html>

CSS3:flexbox

CSSを一行プラスするだけで横並びにできる 横並びになった要素の高さが最初から揃ってる 要素を上下左右、好きな順序に並び替えられる 高さの異なる横並びの要素を、簡単に上下中央揃えにできるナビゲーション版 Flexboxを使ったナビゲーション:完成版にリ…

レスポンシブ:VOGUEのマネ

全面レイアウト:完成版にリンク VOGUE JAPAN 15th Anniversary 1999~2014:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>全面レイアウト</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

スマホのタッチアイコンを設定する

タッチアイコンを設定する:完成版にリンク タッチアイコンの設定方法 - WEBサイト制作の勉強|フェリカテクニカルアカデミー:参考サイト作成した画像 192px × 192px、pngデータ <html lang="ja"> <head> <meta charset="utf-8"> <title>タッチアイコンを設定する</title> <meta name="apple-mobile-web-app-title" content="testtest"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>

100vh:ヒーローヘッダー

ヒーローヘッダー:完成版にリンク height:100vh という単位 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ヒーローヘッダー</title> <style> html,body,h1,p { margin: 0; padding: 0; } #box1 { background: url(img/hato.JPG) no-repeat; width: 100%; height: 100vh; background-size: cover; } #box2 { backgro</meta></head></html>…

Twitterのウィジェットをつくる

twitter のプラグイン:完成版にリンク 埋め込みタイムライン | Twitter Developers:参考サイト Login on Twitter:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>twitter のプラグイン</title> <style> #twitter { width: 30%; } </style> </head> <body> <div id="twitter"> </div></body></html>

jQuery:プラグイン:MixItUp:フィルタリング

フィルタリング:MixItUp:完成版にリンク MixItUp:参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>フィルタリング:MixItUp</title> <link rel="stylesheet" href="css/mixitup.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>

jQuery:プラグイン:Slick

slickの使い方:完成版にリンク レスポンシブに強いカルーセルスライダーslickの使い方|Gimmick log:参考サイト <html lang="ja"> <head> <meta charset="utf-8"> <title>slickの使い方</title> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> <script src="js/jquery-2.2.1.min.js"></script> </link></link></meta></head></html>

jQuery:プラグイン:LightBox

LightBox+カルーセルパネル:完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>LightBox+カルーセルパネル</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/scrollable-horizontal.css" > <link rel="stylesheet" href="css/lightbox.css" > </link></link></link></meta></head></html>

jQuery:タブパネル

display-tableを使ったタブパネル:完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>display-tableを使ったタブパネル</title> <link rel="stylesheet" href="css/style_tab01.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/current.js"></script> </head> <body> </body></html>

イラストレーター:SVGデータ

★SVGファイルについて ・SVGファイルはベクトルデータで構成されているので、拡大してもぼやけない 1 イラレでファイルを作成 2 オブジェクト > アートボード > 選択オブジェクトにあわせる 3 別名で保存 > svg枝豆隊長のデータは、もとファイル(png)だと…

jQuery:プラグイン:FlexSlider2:SVG:枝豆隊長

枝豆隊長:完成版にリンク★以前の枝豆隊長に手を加える ・ハンバーガーメニューを作ってみる - 別ファイルで作成して、スマホ画面用のメディアクエリ部分に当てはめる - 幅指定、ボーダーの指定を修正する ・ハンバーガーメニューで推奨されるサイズは44px以…

jQuery:onclickイベント:アニメーション:toggleClassとslideToggle

★CSS3とjQueryでのアニメーションの使い分け 極力CSSでアニメーションさせる★hoverでは無く、jQueryのclickイベントを使ってtransformを適用させる練習 toggleClass :指定したCSSクラスが要素に無ければ追加し、あれば削除する。アニメーション1:完成版に…

HTML:h1の扱い

★h1とpについては、必ず文章を入力すること! ★画像にしてはいけない。大企業だけが、画像をいれることをしてよい。 ★検索するひとは、会社名でなく、地域やサービス内容で検索する。 ※サイトについて、画像と文章が一致していませんが、練習のため。 観光ガ…

CSS:ナビゲーション:基本

★レギュレーション:複数ページをつくるときのルールになる型 いつでも作れるようにしておく ◎縦ナビゲーション 縦ナビゲーション:完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>縦ナビゲーション</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ }); }); </script> <style> /*re…</meta></head></html>

jQuery:おさらい

【1問目】 ブログ0619_まとめ_idセレクタ <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_idセレクタ</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('#test').on('click',function(){ $(this).text('クリックされました'); }); }); </script> </meta></head></html>