Profile

Cover photo
5 followers|51,656 views
AboutPostsPhotosVideos

Stream

web sign*

Shared publicly  - 
 
もう使ってない公式アカウントの通知がジャマになったので整理してみました。
それと整理するうえで、削除とかブロックとか非表示とかややこしい表現があったので、自分なりにまとめました。
 ·  Translate
友だちに追加したLINEの公式アカウントや友だちを削除したりして整理したかったんですが、そういった項目が全然見つからなかったので調べてみました。その時に選択する「削除」や「ブロック」「非表示」という項目もややこしかったので自分なりにまとめました。ブロック・非表示と削除の違い LINEでは友だちに追加したアカウントをブロックと非表示と削除という3つの状態にすることができるようです。 ブロック: 相手からメッセージを受け取ったり通話を受信することができない状態 非表示: 友だちリストに表示させなくした状態(ブロックのように受信の制限はしません) 削除: 受信も表示もさせない状態(トーク履歴は残ります) ブロックしたLINE友達をする方法! 削除するとこうなります! アカウントをブロック・非表示にする 友だちに追加したアカウントをブロック・非表示にするには、友だちリスト(下の画像は公式アカウントを選択した画面です)で左に向かってスワイプ(もしくはフリック)するととが表示されるので、どちらか...
1
Add a comment...

web sign*

Shared publicly  - 
 
ルールはけっこう簡単なのですぐに覚えられます。
メモをきれいにまとめたい時に使ってみてください。
 ·  Translate
文章の作成や勉強会などでのメモをとっている時、文章(プレーンテキスト)だけだとメリハリがなく、あとで読み返した時に要点がつかみにくいことがあります。 かといってHTMLで記述するのは面倒です。そこで僕がよく使っているのが「Markdown」というマークアップ言語です。Markdownの記述方法 最終的には(X)HTMLに変換することになるんですが、HTMLと違って、開始タグや終了タグを使用せず、#(ハッシュ)や*(アスタリスク)や改行などがHTML要素の代わりをしてくれるのが特徴です。 最近では「GitHub」や「Tumblr」で採用されていて「WordPress」でもプラグインを使えば利用することもできます。 今回は使用頻度の高い「見出し」「段落・改行」「リスト」「リンク」の4つの記述方法を紹介します。 h要素のレベルは#の数 h1やh2などの見出しは#(ハッシュ)の数で示します。また記号のあとには半角スペースかタブを入れるのが基本的なルールになっています。 p要素とbr要素は空白行...
1
Add a comment...

web sign*

Shared publicly  - 
 
テーマに沿った記事をみんなで公開していく「Advent Calendar」が今年も始まりました。
その中で僕が気になったものを紹介します。
 ·  Translate
おもにWebに関するテーマをもとに12月1日から25日にわたって参加者たちが数珠つなぎにブログを書く技術系「Advent Calendar」というものがあります。この中から僕が特に気になったものをいくつかあげてみました。Web CSSをはじめとしたフロントエンドが多めです。特にCSSの設計をキーワードにしたCSS Architecture Advent Calendarはかなり気になるところ。 HTML5 Advent Calendar 2014 - Qiita SVG Advent Calendar 2014 - Adventar CSS Advent Calendar 2014 - Qiita CSS Architecture Advent Calendar 2014 - Adventar CSS 珍百景 Advent Calendar 2014 - Adventar jQuery Advent Calendar 2014 - Adventar JavaScript おれおれAdv...
1
Add a comment...

web sign*

Shared publicly  - 
 
CSSのおもしろさや手法が詰まった「CSS設計の教科書」という書籍のイベントに行ってきました。
コードレビューの仕方やWebデザイナーのアピール方法など色んな気付きのあるセッションが聞けました。
 ·  Translate
僕が読んできた技術書のなかで、いちばん影響を受けたのは「Web制作者のためのCSS設計の教科書」というCSSについての最新の手法を解説されている本です。その著者である谷 拓樹さん(@hiloki)が大阪で出版記念イベント『Web制作者のためのCSS設計の教科書』出版記念イベント@大阪を開催されると知ったので、参加して話を聞いてきました。 すべては咀嚼できなかったんですが、少し考えをまとめていきたいと思います。(メモはとっていましたが、正確でないところもあると思うので注意してください)「メンテナブルであり続けるためのCSS設計」 谷拓樹 今回は3人の登壇者がそれぞれ30分のセッションをされました。まずは谷拓樹さんから。 CSSが生まれてから今年で20周年。はじめはシンプルな装飾やレイアウトだけだったが、CSS3によりアニメーションやフィルタなど機能は広がってきている。 それでも変わらないのはCSSの壊れやすさ。シンタックスがシンプルな分、記述やメンテナンスをおこない、時間が経つにつれてどう...
1
Add a comment...

web sign*

Shared publicly  - 
 
スマホでよく見る矢印(アロー)アイコン付きのリンクを作ってみました。
 ·  Translate
スマホなどでよく見る矢印(アロー)アイコン付きのリストを作ってみました。アイコンは:after疑似要素とアイコンフォントで付けた2パターンです。矢印付きのリストのサンプル まずはアイコンフォントを使うので、Font Awesomeを使えるようにhead要素内に以下のように記述しておきます。 HTMLはBEM記法を使用して要素セレクタにはなるべく、直接スタイルを当てないようにします。親要素のulにはblock-listクラスを、子要素になるliとaにはblock-list__itemとblock-list__arrowとしておきます。__は子要素にあたるという意味になります。1つ目のリストは疑似要素でアイコンを、2つ目のリストにはFontAwesomeを使ってアイコンフォントを表示させます。 block-listクラスはul要素に付けてあるのでデフォルトスタイルをリセットしてボーダーや背景色を付けていきます。.block-list__item + .block-list__itemは...
1
Add a comment...

web sign*

Shared publicly  - 
 
Sassに興味があるなら、インストールする前にSassMeisterを使ってコンパイルを試してみるとより興味が湧いてくるかもしれません。
HTMLも記述できるので、ちょっとしたテストなんかにも使えそうです。
 ·  Translate
CSSを拡張したメタ言語「Sass」。CSSと互換性があり、CSSにはないネスト(入れ子)や変数・エクステンド・ミックスインといった機能を使うことができます。ただ、Sassのインストールなどに黒い画面(ターミナルやコマンドプロンプト)を少し使うのでハードルが高いと感じてしまいますよね。Sassのインストールをしなくても簡単にSassを試すことができる「SassMeister」を紹介します。Sassを試せるオンラインエディタ SassMeisterは下記のリンクからアクセスできます。 SassMeister | The Sass Playground! メニューからCSSの表示とHTMLとプレビューの表示を選択できます。(下の画像はSCSS・CSS・HTMLとプレビューを表示) オプションでは以下のような変更ができます。 Compiler( 3.4.4, 3.3.14, 3.2.19, LibSass 2.0.0 ) Syntax( SCSS, Sass ) Extensions( B...
1
Add a comment...

web sign*

Shared publicly  - 
 
jQueryのプラグインを使わずにナビゲーションを作ってみました。
 ·  Translate
スマホではハンバーガーボタンをタップでナビゲーションメニューが表示されて、768px以上ではマウスオーバーでサブメニューが表示されるかたちのメニューをCSSとjQuery(プラグインなし)で作ってみました。 ナビゲーションのデモ このナビゲーションメニューの特徴としてはこのようなものになります。 スマホではハンバーガーボタンを表示する(fixed) ハンバーガーボタンをタップするとナビゲーションがブラウザ一杯に表示される 768px以上になるとボタンが非表示になり、代わりにナビゲーションが表示される ナビゲーションをマウスオーバーするとサブナビゲーションがドロップダウンで表示される ブラウザのウィンドウ幅を動かすとナビゲーションが切り替わっているのが分かると思います。 See the Pen toggle&hoverMenu by ManabuYasuda (@gaku) on CodePen. jQuery まず.prepend()と.before()メソッドでbodyタグの先頭...
1
Add a comment...

web sign*

Shared publicly  - 
 
今までWordPressでjQueryを使ったことがなかったので、けっこうハマりました…。
 ·  Translate
WordPressにはjQueryを使うためのプラグインがたくさんありますが、簡単なスクリプトであればオリジナルのjsファイルを読み込ませるだけで充分です。今回はhead要素に記述する方法でjsファイルを取得してみました。子テーマのディレクトリURLを取得する 僕は子テーマを作ってカスタマイズしているのでget_stylesheet_directory_uri()というテンプレートタグを使用してURLを取得、それにjsファイルのパスを追加しました。この場合は子テーマのindex.phpと同じディレクトリにjsフォルダを作成してその中にscript.jsというjQueryを記述するファイルをFTPで設置しています。 子テーマを使用していない場合はget_template_directory_uri()を使用します。 関数リファレンス/get stylesheet directory uri - WordPress Codex 日本語版 jsファイルにjQueryを記述する WordPre...
1
Add a comment...

web sign*

Shared publicly  - 
 
共有カレンダーだけでなく、Googleカレンダーがうまく同期されていない時に有効な方法です。
 ·  Translate
Googleカレンダーには自分以外のアカウントが作成したカレンダーを読み込むことができる「共有カレンダー」があります。例えば仕事や家族でスケジュールを共有したり、イベントや勉強会の開催日を公開しているものもあります。iPhoneの(デフォルト以外の)カレンダーアプリで共有カレンダーを同期させようとして少し手間取ったのでその解決方法を紹介したいと思います。同期設定 まずはGoogleカレンダーに作成・インポートされているカレンダーをiPhoneと同期させます。iPhoneで下のリンクをタップしてブラウザ(SafariやChromeなど)で表示させます。 同期設定 - Googleカレンダー マイカレンダー(自分が作成したカレンダー)と共有カレンダーが表示されるのでiPhoneに同期させたいカレンダーにタップしてチェックを入れてします。 目次に戻る iPhone純正カレンダーアプリを起動する iPhoneのデフォルト(純正)カレンダーアプリを開きます。同期設定をしたカレンダーが読み込...
1
Add a comment...

web sign*

Shared publicly  - 
 
ソースコードをコピペしたらインデントがスペースになってしまいます。タブに一括で変換する方法などを紹介します。
 ·  Translate
HTMLやCSSなどのインデントはタブで統一しているんですが、コピペしたりSassのExpandedでコンパイルした時など、インデントがスペースになってしまうことがあります。Sublime Text3でインデントをスペースからタブに一括で変換させる方法を2つ紹介します。reindentでショートカットからタブに変換する インデントを変換させたい箇所を選択したら、メニューからEdit→Lineと進み、Reindentをクリックします。これでスペースだったところがタブに変換されます。タブの大きさはメニューからView→Indentation→Tab Width:にチェックが入っている設定が反映されます。 Reindentにはショートカットを設定することができます。メニューからSublime Text→Prefarence→Key Bindings - Userと進み以下のように記述します。 注意点としてReindentは宣言と同じ行にコメントがあるとうまく変換してくれませんので、次に紹介...
1
Add a comment...

web sign*

Shared publicly  - 
 
最近気になっていたconcrete5というCMSの勉強会に参加してきました。ブログ向きという感じではないんですが、使い勝手もよさそうです。
 ·  Translate
CMSといえばWordPressがよく使われていますが、concrete5というCMSを最近よく見かけるようになりました。Web上の簡単な操作でホームページが作成できるというので気になっていたんです。まだ、ちゃんと触れていないのですが、勉強会の内容をまとめてみました。 ページ機能の特徴 concrete5はおもに「ページ」と「ブロック」という機能で構成されています。WordPressのようなテンプレートという概念がなく、基本的には1ページずつ作成することになります。 そのかわりに、1ページずつテーマを変更することができるので、ページごとにカラム数を変更したりと柔軟にレイアウトの変更ができるのが大きな特徴です。 ブロック機能の特徴 concrete5はエントリー(投稿)をHTMLなどに疎いひとでも簡単に更新できるのが特徴です。それを助けてくれるのがブロックという機能です。WordPressでいうとカスタムフィールドに近い機能です。 項目はあらかじめ用意されているので、タイトルや文章などを...
1
Add a comment...

web sign*

Shared publicly  - 
 
Ctrl + eはMacでは行末に移動するショートカットなのでEmmetの展開には使いたくなかったんです。1行追記するだけでOKですよ。
 ·  Translate
「Emmet」というプラグインを使って効率的にコーディングができるようにしています。EmmetのコードをHTMLやCSSなどに展開するショートカットは(Sublime Text 3の場合)Ctrl + eとtabが設定されています。ただ、MacではCtrl + eは行末に移動できるショートカットとして設定されているので使えなくなるのは困る。そこで設定を変更してtabだけで展開ができるようにしてみました。EmmetのKey Bindingsを変更する Emmetを簡単に説明すると、HTMLやCSSなどの要素名やプロパティを頭文字などの簡略化した記述をするだけで、うまい具合に展開してくれるツールです。例えばul>li.item$*5やpos・tac・m0-auto・bxzを入力後に展開すると以下のように補完してくれます。 詳しくはEmmetのCheat Sheetを確認してみてください。 設定ですが、メニューバーをと進んでいくと357行目に以下のような記述があります。ここでショートカット...
1
Add a comment...
Links