3@TECH BLOG

FacebookのAPIでできること(Graph APIとはなにか)

2017-05-26 ソーシャルメディア / プログラム0 Comments

Facebookは外部からデータを取得したり投稿したり更新したり・・・いろいろできるAPIを用意しています。このAPIを『Graph API』といいます。 APIとは簡単にいうとアプリケーション同士がデータなどをやり取…

Movabletypeで予約カレンダーを構築する。

2017-05-18 Movabletype / テーマ0 Comments

カレンダーに「空室・残りわずか・満室」を表示する、予約カレンダーのテーマを作成しました。・月＝１記事として構成・日付ごとにステータス「空室・残りわずか・満室」を表示します。・休業日を色づけ・2012年から2032…

WordPressのバージョンアップ手順

2017-05-10 WordPress0 Comments

WordPressをバージョンアップする手順をご紹介します。

WordPressのデータベースバックアップ手順

2017-05-08 WordPress0 Comments

WordPressのデータベースをバックアップする手順をご紹介します。

Movabletypeで多言語（日・英・中）サイトを構築する。

2017-04-24 Movabletype / テーマ0 Comments

多言語（日・英・中）サイトを構築するMovabletypeテーマを作成しました。従来からあるファイル名による切り分けでなく、ドメイン直下のディレクトリによる切り替えを行います。 ※従来のテーマ hogehoge.com…

ブログのフィードを埋め込む (Google Feed APIの代替手段)

2017-03-03 JavaScript / PHP / プログラム0 Comments

Google Feed APIがサービス停止しました。APIを使わずにフィードを取得する方法をご紹介します。

スクロールすると一定の位置でメニューを固定する方法

2016-12-09 ナビゲーション0 Comments

画面をスクロールしてある一定の位置まで行き、メニューが隠れそうになったときに、画面の上部に固定する方法です。

フォーム｜入力欄の長さを最適化

2016-09-09 フォーム0 Comments

フォームをコーディングするとき、各項目の長さをどれくらいにするかを考えることがあります。毎回考えなくても済むように、コピペで使えるフォームのフォーマットサンプルを考えました。

基本設定

2016-09-09 スニペット / 基本設定0 Comments

サイトの基本情報をSCSSのスニペットとしてまとめました。

フォームテーブル

2016-09-09 テーブル / フォーム0 Comments

テーブルのスタイル、ブレイクポイント等は、テーブルの項目を参照してください。 View 必須項目名 ○○は入力必須です。…などのエラー表示項目名入力例、補足など Source [crayon-59c2e5098551…

ボタン基本スタイル

2016-09-09 ボタン0 Comments

ボタンの基本スタイルです。各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。 View 基本 button xsでブロックボタン基本 button smでブロックボタン基本 button md…

遷移ボタン

2016-09-09 ボタン0 Comments

View buttonBox 基本並び（float:left）戻る進む buttonBox 逆並び（float:right）進む戻る buttonBox center配置（ボタンx2） ※.row の max-w…

ブレークポイントCSS切り替え

2016-09-09 表示0 Comments

ブレークポイントで表示する内容を切り替える方法のサンプルです。画面サイズ768pxを基準に表示を切り替えます。使用するclass名 .sp：画面サイズがxsより小さい時に適用（表示）します。 .pc：画面サイズがms…

bootstrap グリッドシステム（改）

2016-09-09 基本設定0 Comments

bootstrap のグリッドシステムを元に、ブレイクポイントで切り替える要素を追加しています。 xs：0 ～ 767px sm：768px ～ 991px md：992px ～ 1199px lg：1200px ～ S…

reset.css ＋ base.css

2016-09-09 基本設定0 Comments

ブラウザ間の表示差異をなくすリセットCSSです。独自の要素も含んでいます。

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav { display: block }
body { line-height: 1.25 }
p { line-height: 1.75 }
nav ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
del { text-decoration: line-through }
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
input, select { vertical-align: middle }
*, *:before, *:after {
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}
body { -webkit-text-size-adjust: 100% }
html { overflow-y: scroll }
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0
}
a {
    cursor: pointer;
    overflow: hidden
}
abbr, acronym {
    border-bottom: 1px dotted;
    cursor: help
}
blockquote { margin: 1em }
em, strong { font-weight: bold }
li { list-style: none }
input {
    padding: 0.1em;
    vertical-align: middle
}
input[type="text"], input[type="password"] {
    height: 1.2em;
    line-height: 1.2
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
    vertical-align: baseline
}
input[type="submit"], input[type="reset"] {
    line-height: 1;
    padding: 0.3em
}
legend {
    background: #fff;
    padding: 0.3em
}
select {
    padding: 0;
    vertical-align: baseline
}
textarea {
    padding: 0.1em;
    line-height: 1.4;
    vertical-align: middle
}
header, footer, .contents, .wrap, .contentsBox, .entryBox { clear: both }
header:after, footer:after, .contents:after, .wrap:after, .contentsBox:after, .entryBox:after {
    content: "";
    display: block;
    clear: both
}
nav:after, .mainColumn:after, .subColumn:after, .extraColumn:after {
    content: "";
    display: block;
    clear: both
}
.nav_menu li { list-style: none }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav { display: block }

body { line-height: 1.25 }

p { line-height: 1.75 }

nav ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {

content: '';

content: none

}

a {

margin: 0;

padding: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent

}

del { text-decoration: line-through }

abbr[title], dfn[title] {

border-bottom: 1px dotted;

cursor: help

}

table {

border-collapse: collapse;

border-spacing: 0

}

input, select { vertical-align: middle }

*, *:before, *:after {

box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box

}

body { -webkit-text-size-adjust: 100% }

html { overflow-y: scroll }

ins {

background-color: #ff9;

color: #000;

text-decoration: none

}

mark {

background-color: #ff9;

color: #000;

font-style: italic;

font-weight: bold

}

hr {

display: block;

height: 1px;

border: 0;

border-top: 1px solid #cccccc;

margin: 1em 0;

padding: 0

}

a {

cursor: pointer;

overflow: hidden

}

abbr, acronym {

border-bottom: 1px dotted;

cursor: help

}

blockquote { margin: 1em }

em, strong { font-weight: bold }

li { list-style: none }

input {

padding: 0.1em;

vertical-align: middle

}

input[type="text"], input[type="password"] {

height: 1.2em;

line-height: 1.2

}

input[type="checkbox"], input[type="radio"] {

padding: 0;

vertical-align: baseline

}

input[type="submit"], input[type="reset"] {

line-height: 1;

padding: 0.3em

}

legend {

background: #fff;

padding: 0.3em

}

select {

padding: 0;

vertical-align: baseline

}

textarea {

padding: 0.1em;

line-height: 1.4;

vertical-align: middle

}

header, footer, .contents, .wrap, .contentsBox, .entryBox { clear: both }

header:after, footer:after, .contents:after, .wrap:after, .contentsBox:after, .entryBox:after {

content: "";

display: block;

clear: both

}

nav:after, .mainColumn:after, .subColumn:after, .extraColumn:after {

content: "";

display: block;

clear: both

}

.nav_menu li { list-style: none }

3@TECH BLOG

FacebookのAPIでできること(Graph APIとはなにか)

Movabletypeで予約カレンダーを構築する。

WordPressのバージョンアップ手順

WordPressのデータベースバックアップ手順

Movabletypeで多言語（日・英・中）サイトを構築する。

ブログのフィードを埋め込む (Google Feed APIの代替手段)

スクロールすると一定の位置でメニューを固定する方法

フォーム｜入力欄の長さを最適化

基本設定

コピーライト

フォームテーブル

ボタン基本スタイル

遷移ボタン

ブレークポイントCSS切り替え

新着情報リスト

bootstrap グリッドシステム（改）

reset.css ＋ base.css

簡単にアレンジできるtableのHTMLとCSS

ページトップ

画像の内側にCSSでボーダーを引きたい！