タグ

ブックマーク / www.webcreatorbox.com (5)

  • WebデザイナーのためのVue.js事始め

    2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね! ↑私が10年以上利用している会計ソフト! Vue.jsの使い方 Vue.jsは公式のドキュメントが日語に対応しており、こちらを読むだけで基的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScript

    WebデザイナーのためのVue.js事始め
  • CSSで変数(カスタムプロパティ)を使ってみよう

    2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました!今回はCSS変数(カスタムプロパティ)の使い方と注意点をまとめていきます! ↑私が10年以上利用している会計ソフト! CSSカスタムプロパティとは? 公式では「カスケード変数のためのCSSカスタムプロパティ(CSS custom properties for cascading variables)」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの

    CSSで変数(カスタムプロパティ)を使ってみよう
  • 手を動かして学習しよう!コードチャレンジ HTML/CSS 初級編

    2020年2月13日 CSS, HTML, Webサイト制作 Web制作初心者の方向けに教える仕事をちょこちょこしているのですが、その時よく思うのが、を眺めるだけでは覚えられないな…という点。やはりコーディングに関しては実際に手を動かしてみないと自分のスキルとしてしっかりと定着しません。そこで今回は私が教える中でよく使っている簡単な「コードチャレンジ」を紹介します。Web制作を勉強中の方や、同じく初心者向けに教えているという方の学習のヒントになればと思います。 ↑私が10年以上利用している会計ソフト! コードチャレンジの進め方 私が教える際によく使うツールはCodePen。実際に書いたコードがその場で表示されるので、生徒側も「これを書いたらこう変化する」というのが実感しやすいようです。 この記事に埋め込まれているCodePenの画面の右上「EDIT ON CODEPEN」をクリックすると

    手を動かして学習しよう!コードチャレンジ HTML/CSS 初級編
  • Web制作者のためのおすすめChrome拡張15

    2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ! ↑私が10年以上利用している会計ソフト! Web Developer Chrome拡張|Firefox Add-on|GitHub|公式サイト Webに携わる人は入れておいて損はない拡張のひとつ!長年利用させていただいてます。1クリックでCSSJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています!カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張

    Web制作者のためのおすすめChrome拡張15
    kithzmky
    kithzmky 2018/01/16
    [フロントエンド[webデザイン] javascript
  • レスポンシブ対応!縦に半分割しているWebサイトの作り方

    2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 縦に半分割しているWebサイトを作ってみよう! Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回

    レスポンシブ対応!縦に半分割しているWebサイトの作り方
  • 1