Author Archives: S.U
Snipet 的な
改行させる
<div style=”page-break-before:always”></div>
改行させる
break-beforeに変更
<div style=”page-break-beforeに置き換えられた:always”></div>
break-after
boxレベルに適用される。
sanple
code
/* キーワード値 */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;
/* グローバル値 */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: unset;
SublimeText Settings
### list
– Setting
– Package
– Keymap
– Sunippet
– Projects
## Setting
**2018.11.28**
<pre>
{
“auto_indent”: true,
“color_scheme”: “Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme”,
“disable_tab_abbreviations”: false,
“draw_indent_guide”: true,
“draw_white_space”: “selection”,
“font_face”: “monaco”,
“font_size”: 16,
“ignored_packages”:
[
“Vintage”
],
“material_theme_accent_bright-teal”: true,
“material_theme_accent_indigo”: true,
“material_theme_accent_lime”: true,
“material_theme_accent_orange”: true,
“material_theme_accent_purple”: true,
“material_theme_accent_red”: true,
“material_theme_accent_yellow”: true,
“material_theme_bold_tab”: true,
“material_theme_compact_sidebar”: true,
“material_theme_disable_fileicons”: true,
“material_theme_disable_folder_animation”: true,
“material_theme_disable_tree_indicator”: true,
“material_theme_small_statusbar”: true,
“material_theme_small_tab”: true,
“material_theme_tabs_autowidth”: true,
“tab_size”: 4,
“theme”: “Material-Theme-Darker.sublime-theme”,
“translate_tabs_to_spaces”: false,
“indent_guide_options”: [ “draw_normal”, “draw_active” ],
“trim_automatic_white_space”: true
}
</pre>
<hr>
## Package
### list
**2018.11.28**
<pre>
{
“bootstrapped”: true,
“in_process_packages”:
[
],
“installed_packages”:
[
“A File Icon”,
“AutoFileName”,
“Browser Refresh”,
“Compass”,
“Emmet”,
“Git”,
“MarkdownLivePreview”,
“MarkdownPreview”,
“Markmon real-time markdown preview”,
“Material Theme”,
“Monokai Extended”,
“OmniMarkupPreviewer”,
“Package Control”,
“SCSS”,
“SFTP”,
“SideBarEnhancements”,
“SublimeLinter”,
“SublimeLinter-csslint”,
“Table Editor”,
“Terminal”,
“TrailingSpaces”,
“View In Browser”
]
}
</pre>
## How to use
#### A File Icon
<hr>
## key map
### sublime
###Package
####Emmet
<pre>
{
“snippets”: {
“html”: {
“abbreviations”: {
//ここから
// “paging”: “.pagination>.wp-pagenavi>span.previouspostslink{<}+span.current+a[href=#]*4+span.nextpostslink{>}”
//ここまで
}
},
“css”: {
“snippets”: {
//ここから
“inc”: “@include |;”,
“incfos”: “@include fos(|);”
// “@ib”: “@include inline-block;”,
// “@op”: “@include opacity(${1:0});”
//ここまで
}
}
}
}
</pre>
<hr>
Sunippet
<hr>
Projects
## ShrotCut key Default
移動 : **com + ↑ or ↓**
スクロール : **fn + ↑ or ↓**
カーソルを移動 先頭 or 最後 : **com + ← or →**
カーソルを移動 単語 : **opt + ← or →**
行の複製 : **com + shift + D**
行の移動 : **con + com + ↑ or ↓**
行の削除 : **con + shift + K**
改行の挿入 After : **com + enter**
改行の挿入 Before : **com + shift + enter**
繰り返し : **com + Y**
**com + shift + A**
ex : `<h1>Comand</h1>`
h1を選んだ状態で中身を選択できる
Command
選んだ状態でタグで囲む : **con + shift + W**
</section>
favicon
2018.12.12
1. 画像の準備
2. コードの追記
# Webサイトで用意しておくべきアイコン画像
700px and 180px
ファビコン(favicon)
スマホ用アイコン(apple-touch-icon)
Windows8, 10用アイコン
head に記述
<!-- favicon icon-mo--><link rel="icon" href="./favicon.ico">or
<link rel="icon" type="image/png" href="/favicon.png">or
<link rel="icon" href="/asset/img/favicon.ico"><link rel="apple-touch-icon" sizes="180x180" href="/asset/img//touch-icon.png">`
Windows
<meta name="application-name" content="{サイト名}"/>
<meta name="msapplication-square70x70logo" content="small.jpg"/>
<meta name="msapplication-square150x150logo" content="medium.jpg"/>
<meta name="msapplication-wide310x150logo" content="wide.jpg"/>
<meta name="msapplication-square310x310logo" content="large.jpg"/>
<meta name="msapplication-TileColor" content="#FAA500"/>CDN LIST
designlab.dev
どこかに設置予定
– md-github.css
いい作品を作るには
Evernote
手を動かして、どんどん作る
数多く作る
いいものをたくさん見て真似する
配置
固定配置
絶対指定
相対指定
position
relative : float との併用不可
absolute : float との併用可能
デザイン手法
引き算で考える
ユーザー視点からのページ作り
SNS
ロングテール
双方向プロジェクト
バナーデザイン
大きさを考える 揃える 揃えない？
ページ全体のイメージから考える
何のためのバナーなのか？ からデザインする
上下でコントラストをつけすぎない → 浮いて見える
企画ページ
ほにゃらら したくなる
健康 トイレに行きたくなる
コメントアウト コメントにする
ベンダープレフィックス 各ブラウザに対応させる
導線
GNAVは便利 深い階層には導かない
導線が確保されていない
解析をし、ユーザーが目的の情報に辿り着けるようにページ間のリンクを作る
最終的には、目的（ユーザーの目的）の情報ページに落とし込む前段階で悩ませない