Author Archives: S.U

HTML Layer

HTML構造

HTML Living Standardに準拠したい

<html>
  <body>
<header>
<div .container>
  <img .logo>
  <nav #gNav>
  ...
  </nav>
</div>
</header>
<div .row>
<div .container #pageName>
  <main>
    <section> ... </section>
  </main>
  <article> ... </article>
  <aside .lNav >...</aside>
</div>
</div>
<footer>
  <div .container>
    <p #cr>
  </div>
</footer>
  </body>
</html>

header , footer ,
main , section , article , aside , nav

nav … navigation

#gNav … Global navigation　:No Versatility
.lNav … Local navigation　: Versatility


#mainContainer(site width , box)

header, footer, .row > .container

header, footer, .row { width : 100%;}
.container { サイトの幅 }

.container > main > section > article

.container > main , aside

main

ページに１つ

<main>
   <h1>
   <h2>
</main>

section

<section>
 <h1>...
 <h2>...
</section>

article

<article>
  <header>
  </header>
  <h1>...</h1>
</article>

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{&lt;}+span.current+a[href=#]*4+span.nextpostslink{&gt;}”

//ここまで

}

},

“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"/>