デザインカンプからのHTML/CSSコーディングの練習になる学習サイト
2021年12月27日 Webサイト制作, Webデザイン HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！ ↑私が10年以上利用している会計ソフト！ Codestep Codestepは作って学ぶコーディング学習サイト。HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。HTML/CSSだけではなく、WordPress用の教材もあります。 コ
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
海外Webサイト・海外Web屋の特徴
2013年3月23日 Web関連記事, 海外情報 以前「日本向けのウェブデザインというのはあるのか?」という記事を読み、「逆に海外のサイトは具体的にどう違うかなあ？」と思ったので、私が感じた海外のWeb業界やサイトの違いを並べてみます。海外向けのWebサイト制作を考えている方、海外で働こうと思っている方の参考になればと思います！ ↑私が10年以上利用している会計ソフト！ 追記：ここで紹介する「海外」とは、私が滞在・就労経験のあるカナダとオーストラリアを指しています。 海外Webサイトの特徴 URLを直接入力 日本ではURLバーに直接入力する人は少ないかと思われますが、海外では目的のブランド名がわかっている場合、とりあえず「.com」をつけてWebサイトを開きます。海外で .com が人気な理由はこのへんにありそうです。そのため、新たに会社やサービスを立ち上げるときは、そのブランド名とドメイ
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
少女のレモネードスタンドから学ぶ9つのマーケティング術
2013年3月23日 マーケティング フリーランスのコピーライター・マーケティングコンサルタントであるJim Lodico氏の記事が、昨年Web Designer Depotというブログに紹介されていました。あの記事面白かったなーと突然思い出したので、Walter氏の了承のもと意訳してみます。元記事は“9 Marketing Tips from a Six-Year Old’s Lemonade Stand”です！ ↑私が10年以上利用している会計ソフト！ ある日、うちの娘ソフィアがレモネードスタンドをしたいと言ってきました。 レモネードを売るために週末をつぶすのは本当に嫌だったので、レモネードミックスを買ったりカップを用意したりするのにどれほど費やさなければならないかを娘に説明しました。 努力もむなしく、娘の意思を曲げることはできませんでした。彼女はどうしてもそれをやりたかったようで、彼
ミュシャ(Mucha)から学ぶ優美なデザイン | Webクリエイターボックス
2013年3月23日 インスピレーション アール・ヌーヴォー様式を代表するグラフィックデザイナー、アルフォンス・マリア・ミュシャ（Alfons Maria Mucha)。美しい女性やきらびやかな装飾類、花、華麗な曲線を使用したデザインが特徴で、生涯を閉じた今も多くの人を魅了し続けています。今回は私の大好きな彼の作品を紹介してみようと思います！ ↑私が10年以上利用している会計ソフト！ ミュシャの作品の特徴 女性と花 彼の作品の多くは女性をメインに花とともに描かれています。髪に飾ったり画面に花をちりばめたり。画家というよりもグラフィックデザイナー・イラストレーターとして活躍していたため、対象物を非常に鮮明に描いています。背景には暗色の幾何学模様や草花を、メインとなる女性には明るい色を使い、どこに焦点をあてているかがわかりやすい。 背景の模様 背景にはアール・ヌーヴォーの特徴である草花と曲線に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
