サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
zero-plus.io
プログラミング学習におすすめなYouTubeチャンネル8選おすすめのYouTubeチャンネルを、学ぶスキル別に8種類紹介します。 おすすめのYouTubeチャンネル【Web制作編】Web制作を学ぶ方向けに、おすすめのチャンネルを紹介します。 アキユキ / Web制作チャンネル「アキユキ/Web制作チャンネル」はWeb制作で使える知識やノウハウに特化した発信を行なっているチャンネルです。 配信者のアキユキさんは、エンジニア未経験でWeb制作のフリーランスとして独立された経歴を持つ方です。視聴者が最短でWeb制作の仕事を始められるよう、学ぶべきことが体系化されて、動画にまとめられています。 HTML/CSSといったWeb制作に必須のスキルはもちろんのこと、Webデザインについても学べる点は、他のプログラミング系チャンネルにはない特色です。 おすすめ動画「【初心者向け】これ1本!WEB制作に必要
box-sizingを指定していない初期状態ではcontent-boxが指定されているため、paddingとborderは要素のwidthやheightに含まれません。一方、border-boxを要素に指定すると、paddingとborderは要素のwidthとheightに含まれます。 ここまでの解説で、box-sizingについてなんとなく理解していただけたのではないでしょうか。ただしbox-sizingの理解をより深めるためには、ボックスモデルの概念を学ぶ必要があります。 box-sizingの理解に欠かせないボックスモデルの概念box-sizingの理解を深めるためには、ボックスモデルの概念を知る必要があります。ボックスモデルとは「HTMLにおける全ての要素は四角い箱の中に収められている」という考え方です。 下の図をご覧ください。 HTMLの要素は4つの領域を持っています。 表示領
この記事では、「pictureタグを使ってレスポンシブに画像を切り替える方法」について解説します。 レスポンシブデザインのWebサイトでは、モバイルサイズ時とPCサイズ時で、別々の画像を表示したいときがあります。pictureタグを使えば、CSSやJavaScriptを使わずに画面幅に応じて画像を切り替えられます。 そのほかにもpictureタグを使うことで、ブラウザごとに拡張子を変更することもできます。webp拡張子に対応しているブラウザならWebP画像を、そうでないブラウザならpng, jpg, svgなどの画像を表示する、というように切り替えることで、ユーザビリティの向上が図れます。また、画像の切り替えにJavaScriptやCSSが不要なため表示スピード向上にもつながります。 いっしょにpictureタグについて学習していきましょう! プログラミング学習でこのような経験はありません
日付カテゴリータグユーザー新たに「タグ、ユーザー」で絞り込むことができるようになってますね! それでは早速実装していきましょう。 実装今回はテーマを修正することになるので、修正するファイルはfunctions.phpとなります。 外観 > テーマエディターよりエディタへと移動します。 ※知見がある方は、外部のテキストエディタで編集することも可能です。 サイドバーよりfunctions.phpをクリックします。 functions.phpを編集できるようになったら次へ進みます。 投稿一覧を「タグ」で絞り込む機能を実装 /* 投稿一覧絞り込み用 */ //投稿一覧リストの上にタグフィルターを追加する function narrowing_down_posts(){ global $post_type, $tag; if ( is_object_in_taxonomy( $post_type,
Grid Layoutは、同じくCSSレイアウト技術のFlexboxでは実現できない複雑なレイアウトを効率良く作成できます。しかし理解が難しい概念を含んでいるため、学習を挫折してしまうケースも多いでしょう。 この記事ではCSS Gridに関する他の記事を読んで挫折した場合でも理解できるように、Grid Layoutの使い方を詳しく紹介します。この記事を読めば、Grid Layoutの使い方を正確に理解できるだけでなく、Web制作においてサイトのレイアウトを組むスピードが劇的に向上します。
slickとはslickとはスライドショーが作れるjQueryのプラグインです。オプションの種類が豊富で、レスポンシブにも対応しているのが特徴です。 slickはスライダー系のプラグインの中でも幅広く使われていて、slickを使った応用事例が数多くあります。 ここからはslickを使うための準備と、基本的な使い方について解説します。 slickの導入方法slickの導入方法は2パターンあります。 ローカルファイルにダウンロードCDNを利用するslickを導入する場合はCDNを利用するのが簡単です。ファイルをダウンロードしなくても公式サイトの記述をheadタグやbodyタグにコピー&ペーストするだけで使えるからです。 ただし、自社のサーバーにslickファイルを保存し利用する場合はローカルファイルにダウンロードしましょう。 1. ローカルファイルをダウンロードする場合 slickの公式サイト
アニメーションのあるサイトはおしゃれな印象を与えることができます。CSSでアニメーションをつけるプロパティはtransitionが代表的ですが、transitionでは簡単なアニメーションしか実装できません。 そこでCSSアニメーションを使用すれば高度なアニメーションが実装できます。CSSアニメーションとはanimationプロパティと@keyframeの記述を組み合わせた実装方法です。CSSアニメーションはプロパティが多く使いこなすのは困難ですが、マスターすればWeb制作スキルが格段に上がります。 この記事ではCSSアニメーションの使い方を解説します。現場で使えるサンプルも表示しているので参考にしてください。
このページを最初にブックマークしてみませんか?
『ZeroPlus - フリーランス特化型プログラミングスクール -』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く