メンバーシップ

webデザイナーimane🍪サスティナ できることから少しずつ

生物資源系大卒、地域に根ざしたオウンドメディア制作webデザイナー。ヨーロッパを中心に…

webデザイナーimane🍪サスティナ できることから少しずつ

生物資源系大卒、地域に根ざしたオウンドメディア制作webデザイナー。ヨーロッパを中心に世界を点々とめぐり、海外と日本の違いを学ぶ。海外へ出て、帰国してもまたすぐに飛行機に乗りたくなる。デザイン、SEO、子供のキャリア教育などに携わる方と繋れたら嬉しいです。

メンバーシップに加入する

■なにをするサークルか 現在、中学校PTA役員で活動し、前年度は小学校PTA 4学年の学年委員長を努めました。 サークルでの交流は、地域のコミュニティとこれからの学校と家庭との関わり、部活動など多岐にわたります。今あるマインドやタスクをいろんな方と共有し、日本全体の教育水準の活性化に少しでも役立てたらと、この度コミュニティを立ち上げました。 本コミュニティは、子供と一緒に学ぶことが好きなママパパがアドバイスしたりするサークルです。 パパママ予備軍の方も、もちろんご参加いただけます。 ■活動方針や頻度 それぞれの学校の特性をシェアしたり、Zoomを使ったりして交流していきます。掲示板への投稿頻度は月に4回以上、Zoomは月に1回程度開きます！ ■どんな人に来てほしいか お子様の未来を考えている方ならどんな方でも構いません！ ■どのように参加してほしいか ポジティブな活動を心がけてほしいです！ もちろん、見ていただくだけでもwelcomeです!!

  • 小中学生ママのQ&Aコミュニティ

    ¥100 / 月
    初月無料

『日曜の学習』-NEWS PICKSが面白すぎて、今日も学びになりました。

こんにちは！ WEBデザイナーのimaneです。 中２長男は反抗期、小５次男はサッカーの遠征、パパはコロナ・・・。 家にいてもイライラが募るだけなので、結局外出しました。 今日のタスクは残ってる仕事を片付け、友人の名刺を作成する！ 私の秘密基地はスタバ。 課金を迷っていた「NEWS PICK」についに金曜日課金したので、番組が見放題になり、好きな時間に興味のある情報を学べる環境に！ 早速ですが、今日の学びまとめです 今日の学びまとめ。番組「WEEKLY OCHIAI

webデザイナーima…

    • 【毎日webデザイン】CSSのwidthににたまに出てくるclacの意味知ってます？？

      なんだっけ？？ width　にたまに出てくるclacの意味知ってます？？ webデザイン工程では使用しないTHMLとCSSなどの言語は、残念ながら忘れるので、ここにログ的に残していきたいと思います。 ゆくゆくは、webデザイン学習中のみなさまの毎日学習のお役に立てますように！ 例えば、 @media only screen and (min-width: 992px) .l-main { width: calc(70% -40px); margin-bottom:

      webデザイナーima…

      • 【初学者必見】HTMLにつけるclassの命名規則の考え方解説！

        こんな人におすすめ!! いつもclassの名前をどうするかで悩む どこにどんなclassを付けたか忘れてしまい、コーディングに時間がかかる classの命名に必要な英語がパッと浮かばない class命名規則のポイント主なポイント class名を見たらどこの何かがわかる まずclass名を付けるときに注意したいのが、class名を見ただけでどの部分の何に対して指定しているのかある程度検討がつくということです。 特にコーディングを学び始めて間もない方はナンバリングをする

        webデザイナーima…

        • 【CSS】薄いグレー･濃いグレーのカラーコードと名前

          「薄いグレーを使いたいけど名前、カラーコードなんだっけ？」 薄いグレーは何の色にも合いやすいため使いやすい色です。 グレーの名前とカラーコードの覚え方を解説します。 グレーも色の名前があります。 ただしグレーの場合はカラーコードのほうが覚えやすいため、カラーコードで覚えることをオススメします。 グレーのカラーコードの覚え方カラーコードとはシャープから始まり、0～9,A～Fの16の英数字が6個並ぶ、色の指定方法です。「#F15A37」←こんなやつです。 赤や青などの有彩

          webデザイナーima…

        『日曜の学習』-NEWS PICKSが面白すぎて、今日も学びになりました。

        webデザイナーimane🍪サスティナ できることから少しずつ

        マガジン

        • ロジカルコミュニケーション
          0本
        • 子どもと遊び時間
          1本
        • web系の仕事でフリーランスになる道
          13本
        • 新潟Niigata知ってる？
          0本
        • いよいよ新学期
          1本

        記事

          有名企業・ブランドのロゴで採用されているフォント15選

          現在、フランス　ニースに和と仏を合わせたビストロを作ろうとしている友人のLOGOデザインを作成中でして・・・。 日本のLOGOとまた違い、シンプルなフォントを素材にそのままベースで使ったり、遊びやゆるさをグラフィック要素が強すぎないことが飲食店LOGOでも多い？！ようなので、まずはニースの日本食ビストロやレストランを検索し、探していたところなのですが、有名企業・ブランドのLOGOも参考にしたかったので、以下作成させていただきました！ これは。デザインを普段やっている方とい

          webデザイナーima…

          有名企業・ブランドのロゴで採用されているフォント15選

          webデザイナーimane🍪サスティナ できることから少しずつ

          【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説

          jQuery使ってみたいけどどうやって使うの？ 私も、1年使っていなかったら忘れました。 今後のアーカイブ的に、頭の整理のためにこちらに残しました。 ぜひご覧ください！ CSSでもアニメーションなどの動きを付けることが出来ますが、JavaScriptというプログラミング言語を使うとよりカッコいいアニメーションを実装することが出来たり、様々なことが出来るようになります。 そしてJavaScriptをシンプルに記述できるようにしたものがjQueryとなります。 今回はこのjQ

          webデザイナーima…

          【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説

          webデザイナーimane🍪サスティナ できることから少しずつ

          【WEB制作初心者向け】ハンバーガーメニューの作り方　作らないと人は忘れる。

          1年ちょっと前は作っていたのに、 忘れるものですね・・・。 日頃作っていないと作り方を忘れてしまう、そんなところが料理のレシピと一緒です。 さて、思いだしていきましょう！ 初めての方も一緒にトライしてみましょう！！ ハンバーガーメニューの仕込み(仕組み まずハンバーガーメニューの仕組みを簡単に解説します。 まず、HTMLでハンバーガーメニューのボタンとなる要素をつくります。 次にjQueryで、「ボタンをクリックしたとき」に、「指定したHTMLタグにクラスを追加」さ

          webデザイナーima…

          【WEB制作初心者向け】ハンバーガーメニューの作り方　作らないと人は忘れる。

          webデザイナーimane🍪サスティナ できることから少しずつ

          【リセットCSSとは？】７つのリセットCSSを比較検証！

          「リセットCSSが何か知りたい」、「リセットCSSはたくさんあるけど、どれを選べばよいわからない」という方にぜひ読んで頂きたい記事です。 この記事では、7つのリセットCSSを反映したHTMLファイルの実行結果を比較検証します。 （リセットCSSのコードはコピペで使えるので、ぜひ参考にしてください。） 記事の結論部分には、各リセットCSSの特徴とオススメ度をまとめた表も載せているので、結論だけ気になる方はそちらを参照してみて下さい。 リセットCSSの基礎知識まずはじめに、

          webデザイナーima…

          【リセットCSSとは？】７つのリセットCSSを比較検証！

          webデザイナーimane🍪サスティナ できることから少しずつ

          [CSS] CSSのuser agent stylesheetとは

          google chromeの検証で見た時などに現れる、CSSのuser agent stylesheetとは何か説明する。 また、user agent stylesheetを無効化し、デフォルトのCSSを消すための「リセットCSS」についても説明する。 ”user agent stylesheet”とは「user agent stylesheet」とは、ブラウザ毎に定義されているデフォルトのCSS設定のことだ。 デフォルトなので、CSSを自分で書かなくても最初は適用され

          webデザイナーima…

          [CSS] CSSのuser agent stylesheetとは

          webデザイナーimane🍪サスティナ できることから少しずつ

          【初心者向け】メディアクエリを活用しモバイルファーストなレスポンシブWebデザインを構築する方法

          スマホの普及により、ウェブサイトを制作する上でもモバイルファーストの風潮がどんどん強くなっています。スマホ環境で見られることを想定して制作されたウェブサイトでない限り、PC用のウェブサイトをスマホ用やタブレット用の表示に切り替える必要があります。それがレスポンシブWebデザインと呼ばれる仕様です。 しかし、スマホや、タブレット用のCSSを記述する必要があり、どうしても記述量が増えるので全体のデータ容量が大きくなるわけです。その反面、PCユーザーよりもむしろスマホやタブレット

          webデザイナーima…

          【初心者向け】メディアクエリを活用しモバイルファーストなレスポンシブWebデザインを構築する方法

          webデザイナーimane🍪サスティナ できることから少しずつ

          noscriptタグとは？JavaScriptが無効である場合にのみ表示されるタグ(niigatabaseにも使用しています)

          サイトはこちらniigatabaseをご参考にしてみてください。 Webサイト制作やWebサイト開発を行っているときに ブラウザの種類や設定により、JavaScriptが無効である場合にのみ、表示させたいものがある場合どうすればいいの？ と思うことがあるかもしれません。 ここでは、そういったときに使うnoscriptタグの ・基本的な使い方 ・noscriptの内容を検索エンジンはどのように扱うか について解説します。 是非参考にしてみてください。 noscr

          webデザイナーima…

          noscriptタグとは？JavaScriptが無効である場合にのみ表示されるタグ(niigatabaseにも使用しています)

          webデザイナーimane🍪サスティナ できることから少しずつ

          【知らないとヤバい！】未経験からのITエンジニアが知っておくべきこと

          2030年には最大75万人のIT人材不足に!! 出典元:－ 経済産業省の調査(2019年3月) この事実をご存じでしょうか？ IT人材とは、経済産業省の委託事業で作成した”IT 人材需給に関する調査報告書”によると、『情報サービス業やITソフトウェア・サービスの提供事業に従事する人をIT人材』と定義しています。 不足の原因は人口の減少であったり、世界的にデジタル化が加速していることであったりと様々ですが、確実に需要と供給に差が開いているのが現状です。 では、今から未経験で

          webデザイナーima…

          【知らないとヤバい！】未経験からのITエンジニアが知っておくべきこと

          webデザイナーimane🍪サスティナ できることから少しずつ

          wordpressオリジナルテーマの作り方vol.1-1 （ファイルの準備編）~niigatabaseリニューアル制作~

          自社オウンドメディアサイトをいよいよ自分だけでwordpressで構築しようと、新米webデザイナーが新たな挑戦を！！ コーディング歴はまだ2年ほど・・・ とはいえ、自分でコーディングできなければ、ステップアップは見込めない。 誰にもまだ必要ないかもしれませんが、誰かの役に立つかもしれない。 殴り書き状態で申し訳ございませんが訪問くださった皆様ありがとうございます！ 以下本題！オリジナルテーマ制作の準備 オリジナルテーマ制作では、コーディングしたHTMLやCSSを元にテ

          webデザイナーima…

          wordpressオリジナルテーマの作り方vol.1-1 （ファイルの準備編）~niigatabaseリニューアル制作~

          webデザイナーimane🍪サスティナ できることから少しずつ

          DreamweaverとLocal(旧Local by Flywheel)の連動方法

          Local(旧Local by Flywheel)のはじめかたの記事はたくさんあるのですが、Dreamweaverと連動するための記事がなく、 自分で行ったので、ログのためにこちらに書き残しさせていただきます。 LOCALの設定についてはこちらをご覧ください！ まず、dreamweaverを立ち上げておく。 LOCALのsite folder(サイトネームの下、左側にあります Go to site folderより)を表示させる。 3.site folderへのパスを

          webデザイナーima…

          DreamweaverとLocal(旧Local by Flywheel)の連動方法

          webデザイナーimane🍪サスティナ できることから少しずつ

          OGPとは？設定するべき理由と設定方法について

          今日は久々のサイト構築の準備段階に入っており、現在の内容をいろいろ確認しているところで気になったOGP・・・ OGP（Open Graph Protocol）とはOGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。 これを設定しておくと、SNS上でURLが共有された際にタイトルや画像、説明文などが表示されるようにな

          webデザイナーima…

          OGPとは？設定するべき理由と設定方法について

          webデザイナーimane🍪サスティナ できることから少しずつ

          AI無料写真高画質化ツールの仕事が素敵すぎました！

          こちらを使用しました！ 以前試した時は、こちらのサイトを見つけられず、某サイトで試して後、全然画質良くならずに、AI使えないじゃん・・・ と思って、諦めていましたが、新たに見つけて大興奮です！！ こちらのサイトは、googleアカウントの入力で瞬時に変換完了！！ ありがたやです。 プロレベルのAI写真修復ツール AI技術に基づき、2倍または4倍まで画像を綺麗に拡大できます。荒い画像の解像度を上げて、写真の細かな部分を自動で復元して、品質を損なうことなく写真を拡大してく

          webデザイナーima…

          AI無料写真高画質化ツールの仕事が素敵すぎました！

          webデザイナーimane🍪サスティナ できることから少しずつ