こんにちは。エンジニア特化型Q&Aサイト「teratail」のDevRel担当をしている、外部ライターの木下です。非エンジニア目線で書くWebプログラミング超入門記事、今回は番外編です。 第1回から第3回にかけて、「HTML/CSSを使ってブラウザに自己紹介ページを表示する」というのをおこなってきました。「ブラウザは、『●●.html』というファイルの中に書かれていることを読み込んで、画面に表示する」という役割がだいぶ掴めてきたと思います。しかし、そろそろ次のような疑問が湧いてきませんか？ 「ふむふむ、自分のPCの中に置いてある「●●.html」ってファイルを表示するのはなんとなく分かった。でも、いつもブラウザで見ているのは、世界中に公開されているページだ……。なぜ自分のPCの中には存在しないファイルを表示できるんだ……？！」 ……と。Webの世界に日常から慣れているみなさまなら、「インタ

こんにちは。管理部のゆりえです。 最近、にんじんとじゃがいものお値段を計算したのですが（仕事です）、2桁と2桁の足し算に5秒くらい固まりました。 その点、エクセルは計算も早いし間違えないし、本当に頭が良くて便利ですよね。 便利ですが、キーボードを叩く右手をマウスまで移動させて、クリック、またキーボード、マウス・・・この移動時間、もったいないですよね。 そこで、エクセル（Excel）を効率的に、なおかつ楽しく作業したい、もうマウスは使いたくない！という方にオススメのショートカットキーをご紹介します。 ショートカットキーを覚えて、サクサク作業しちゃいましょう！ マウスでダブルクリックせずに、セルの文字を編集したい！ ショートカットキー F2：セルの内容の最後にカーソルを配置 F2を押すと、選択したセルの中にカーソルが現れて文字列の編集ができます。 このショートカットキーはものすごく使います。

どうも、デザイナー兼イラストレーターのもりたです。 前回の「【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識」で次回予告したものがうまくまとめられなかったので、今回は第3回で予定していた、Photoshopのフォントと文字ウィンドウについて書きます！ 普段仕事でPhotoshopを使ってる人でも、文字ウィンドウはその数値が何を指しているのかよくわからないまま使っていることが多いんじゃないでしょうか。 特に文字詰めに使用する「カーニング」「トラッキング」「ツメオプションの設定」の違いがいまいちよくわからない。 例えば「ツメオプションの設定」の「100％」という数値は、文字のどこを基準に何が100％詰まるの？とか。「トラッキング」の数値って何を基準に100なの？ピクセルじゃないしな？とか。 正直に言っちゃえばWebでは文字詰めをそんなに細かく設定することがないの

コーディング初心者必見！ゲーム感覚で学べるプログラミング学習サイト「Progate」「CODEPREP」 どうもですよ。 はやちでございますよ＼＼\٩(´ʘ‿ʘ｀)و //／／ こないだ夜中に「Final Fantasy XV」の体験版をしておりました。 もう素晴らしいですねPS4映像がすごく綺麗でフィールドも広くて体験版と云えかなりボリューミーな内容でした。( ˘ω˘)<ﾉｸﾃｨｽ･ﾙｼｽ･ﾁｪﾗﾑ ｲｹﾒﾝ 発売が楽しみです( ˘ω˘) そんなことはどうでもいいですね、今回はコーディング初心者、フロント初心者必見のプログラミングサービス学習サービスをご紹介したいと思います( ˘ω˘)☝ 目録 今回は2つのサービスの使い方をご紹介いたします( ˘ω˘)☝ Progateの使い方 CODEPREPの使い方 Progateの使い方 http://prog-8.com/ まずはProgateの

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s

こんにちは、LIGブログ編集部です。こちらは「Google Analyticsをはじめて使う人が、一通りのアクセス解析をできるようになる」ところまでを目標とした、全5回の初心者向けGoogle Analytics講座の第2回目となります。 前回はGoogle Analyticsとは何かを知るところから、その導入についてまでを紹介していきました。今回は、初心者でも簡単にある程度のアクセス解析ができるようになる基本的な使い方と用語の意味などを中心に解説していきたいと思います。 「Google Analyticsは導入したけど、使い方がよくわからないから全然ログインしていない…」という初心者の方は、まずは今回紹介する項目からGoogle Analyticsをマスターしていきましょう。初心者ではない方も、おさらいのつもりで確認してみてください。 ▼目次 現在サイトにアクセスしているユーザーについて

こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん