Visual Studio CodeでEmmetのlang属性を変更する方法〜なぜか変更できなかったら試して！ Visual Studio CodeでEmmetを使って一発でHTML基本構文を書き出せますが、初期状態ではlang属性が「en」になっています。 この初期状態を「ja」にする方法はネットに多く出回っていますが、なぜか自分はうまくいかないと諦めていませんか？ 実はうまくいっているのですが、落とし穴にはまっているだけです。 早速解説です。 Emmetのlang属性を変更する方法ユーザースニペットから変更する方法 ＊Macでの例です。 メニューのPreferences（設定）からユーザースニペット（User Snippets）を選択 入力ボックスが表示されたら、「html」と入力 html.jsonのエディタの編集エリアが出てきたら以下の内容になるようにコードを修正 これでVisual Studio Codeを再起動すればlang属性がjaになるはずです。 新規ファイルを作成したらhtmlの拡張子で一旦保存します。 これでVSコードはこのファイルはHTML形式のファイルだと認識して、Emmetは「html:5」の入力でHTMLの基本構文を書き出してくれます。 そしてlang属性がjaになればOKです。 けれども、やっぱり「en」のままということもあると思います。 それでもlang属性が変わらない場合 原因：VS Codeのインテリセンス機能の問題があります。 例えば「html:5」をe >>続きを読む
CSSグリッドを可変レイアウトにする方法 CSSグリッドでレイアウトしたのはいいが、固定サイズはできたけれどもリキッドレイアウトにならないと頭を抱え込んでいませんか。 CSSグリッドは慣れると紙のデザインをやっていた人には馴染みやすいかもしれませんが、あまり細かくグリッドを作ってしまうとリキッドレイアウトにするのが大変です。 何よりも困るのは幅を固定でサイズ指定するだけなら良いのですが、高さまで固定で指定されると大変です。これを可変サイズにするには横幅のサイズに応じて高さを変更する必要があるからです。 困ったことに紙のデザイナーはこういうことを平然とやってしまい無理なコーディングを要求してくるものです。 今回シンプルなCSSグリッドの固定レイアウトを作成したものが次のサンプルです。今回のサンプルは計算をするのが面倒なのでそれぞれのグリッドのサイズはfr単位を使用して比率で決めています。 固定レイアウトのサンプル HTMLコード CSSコード CSSグリッドの固定レイアウトを縦横比を固定してリキッドタイプに変更する方法 IE8が現役の一昔前ならきっと大変だったと思います。 けれども今は便利な手段があります。それはvw単位を使うことです。vwはビューポートの幅に対する割合を決めることができます。つまりブラウザやデバイスの幅に応じてサイズを柔軟に変えることができます。しかもこのvw単位はheightにも使えるということです。こ >>続きを読む
Twitterのタイムラインをホームページに埋め込む方法〜2018年更新版 2018年夏に埋め込みタイムラインをtwitter.comのアカウント設定で管理することはできなくなりました。 代わりに、publish.twitter.comで埋め込みコンテンツを設定するようになっています。 publish.twitter.comの使い方 publish.twitter.comページに移動します。 入力欄に表示させたいTwitterのアドレスを入れます。 表示されたページのEmbedded Timelineを選択します。 入力ボックスにコードが表示されますのでコピーします。 コピーしたコードを自分のページに貼り付けると、iframeを使ったコードでタイムラインが表示されます。 補足：set customization options.のところをクリックするとカスタマイズできます。
CSSのbackground-clipでテキストをグラデーションに CSSのbackground-clipでテキストをグラデーション加工することができます。 本来は「background-clip」プロパティは、要素の背景がcolor又はimageの時、境界の下まで拡張するかどうかを指定するものです。 ところが、この値には「text」があり、この値を設定するとテキストに背景色や背景画像をクリッピングすることができます。 テキストをグラデーションにする例 サンプル 「background-clip」プロパティを使ってテキストにグラデーションをつけるには、「background-clip」プロパティの値を「text」にします。 次に、colorの値をtransparent（透明）にするのがポイントです。 結局、背景のグラデーションがクリッピングマスクされて透明な文字の部分に表示される仕掛けです。
CSS グリッドレイアウトでコーディングするならFirefoxを使おう〜display:grid display:gridでレイアウトするのが標準になる日も近いと思います。 さて、開発する際の検証はChromeを使う場合が多いと思いますが、グリッドレイアウトに限ってはFirefoxが強力です。 一度試してみると良いでしょう。 Firefoxの検証画面を開いて、レイアウト項目を選択します。ライン番号なども表示されてセルの位置がわかりやすくなっています。 以下キャプチャー画面
簡単にローカルなSASS環境構築 SASSを毎日使用するような人は自分にあった環境を作り込んでいると思います。けれども時々使いたい場合、Gulpで環境作るのは面倒だし、エディタに設定していたはずのものがなぜかうまく動かないなどと困った場合に、手軽にローカルな環境構築をする方法です。 ローカルですから対象のフォルダ内だけ有効になります。 すでにNode.jsが導入されていうことが前提です。 まず、node-sassを対象フォルダにインストールします。 ここからはターミナル（Macの場合）を使います。 新規でプロジェクトフォルダを作成します。 cdで作成したフォルダに移動したら、次のコマンドで初期化します。色々聞かれますが、returnで進みます。 「package.json」が作成されたことを確認したら次のコマンドで「node-sass」をインストールします。 次に「package.json」のscript部分をを次のように編集します。 "scripts": { "compile:sass":"node-sass sass/main.scss css/style.css -w" } 「sass」フォルダに「main.scss」ファイルを新規作成してSASSコードを記述します。 出力先のCSSはCSSフォルダ内の「style.css」になります。 ターミナルで次のコマンドを入れるとコンパイルされて「style.css」 >>続きを読む
WatsonのAssistant機能をDogRoboにつけました IBM WatsonのAssistant機能をDogRoboにつけました。 まだテスト運用で色々なことはできませんが、試してみてください。
デザインカンプからコーディングで重宝するツール デザインカンプと1pxも違わないコーディングを行うには細かな確認が必要になります。 そんな時に役立つツールの紹介です。ただし、MAC専用です。 LayerX psd形式を含めた画像ファイルを透明化してコーディングしたページと重ね合わせるとその違いが一目で確認できます。 そんな時に便利なツールが「LayerX」です。操作は簡単でショートカットキーで位置合わせなどを行うだけです。 Gulp + Browser-Syncなどで同期させておけば効率的にカンプとの誤差も解決できるでしょう。 LayerXのページへ この領域に画像ファイルをドラッグ アンド ドロップします。 重ねた例。 ズレてますね。 Helium HeliumはLayerX の逆で、表示したページを透明化するものです。これも便利に使えそうですね。 Heliumのページへ メニューバーから「Location」→「Open Web URL」からURLを入力します。 メニューバーから「Appearance」→「Translucency」→「Enabled」で透明化できます。 まずは使ってみましょう。
Twitterユーザータイムラインを自分のホームページに表示 ここで紹介した方法は現在中止されています。 Twitterのタイムラインをホームページに埋め込む方法〜2018年更新版を参考にしてください。 Twitterのユーザータイムラインを自分のホームページに表示する方法は他のSNSに比較して簡単です。 Twitterのユーザータイムラインとは自分がツイートした内容を表示するものです。 まず、PCでTwitterの管理画面にログインします。 次に自分のアイコンをクリックして「設定とプライバシー」を選択します。 設定画面に入ったら左サイドのメニューから「ウィジェット」を選択します。 ウィジェットの画面では新規作成ボタンをクリックします。そして「プロフィール」を選択します。 次に出てきた画面に自分のtwitterのアドレスを入れます。 Embedded Timelineを選択します。 下部に埋め込みタグが表示されますのでコピーして埋め込みたいページに貼り付けます。 オプション設定をしたい場合はその上にある「set customization options」をクリックしてオプションの設定をします。 あと、細かいデザインはCSSで設定しましょう。
Instagramの「accessToken」と「userid」を取得する方法〜2018年4月版 InstagramのAPI使用方法 Instagramの投稿内容を自分のホームページで表示するには、面倒な手続きが必要です。 それは「accessToken」と「userid」を取得することから始めます。 なお、2018年4月に設定方法が変更されていますので、それに対応した内容にしています。 これは素人には少し難しいかもしれませんが、Webデザイナーを目指す人は挑戦してみたい事だと思います。頑張ってチャレンジしてみましょう。 「accessToken」と「userid」を取得するには、アプリ登録のためにの、Hello Developers.のページに行きます。 Hello Developersページではインスタのユーザーネームとパスワードでログインをしておきます。 ＊インスタのページを開いてフッター部分のapiからもdeveloperページへ行けます。 タイムラインは無限スクロール担っていますので、いつまでもfooter領域をクリックできないので注意してください。無限スクロールになってない設定のページなどに切り替えると良いでしょう。 アプリ登録のページの設定 「Register Your Application」よりアプリ登録のページに入ります。 ヘッダー部分の 「Manage Clients」タブを選択します。 必要事項を記入します。全ての項目を入力していきます。 以下参考 Ap >>続きを読む
